jQuery UI：Datepicker 将年份范围下拉设置为 100 年

Question

使用 Datepicker，默认情况下，年份下拉菜单仅显示 10 年。用户必须单击最后一年才能添加更多年份。

我们如何将初始范围设置为 100 年，以便用户默认看到一个大列表？

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

Answer 1

您可以在此处http://api.jqueryui.com/datepicker/#option-yearRangehttp://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 选项。

Answer 2

尝试以下方法：-

ChangeYear:-当设置为true时，表示上个月或下个月的单元格在当前月份的日历中指示 可以选择。此选项与 options.showOtherMonths 集一起使用 为真。

YearRange：- 指定年份下拉列表中的年份范围。 （默认值：“-10:+10”）

示例：-

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

见：- set year range in jquery datepicker

Answer 3

我这样做了：

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

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

Answer 4

您可以在 jQuery UI 日期选择器中使用此选项设置年份范围：

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

Answer 5

我想实现日期选择器来选择生日，但我在更改 yearRange 时遇到了麻烦，因为它似乎不适用于我的版本 (1.5)。我在这里更新到最新的 jquery-ui datepicker 版本：https://github.com/uxsolutions/bootstrap-datepicker。

然后我发现他们提供了这个非常有用的即时工具，因此您可以配置您的整个日期选择器并查看您必须使用哪些设置。

这就是我发现该选项的方式

默认查看日期

是我正在寻找的选项，但我没有在网络上找到任何结果。

所以对于其他用户：如果你也想提供日期选择器来更改生日，我建议使用这个代码选项：

$('#birthdate').datepicker({
    startView: 2,
    maxViewMode: 2,
    daysOfWeekHighlighted: "1,2",
    defaultViewDate: { year: new Date().getFullYear()-20, month: 01, day: 01 }
});

打开日期选择器时，您将从视图开始选择年份，相对于当前年份 20 年前。

Answer 6

考虑到最初的问题是多久前发布的，现在提出这个建议有点晚了，但这就是我所做的。

我需要一个 70 年的范围，虽然没有 100 年那么长，但对于访问者来说仍然太多年无法滚动浏览。 （jQuery 确实会以组的形式逐年进行，但对于大多数人来说，这是一种痛苦。）

第一步是修改日期选择器小部件的 JavaScript： 在 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; }

这会隐藏几十年，直到访问者将鼠标悬停在基准年上。您的访问者可以快速滚动任意年数。

随意使用它；请在您的代码中给出适当的归属。