Ограничение дат в jQuery Datepicker - PullRequest
Новая
       8

Ограничение дат в jQuery Datepicker

1 голос
/ 23 марта 2012

Я хочу использовать jQuery Datepicker в своем приложении Rails, но я никогда не разрабатывал на Java, поэтому не уверен, как использовать эти опции.У меня есть четыре поля даты:

  1. event.valid_from
  2. event.valid_to
  3. limited_date.valid_from
  4. limited_date.valid_to

Ограниченные даты должны создавать ограниченный диапазон, из которого пользователь может выбрать событие.Поэтому я хочу ограничить даты следующим образом:

limited_date.valid_from <= event.valid_to (and from) <= limited_date.valid_to </strong>

В настоящее время у меня есть: 

jQuery('#event_valid_to').datepicker({
   dateFormat: 'yy/mm/dd',
   minDate: "<%= @event.restricted.valid_from %>",
   maxDate: "<%= @event.restricted.valid_to %>"
});

, что превращается в: 

jQuery('#event_valid_to').datepicker({
   dateFormat: 'yy/mm/dd',
   minDate: "2012-02-20",
   maxDate: "2012-01-31"
});

Однако, когда я щелкаю по полю, календарь появляется в августе 2017 года со всеми серыми датами (и я могу 'Перейдите к другим месяцам).Поле также открыто для редактирования.

код поля 

<%= f.text_field :valid_to, :value=>@event.restricted.valid_to.strftime("%m/%d/%Y") %>

Что я хочу сделать:

  1. ограничить дату, как в этом примере (http://jqueryui.com/demos/datepicker/#min-max),если пользователь не может вручную ввести дату
  2. , чтобы календарь начинался с текущей даты вместо августа 2017 года

Заранее благодарим за любую помощь, которую вы можете предоставить!

Ответы [ 3 ]

0 голосов
/ 23 марта 2012

Привет, вот рабочая версия для вашего конкретного случая с использованием средства выбора даты в jsfiddle здесь : http://jsfiddle.net/jKpdP/11/

Выполняет ваши 2 требования:

1) Для ограничения и предотвращения ввода вручную: вы должны иметь возможность использовать атрибут readonly при вводе текста, и jQuery по-прежнему сможет редактировать его содержимое. 

readonly='true'

как этот 

<input type="text" placeholder="from this date" id="event_valid_to" readonly='true' />

2) иметь календарь, начинающийся с сегодняшней даты вместо августа 2017 года

Для заполнения с текущей датыЯ использовал этот код: 

var myDate = new Date();
var todaysDate =(myDate.getMonth()+1) + '/' + myDate.getDate() + '/' +
        myDate.getFullYear();
$("#event_valid_from").val(todaysDate);

Примечание: Этот код также обрабатывает - Если вы выберете дату в поле «to», которое меньше, чем «from», то «from» будетнастройте в соответствии с датой «до».

Для min и max прочитайте это, и вы можете увидеть это также в jsfiddle.http://jqueryui.com/demos/datepicker/#min-max

Весь код Jquery выглядит следующим образом: 

var myDate = new Date();
var todaysDate =(myDate.getMonth()+1) + '/' + myDate.getDate() + '/' +
        myDate.getFullYear();
$("#event_valid_from").val(todaysDate);

var dates = $("input[id$='event_valid_from'], input[id$='event_valid_to']").datepicker({
    minDate: -20, maxDate: "+1M +10D", 
    onSelect: function(selectedDate) {
        var option = this.id == $("input[id$='event_valid_from']")[0].id ? "minDate" : "maxDate",
            instance = $(this).data("datepicker"),
            date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
        dates.not(this).datepicker("option", option, date);

    }
});

Я разветвлял jsfiddle, поэтому не знаю, чья это кошка;:)

Надеюсь, это поможет, дайте мне знать, если у вас есть какие-либо вопросы, или я могу помочь,

Приветствия!

0 голосов
/ 03 апреля 2012

Я не смог получить ни одного из ответов на работу, поэтому в итоге я нашел и использовал гем jquery_datepicker . Я не мог понять, как использовать максимальную и минимальную дату, используя даты, я мог только заставить ее работать, используя + и - дни (с сегодняшнего дня).

Для моего поля даты я сделал это: 

<%= f.datepicker(:valid_from, :readonly=>'true', :value=>@event.valid_from.strftime("%m/%d/%Y"), :dateFormat => 'mm/dd/yy', :minDate => @event.calculate_min_event_date, :maxDate => @event.calculate_max_event_date , :class=>"input-small")  %>

затем в модели event.rb я поставил эти методы: 

 def calculate_min_event_date
   @min = (self.restricted_date.valid_from - Date.today).to_i
   @min = @min.to_s 
 end

 def calculate_max_event_date
   @max = (self.restricted_date.valid_to - Date.today).to_i
   @min = @min.to_s 
   @max = "+#{@max}"
 end
0 голосов
/ 23 марта 2012

Этот код очень грубый, поэтому вам, возможно, придется немного его настроить, учитывая ваши потребности. Это просто демонстрация того, как заблокировать определенные даты (также я не могу претендовать на кредит, как это было найдено в блоге где-то давным-давно, когда мне нужно было сделать что-то подобное ...), но это сработало для меня 

$('#itemID').datepicker({
                    dateFormat: 'dd-M-yy',
                    autoSize: true,
                    showOn: 'button', 
                    changeYear: true,
                    changeMonth: true,
                    showButtonPanel: true,
                    showWeek: true,
                    beforeShowDay: nonWorkingDates
                });


function nonWorkingDates(date) {
    var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6;
    var closedDates = [[0, 0, 0000]];
    var closedDays = [[Tuesday], [Wednesday], [Tuesday], [Thursday], [Friday], [Saturday], [Sunday]];
    for (var i = 0; i < closedDays.length; i++) {
        if (day == closedDays[i][0]) {
            return [false];
        }
    }

    for (i = 0; i < closedDates.length; i++) {
        if (date.getMonth() == closedDates[i][0] - 1 &&
            date.getDate() == closedDates[i][1] &&
            date.getFullYear() == closedDates[i][2]) {
            return [false];
        }
    }
    return [true];
}

как для дня по умолчанию. с сайта jquery

Установите дату, которая будет выделена при первом открытии, если поле пустое. Укажите либо фактическую дату через объект Date, либо в виде строки в текущем dateFormat, либо количество дней с сегодняшнего дня (например, +7), либо строку значений и периодов («y» для лет, «m» для месяцев, 'w' для недель, 'd' для дней, например, "+ 1m + 7d"), или ноль для сегодняшнего дня.

Примеры кода 

Initialize a datepicker with the defaultDate option specified.
$( ".selector" ).datepicker({ defaultDate: +7 });
Get or set the defaultDate option, after init.
//getter
var defaultDate = $( ".selector" ).datepicker( "option", "defaultDate" );
//setter
$( ".selector" ).datepicker( "option", "defaultDate", +7 );
...