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

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

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

    function InitDatePickers() {
        $(".datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            maxDate: '@maxDate',
            minDate: '@minDate'
        });
    }
5 280
jquery jquery-ui-sortable 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 set к истине.

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 делает шаг через год в группах, но это боль в 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; }

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

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

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