Пользовательский интерфейс jQuery: Datepicker установил раскрытие диапазона лет до 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 datepicker:

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). Я обновил до последней версии DatePicker jquery-UI здесь: 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 лет назад относительно текущего года.