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

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

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

enter image description here

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

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

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

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

Пример: -

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

Обратите внимание: - установить диапазон года в jquery datepicker

Ответ 3

Я сделал это:

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

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

Ответ 4

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

Мне понадобился диапазон 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; }

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

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

Ответ 5

Я хотел реализовать 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 лет назад относительно текущего года.