Как правильно настроить максимальный / минимальный диапазон дат jquery-ui и инициализировать значение по умолчанию из столбца Rails?

Question

Я использую jquery-ui datepicker для поля DOB пользователя в приложении Rails 3.2.

Я пытаюсь добиться следующего:

1. ограничить диапазондаты, которые могут быть выбраны, max = сегодня, min = 100 лет назад.
2. инициализирует указатель даты с датой, которая в настоящее время хранится в базе данных (если есть).
3. отображает выбранную дату в видеопределенный формат в текстовом поле dob.

Моя форма выглядит следующим образом:

<%= form_for @user do |f| %>
    <%= f.text_field :dob, :class=>'date-selector-dob', :value => (@user.dob.blank? ? '' : @user.dob.to_s(:long))  %>
<% end %>

, где .to_s(:long) - это формат отображения, который мне нужен.

При использовании следующего javascript средство выбора даты работает, текстовое поле правильно отформатировано, но максимальная / минимальная дата не установлена, и инициализация с сохраненной датой не происходит.

$(function (){  // enabledate picker
    $('.date-selector-dob').datepicker();
});

Я добавил к этим функциям, что я хотя бы установил минимальный / максимальный диапазон и инициализировал бы следующим образом:

$(function (){  // enable date picker
    $('.date-selector-dob').datepicker({minDate: new Date('-100Y'), maxDate: new Date('-1D')}); // enable datepicker and set range
    $('.date-selector-dob').datepicker('setDate', new Date($('.date-selector-dob').attr('value'))); // initialize datepicker with stored value

});

Этот является , инициализирующим выбор датыправильно, но не устанавливает минимальный / максимальный диапазон.Мой подход неверен?

Кроме того, расширенная функция сбрасывает мою строку форматирования, и данные не отображаются в соответствии с .to_s(:long).Используя основную функцию выше, эта строка форматирования применяется правильно.Что могло бы вызвать это?

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

Answer 1

JavaScript Date не знает, что означают -100Y или -1D, поэтому ваши настройки minDate и maxDate не будут чем-то, что поймет DatePicker.

С точное руководство :

minDate

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

Итак, вы хотите это:

 $('.date-selector-dob').datepicker({
     minDate: '-100y',
     maxDate: '-1d'
  });

Демонстрация: http://jsfiddle.net/ambiguous/RQgCW/

Если вы хотите выбрать датучтобы использовать определенный формат даты, используйте параметр dateFormat:

Формат проанализированных и отображаемых дат.Этот атрибут является одним из атрибутов регионализации.Полный список возможных форматов см. В функции formatDate.

Кроме того, вы должны пропустить это:

$('.date-selector-dob').datepicker('setDate', new Date($('.date-selector-dob').attr('value')))

и просто установить <input>Если value приписать дату (предпочтительно в формате ISO 8601 ), то средство выбора даты должно иметь возможность взять ее оттуда самостоятельно.

Answer 2

Во время инициализации объекта datepicker нам нужно передать все наши условия как хеш. В вашем примере, ваш DatePicker инициализирован во второй раз, это проблема для получения диапазона дат.

$(function (){  
        $('.date-selector-dob').datepicker({
                dateFormat: 'M dd, yyyy',
                minDate: '-1y',
                maxDate: '+1m',
        });
});

Вы можете установить дату следующим образом, для этого вам нужно указать правильный формат даты (уже указанный в параметре инициализатора как 'dateFormat')

$('#popupDatepicker').val("Feb 13, 2012");