319

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

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

在此处输入图像描述

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

6 回答 6

604

您可以在此处根据文档使用此选项设置年份范围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 选项。

于 2012-12-13T17:30:00.240 回答
22

尝试以下操作：-

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

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

例子：-

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

请参阅：- 在 jquery datepicker 中设置年份范围

于 2015-02-28T06:42:41.360 回答
6

我这样做了：

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

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

于 2014-11-26T02:13:31.730 回答
6

您可以在 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
于 2019-01-04T06:38:04.333 回答
2

我想实现日期选择器来选择生日，但我在更改时遇到了麻烦，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 年前相对于当前年份。

于 2016-10-26T07:59:18.743 回答
1

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

我需要一个 70 年的范围，虽然没有 100 年多，但对于访问者来说仍然太多年滚动浏览。（jQuery 确实以组为单位进行了一年，但对于大多数人来说，这是一种痛苦。）

第一步是修改 datepicker 小部件的 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; }

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

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

于 2016-08-10T16:43:32.323 回答