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

301

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

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

введите описание изображения здесь

    function InitDatePickers() {
        $(".datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            maxDate: '@maxDate',
            minDate: '@minDate'
        });
    }
Ян Винк
источник
@dmaij: Если бы только взгляд на документацию по API не ответил бы на это ... Но да, изображение прекрасное ... :-)
TJ Crowder
@TJCrowder Должно быть правило, что вопросы выглядят так. И действительно, просмотр api docs мог бы сэкономить время для создания образа ...
dmaij 13.12.12
11
@TJCrowder Хорошо, что есть API. Но я просто погуглил "годовой диапазон jquery datepicker" и нашел это. Отвечаю на мой вопрос за 10 секунд. Быстрее, используя API.
Эдвин Стотелер

Ответы:

573

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

ᾠῗᵲ ᄐ ᶌ
источник
5
Были проблемы, прежде чем я понял, что +знак требуется.
th1rdey3
1
Спасибо, жестко запрограммировал это таким образом yearRange: '1950: 2013' работал
Рональд Нсабиера
1
для jQuey-Ui yearRange: «c-100: + c + 10» отлично работает, где c обозначает текущий год
TechieBrij
2
@TechieBrij Это полезно, но должно бытьc-100:c+10
DreamTeK
3
@Obsidian cфактически означает «Текущий выбранный год», а не текущий год api.jqueryui.com/datepicker/#option-yearRange
ᶌ ᄐ ᶌ
19

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

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

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

Пример:-

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

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

Ranju
источник
6

Я сделал это:

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

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

learner88
источник
4

Вы можете установить диапазон года, используя эту опцию в 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
Санджиб Дебнатх
источник
2
Спасибо за примеры
Jay
1

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

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

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

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

Гарисон Пайетт
источник
1

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

AlexioVay
источник