С помощью jQuery datepicker, как изменить диапазон года, который отображается? На сайте пользовательского интерфейса jQuery говорится, что значение по умолчанию "10 лет до и после текущего года". Я хочу использовать это для выбора дня рождения и за 10 лет до сегодняшнего дня не годится. Можно ли это сделать с помощью jQuery datepicker или мне придется использовать другое решение?
ссылка на демоверсию datepicker: http://jqueryui.com/demos/datepicker/#dropdown-month-year
Если вы посмотрите вниз на демонстрационную страницу немного, вы увидите раздел "Ограничение даты". Используйте раскрывающийся список, чтобы указать демонстрацию "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"
});
Надеемся, что будущие googlers найдут это полезным:).
Добавив к тому, что отправлено @Shog9, вы также можете ограничить даты в функции обратного вызова beforeShowDay:
Вы предоставляете функцию, которая принимает дату и возвращает логический массив:
"$(".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, ''];
}
au, nz, т.е. и т.д. являются кодами стран для национальных национальных дней (Австралия, Новая Зеландия, Ирландия,...). Как видно из кода, эти значения объединяются с "_day" и передаются обратно для применения к этому дню в качестве стиля CSS. Соответствующие стили имеют вид ниже, который перемещает текст за этот день и заменяет его изображением флага страны.
.au_day {
text-indent: -9999px;
background: #eee url(au.gif) no-repeat center;
}
Значение "false", которое передается с новым стилем, указывает, что эти дни не могут быть выбраны.
$("#DateOfBirth").datepicker({
yearRange: "-100:+0",
changeMonth: true,
changeYear: true,
});
yearRange: '1950: 2013',//указание диапазона жесткого кодированного года или таким образом
yearRange: "-100: +0",//последние сто лет
Это поможет отобразить падение для выбора года и месяца.
Я думаю, что это тоже может работать
$(function () {
$(".DatepickerInputdob").datepicker({
dateFormat: "d M yy",
changeMonth: true,
changeYear: true,
yearRange: '1900:+0',
defaultDate: '01 JAN 1900'
});