2008-11-06 2 views
77

С помощью jQuery datepicker, как изменить диапазон года, который отображается? На сайте пользовательского интерфейса jQuery говорится, что значение по умолчанию «10 лет до и после текущего года». Я хочу использовать это для выбора дня рождения и за 10 лет до сегодняшнего дня не годится. Можно ли это сделать с помощью jQuery datepicker или мне придется использовать другое решение?jQuery datepicker years Показано

ссылка Datepicker демо: http://jqueryui.com/demos/datepicker/#dropdown-month-year

ответ

164

Если вы посмотрите на демонстрационную страницу немного, вы увидите раздел «Ограничение 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 или что-то).

+0

Спасибо! Я посмотрел туда, но, должно быть, пропустил это. Он работает отлично. – 2008-11-06 17:39:59

+1

Я пытаюсь использовать это, но это только показ -20 лет от текущей даты_секунд ...? – ajbeaven 2010-04-02 22:47:53

+5

Вы также можете использовать `c` вместо` + 0`, поэтому `yearRange:" -20: c ",` – Kokos 2011-05-30 09:56:23

5

Добавление к тому, что отправлено @ 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, '']; 
} 
2

а.е., Н.З., то есть и т.д., являются коды стран для стран, чьи национальные дни показываются (Австралия, Новая Зеландия, Ирландия, ...). Как видно из кода, эти значения объединяются с «_day» и передаются обратно для применения к этому дню в качестве стиля CSS. Соответствующие стили имеют вид ниже, который перемещает текст за этот день и заменяет его изображением флага страны.

.au_day { 
    text-indent: -9999px; 
    background: #eee url(au.gif) no-repeat center; 
} 

Значение «false», которое передается с новым стилем, указывает, что эти дни могут быть недоступны.

38

Почему бы не показать коробки выбора года или месяца?

$(".datefield").datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    yearRange:'-90:+0' 
}); 
10

, что никто не поставил, что вы можете также установить жестко закодированные диапазоны дат:

, например:

yearRange: "1901:2012" 

в то время как это может быть желательно, чтобы не делать этого, однако, это вариант, который является вполне допустимым (и полезным, если вы законно ищете определенный год в каталоге - например, «1963: 1984»).

6

Идеально подходит для дня рождения полей (и то, что я использую) аналогично тому, что сказал 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 найти это полезным:).

2
$("#DateOfBirth").datepicker({ 
     yearRange: "-100:+0", 
     changeMonth: true, 
     changeYear: true, 
    }); 

yearRange: '1950: 2013', // определяя жесткий кодированный диапазон год или таким образом

yearRange: "-100: +0", // последние сто лет

Это поможет показать падение для выбора года и месяца.

1

я думаю, что это может работать, а

$(function() { 
    $(".DatepickerInputdob").datepicker({ 
     dateFormat: "d M yy", 
     changeMonth: true, 
     changeYear: true, 
     yearRange: '1900:+0', 
     defaultDate: '01 JAN 1900' 
    });