Пользовательский интерфейс jQuery: Datepicker установил раскрытие диапазона лет до 100 лет

Это отлично сработало для меня.

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 - диапазон от текущего года.

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

Затем я узнал, что они предоставляют этот очень полезный инструмент "на лету", поэтому вы можете настроить весь ваш датпикер и посмотреть, какие настройки вы должны использовать.

Вот как я узнал, что опция

defaultViewDate

- это вариант, который я искал, и я не нашел результатов поиска в Интернете.

Итак, для других пользователей: Если вы также хотите предоставить datepicker для изменения даты рождения, я предлагаю использовать следующие варианты кода:

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

При открытии datepicker вы начнете с представления, чтобы выбрать годы, 20 лет назад относительно текущего года.

Это немного поздно в день, чтобы предложить это, учитывая, как давно оригинальный вопрос был опубликован, но это то, что я сделал.

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

Первым шагом было изменение 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; }

Это скрывает десятилетия до тех пор, пока посетитель не примет участие в базовом году. Ваш посетитель может быстро прокручивать любое количество лет.

Не стесняйтесь использовать это; просто дайте правильную атрибуцию в своем коде.