it-swarm.com.ru

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

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

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

enter image description here

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

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

541
ᾠῗᵲᄐᶌ

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

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

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

Пример:-

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

См .: - установить диапазон года в jquery datepicker

15
Ranju

Я сделал это:

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

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

4
learner88

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

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

Мне нужен был диапазон 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
Garison Piatt

Я хотел реализовать средство выбора даты, чтобы выбрать дату рождения, и у меня были проблемы с изменением 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 лет назад относительно текущего года.

0
AlexioVay