Користувальницький інтерфейс jQuery: спадний діапазон року встановив випадок на 100 років

Використовуючи Datepicker, випадаючий рік за замовчуванням показує лише 10 років. Користувач повинен натиснути останній рік, щоб отримати більше років.

Як ми можемо встановити початковий діапазон на 100 років, щоб користувач за замовчуванням бачив великий список?

    function InitDatePickers() {
        $(".datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            maxDate: '@maxDate',
            minDate: '@minDate'
        });
    }

Ви можете встановити діапазон року за допомогою цієї опції для документації тут http://api.jqueryui.com/datepicker/#option-yearRange

yearRange: '1950:2013', // specifying a hard coded year range

або таким чином

yearRange: "-100:+0", // last hundred years

Від Документів

За замовчуванням: "c-10: c + 10"

Діапазон років, що відображається у спадному році року: або відносно сьогоднішнього року ("-nn: + nn"), щодо поточного обраного року ("c-nn: c + nn"), абсолютний ("nnnn: nnnn "), або комбінації цих форматів (" nnnn: -nn "). Зауважте, що ця опція впливає лише на те, що відображається у спадному меню, щоб обмежити, які дати можуть бути вибрані, використовуючи параметри minDate та / або maxDate.

Це прекрасно працювало для мене.

ChangeYear: - Якщо встановлено значення true, означає, що клітини попереднього або наступного місяця, зазначені в календарі поточного місяця, можуть бути обрані. Ця опція використовується з параметрами options.showOtherMonths, встановленими значенням true.

YearRange: - Вказує діапазон років у спаді року. (Значення за замовчуванням: "-10: +10 ″)

Приклад: -

$(document).ready(function() {
    $("#date").datepicker({
    changeYear:true,
    yearRange: "2005:2015"
    });
});

Посилайтеся: - встановіть діапазон року в jquery datepicker

Я зробив це:

var dateToday = new Date();
var yrRange = dateToday.getFullYear() + ":" + (dateToday.getFullYear() + 50);
and then
yearRange : yrRange

де 50діапазон від поточного року.

Ви можете встановити діапазон року за допомогою цієї опції у вибраному інтерфейсі jQuery UI:

yearRange: "c-100:c+0", // last hundred years and current years

yearRange: "c-100:c+100", // last hundred years and future hundred years

yearRange: "c-10:c+10", // last ten years and future ten years

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

Мені знадобився діапазон 70 років, який, хоча і не 100, але ще занадто багато років, щоб відвідувач прокрутився. (jQuery робить крок через рік у групах, але це біль у патуті для більшості людей.)

Першим кроком було змінити JavaScript для віджета datepicker: Знайдіть цей код у jquery-ui.js або jquery-ui-min.js (де його буде мінімізовано):

for (a.yearshtml+='<select class="ui-datepicker-year" onchange="DP_jQuery_'+y+".datepicker._selectMonthYear('#"+
a.id+"', this, 'Y');\" onclick=\"DP_jQuery_"+y+".datepicker._clickMonthYear('#"+a.id+"');\">";b<=g;b++)
 a.yearshtml+='<option value="'+b+'"'+(b==c?' selected="selected"':"")+">"+b+"</option>";
a.yearshtml+="</select>";

І замініть його таким:

a.yearshtml+='<select class="ui-datepicker-year" onchange="DP_jQuery_'+y+
 ".datepicker._selectMonthYear('#"+a.id+"', this, 'Y');
 \" onclick=\"DP_jQuery_"+y+".datepicker._clickMonthYear('#"+a.id+"');
 \">";
for(opg=-1;b<=g;b++) {
    a.yearshtml+=((b%10)==0 || opg==-1 ?
        (opg==1 ? (opg=0, '</optgroup>') : '')+
        (b<(g-10) ? (opg=1, '<optgroup label="'+b+' >">') : '') : '')+
        '<option value="'+b+'"'+(b==c?' selected="selected"':"")+">"+b+"</option>";
}
a.yearshtml+="</select>";

Це оточує десятиліття (крім поточних) тегами OPTGROUP.

Далі додайте це у свій файл CSS:

.ui-datepicker OPTGROUP { font-weight:normal; }
.ui-datepicker OPTGROUP OPTION { display:none; text-align:right; }
.ui-datepicker OPTGROUP:hover OPTION { display:block; }

Це приховує десятиліття, поки відвідувач не замислиться над базовим роком. Ваш відвідувач може швидко прокрутити будь-яку кількість років.

Сміливо користуйтеся цим; просто, будь ласка, вкажіть належне віднесення у свій код.

Я хотів реалізувати панель дат, щоб вибрати дату народження, і у мене виникли проблеми із зміною, yearRangeоскільки, схоже, це не працює з моєю версією (1.5). Я оновив останню версію jquery-ui datepicker тут: https://github.com/uxsolutions/bootstrap-datepicker .

Тоді я з’ясував, що вони надають цей дуже корисний інструмент на ходу, тож ви зможете налаштувати весь вибирач дати та побачити, якими налаштуваннями потрібно скористатися.

Ось так я і з’ясував, що варіант

defaultViewDate

- це варіант, який я шукав, і я не знайшов результатів пошуку в Інтернеті.

Тому для інших користувачів: Якщо ви також хочете вказати дату вибору дати, щоб змінити дату народження, я пропоную скористатися цим параметром коду:

$('#birthdate').datepicker({
    startView: 2,
    maxViewMode: 2,
    daysOfWeekHighlighted: "1,2",
    defaultViewDate: { year: new Date().getFullYear()-20, month: 01, day: 01 }
});

Відкриваючи дату вибору, ви почнете з подання вибору років, 20 років тому відносно поточного року.