элемент управления datepicker на jQuery лет показано
с помощью jQuery datepicker, как можно изменить диапазон года, который отображается? На сайте jQuery UI говорится, что по умолчанию "отображаются 10 лет до и после текущего года". Я хочу использовать это для выбора дня рождения и 10 лет до сегодняшнего дня ничего хорошего. Можно ли это сделать с помощью jQuery datepicker или мне придется использовать другое решение?
ссылка на демо datepicker:http://jqueryui.com/demos/datepicker/#dropdown-month-year
8 ответов:
если вы немного посмотрите на демо-страницу, вы увидите раздел "ограничение Datepicker". Используйте выпадающий список, чтобы указать "
Year dropdown shows last 20 years" демо-и нажмите просмотреть исходный код:$("#restricting").datepicker({ yearRange: "-20:+0", // this is the option you're looking for showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true });вы хотите сделать то же самое (очевидно меняется
-20до-100или что-то).
почему бы не показать поля выбора года или месяца?
$( ".datefield" ).datepicker({ changeMonth: true, changeYear: true, yearRange:'-90:+0' });
то, что никто другой не поставил, это то, что вы также можете установить жестко закодированные диапазоны дат:
например:
yearRange: "1901:2012"хотя это может быть целесообразно не делать этого, это, однако, вариант, который является совершенно действительным (и полезно, если вы законно ищете, скажем, конкретный год в каталоге - например, "1963:1984" ).
идеально подходит для полей даты рождения (и то, что я использую) похоже на то, что сказал Shog9, хотя я собираюсь привести более конкретный пример DOB:
$(".datePickerDOB").datepicker({ yearRange: "-122:-18", //18 years or older up to 122yo (oldest person ever, can be sensibly set to something much smaller in most cases) maxDate: "-18Y", //Will only allow the selection of dates more than 18 years ago, useful if you need to restrict this minDate: "-122Y" });надеюсь, что будущие гуглеры найдут это полезным :).
добавление к тому, что @Shog9 опубликовал, вы также можете ограничить даты по отдельности в функции beforeshowday: callback.
вы предоставляете функцию, которая принимает дату и возвращает логическое значение, массив:
"$(".selector").datepicker({ beforeShowDay: nationalDays}) natDays = [[1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'], [4, 27, 'za'], [5, 25, 'ar'], [6, 6, 'se'], [7, 4, 'us'], [8, 17, 'id'], [9, 7, 'br'], [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']]; function nationalDays(date) { for (i = 0; i < natDays.length; i++) { if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) { return [false, natDays[i][2] + '_day']; } } return [true, '']; }
$("#DateOfBirth").datepicker({ yearRange: "-100:+0", changeMonth: true, changeYear: true, });yearRange: '1950:2013', // указание жестко год или вот так
yearRange: "-100:+0", // последние сто лет
это поможет показать выпадающее меню для выбора года и месяца.
au, nz, ie и др. коды стран для стран, национальные дни которых отображаются (Австралия, Новая Зеландия, Ирландия,...). Как видно из кода, эти значения объединяются с '_day' и передаются обратно для применения к этому дню в качестве стиля CSS. Соответствующие стили имеют форму, показанную ниже, которая перемещает текст для этого дня в сторону и заменяет его изображением флага страны.
.au_day { text-indent: -9999px; background: #eee url(au.gif) no-repeat center; }значение 'false', которое передается обратно с новым стиль указывает, что эти дни могут быть не выбраны.
Я думаю, что это может работать так же
$(function () { $(".DatepickerInputdob").datepicker({ dateFormat: "d M yy", changeMonth: true, changeYear: true, yearRange: '1900:+0', defaultDate: '01 JAN 1900' });
Comments