jQuery UI: Datepicker установить диапазон года выпадающего списка до 100 лет

С помощью Datepicker выпадающий год по умолчанию показывает только 10 лет. Пользователь должен щелкнуть последний год, чтобы добавить больше лет.

Как мы можем установить начальный диапазон в 100 лет, чтобы пользователь видел большой список по умолчанию?

enter image description here

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

5 ответов

вы можете установить диапазон года, используя эту опцию в документации здесь 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.

523

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

ChangeYear:- если установлено значение true, указывает, что ячейки предыдущего или следующего месяца, указанные в календаре текущего месяца можно выбрать. Этот параметр используется с параметрами.набор showOtherMonths значение true.

YearRange:- задает диапазон лет в раскрывающемся списке год. (Значение по умолчанию: "-10:+10")

пример:

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

обозначения :- установить диапазон года в jQuery datepicker

14

Я сделал так:

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

здесь 50 - это диапазон от текущего года.

3

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

мне нужен был диапазон 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; }

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

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

0

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

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

вот как я узнал, что вариант

defaultViewDate

Это вариант, который я искал, и я не нашел никаких результатов в интернете.

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

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

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

0