使用Datepicker,年份下拉菜单默认只显示10年。用户必须点击最后一年才能获得更多年份。

我们如何将初始范围设置为100年,以便用户在默认情况下看到一个大列表?

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

当前回答

试试下面的方法:-

ChangeYear:—当设置为true时,表示在当月日历中显示上一个月或下一个月的单元格 可选择。此选项与选项一起使用。showOtherMonths集 为true。 YearRange:—在年份下拉框中指定年份的范围。(默认值:" -10:+10″)

例子:-

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

在jquery datepicker中设置年份范围

其他回答

试试下面的方法:-

ChangeYear:—当设置为true时,表示在当月日历中显示上一个月或下一个月的单元格 可选择。此选项与选项一起使用。showOtherMonths集 为true。 YearRange:—在年份下拉框中指定年份的范围。(默认值:" -10:+10″)

例子:-

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

在jquery datepicker中设置年份范围

我是这样做的:

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

其中50是当前年份的范围。

你可以在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

您可以在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选项。

我想实现日期选择器来选择生日,但我在更改yearRange时遇到了麻烦,因为它似乎不适合我的版本(1.5)。我在这里更新到最新的jquery-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年前。