Показані роки вибору дати jQuery


78

Як за допомогою jQuery datepicker можна змінити відображуваний діапазон років? На веб-сайті jQuery UI сказано, що за замовчуванням "10 років до і після поточного року відображаються". Я хочу використовувати це для вибору дня народження, і за 10 років до цього дня це не годиться. Чи можна це зробити за допомогою jQuery datepicker, чи мені доведеться використовувати інше рішення?

посилання на демонстрацію datepicker: http://jqueryui.com/demos/datepicker/#dropdown-month-year

Відповіді:


165

Якщо ви трохи подивитеся на демонстраційну сторінку, ви побачите розділ "Обмеження вибору дати". За допомогою спадного меню вкажіть 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щось інше).


Дякую! Я переглянув там, але, мабуть, пропустив. Це чудово працює.
— Джон Бокер

1
Я намагаюся використовувати це, але це показує лише -20 років від поточно вибраної дати ...?
— ajbeaven,

5
Ви також можете використовувати cзамість +0, отжеyearRange: "-20:c",
— Кокос

40

Чому б не показати вікна вибору року чи місяця?

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

1
ймовірно, це повинні бути цитати навколо рокуRange.
— Eonasdan

це саме те, що я шукаю .. спасибі, сер .. changeMonth, changeYear
— kebyang 20.03.13

Це ідеальна відповідь! Дякую!
— DmitryBoyko

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"
});

Сподіваюся, майбутні гуглери знайдуть це корисним :).


Найстаріша людина - Жанна Кальмант і їй було 122 роки. Я б поставив його до 140, щоб зберегти певний запас :)
— Крістоф Руссі

@ChristopheRoussy Ви праві, я думаю, я думав про найстаршу людину з живих ... якій зараз 116 :). Відповідь відредаговано.
— Маверік

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, '']; 
} 

що поганого у виділенні синтаксису тут? і яка справа з національними днями? Я не розумію ваш код, вибачте, якщо б ви могли пояснити?
— knocte

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

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

yearRange: "-100: +0", // останні сто років

Це допоможе показати випадаюче меню для вибору року та місяця.


2

au, nz, тобто тощо - це коди країн для країн, національні дні яких відображаються (Австралія, Нова Зеландія, Ірландія, ...). Як видно з коду, ці значення поєднуються з "_day" і передаються назад для застосування до цього дня як стилю CSS. Відповідні стилі мають вигляд, наведений нижче, який зміщує текст того дня і замінює його зображенням прапора країни.

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

Значення 'false', яке передається назад із новим стилем, вказує на те, що ці дні можуть бути не вибрані.


1

я думаю, що це може спрацювати також

$(function () {
    $(".DatepickerInputdob").datepicker({
        dateFormat: "d M yy",
        changeMonth: true,
        changeYear: true,
        yearRange: '1900:+0',
        defaultDate: '01 JAN 1900'
    });
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.