jQuery UI：Datepicker 将年份范围下拉列表设置为 100 年
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13865218/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI: Datepicker set year range dropdown to 100 years
提问by Ian Vink
Using the Datepicker the year drop down by default shows only 10 years. The user has to click the last year in order to get more years added.
使用日期选择器，年份下拉默认只显示 10 年。用户必须单击去年才能添加更多年份。
How can we set the initial range to be 100 years so that the user will see a large list by default?
我们如何将初始范围设置为 100 年，以便用户默认看到一个大列表？
function InitDatePickers() {
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
maxDate: '@maxDate',
minDate: '@minDate'
});
}
回答by ?????
You can set the year range using this option per documentation here http://api.jqueryui.com/datepicker/#option-yearRange
您可以在此处根据文档使用此选项设置年份范围http://api.jqueryui.com/datepicker/#option-yearRange
yearRange: '1950:2013', // specifying a hard coded year range
or this way
或者这样
yearRange: "-100:+0", // last hundred years
From the Docs
来自文档
Default: "c-10:c+10"
The range of years displayed in the year drop-down: either relative to today's year ("-nn:+nn"), relative to the currently selected year ("c-nn:c+nn"), absolute ("nnnn:nnnn"), or combinations of these formats ("nnnn:-nn"). Note that this option only affects what appears in the drop-down, to restrict which dates may be selected use the minDate and/or maxDate options.
默认值：“c-10:c+10”
年份下拉显示的年份范围：要么相对于今天的年份（“-nn:+nn”），相对于当前选择的年份（“c-nn:c+nn”），绝对值（“nnnn: nnnn”），或这些格式的组合（“nnnn:-nn”）。请注意，此选项仅影响下拉列表中显示的内容，使用 minDate 和/或 maxDate 选项限制可以选择的日期。
回答by Ranju
This worked perfectly for me.
这对我来说非常有效。
ChangeYear:-When set to true, indicates that the cells of the previous or next month indicated in the calendar of the current month can be selected. This option is used with options.showOtherMonths set to true.
YearRange:-Specifies the range of years in the year dropdown. (Default value: “-10:+10″)
ChangeYear：-当设置为true时，表示可以选择当前月份日历中指示的上个月或下个月的单元格。此选项与 options.showOtherMonths 设置为 true 一起使用。
YearRange：-指定年份下拉列表中的年份范围。（默认值：“-10:+10”）
Example:-
例子：-
$(document).ready(function() {
$("#date").datepicker({
changeYear:true,
yearRange: "2005:2015"
});
});
Refer :- set year range in jquery datepicker
回答by learner88
I did this:
我这样做了：
var dateToday = new Date();
var yrRange = dateToday.getFullYear() + ":" + (dateToday.getFullYear() + 50);
and then
yearRange : yrRange
where 50is the range from current year.
50从当前年份开始的范围在哪里。
回答by Sanjib Debnath
You can set the year range using this option in jQuery UI datepicker:
您可以在 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
回答by Garison Piatt
This is a bit late in the day for suggesting this, given how long ago the original question was posted, but this is what I did.
考虑到最初的问题是多久前发布的，今天提出这个建议有点晚了，但这就是我所做的。
I needed a range of 70 years, which, while not as much as 100, is still too many years for the visitor to scroll through. (jQuery does step through year in groups, but that's a pain in the patootie for most people.)
我需要一个 70 年的范围，虽然没有 100 年多，但对于访问者来说仍然是太多年。（jQuery 确实以小组形式跨过一年，但这对大多数人来说是一种痛苦。）
The first step was to modify the JavaScript for the datepicker widget: Find this code in jquery-ui.js or jquery-ui-min.js (where it will be minimized):
第一步是修改日期选择器小部件的 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>";
And replace it with this:
并将其替换为：
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>";
This surrounds the decades (except for the current) with OPTGROUP tags.
这围绕着 OPTGROUP 标签的几十年（除了当前）。
Next, add this to your CSS file:
接下来，将其添加到您的 CSS 文件中：
.ui-datepicker OPTGROUP { font-weight:normal; }
.ui-datepicker OPTGROUP OPTION { display:none; text-align:right; }
.ui-datepicker OPTGROUP:hover OPTION { display:block; }
This hides the decades until the visitor mouses over the base year. Your visitor can scroll through any number of years quickly.
这隐藏了几十年，直到访问者将鼠标悬停在基准年上。您的访问者可以快速滚动浏览任意年数。
Feel free to use this; just please give proper attribution in your code.
随意使用它；请在您的代码中给出适当的归属。
回答by AlexioVay
I wanted to implement the datepicker to select the birthdate and I had troubles changing the yearRangeas it doesn't seemed to work with my version (1.5). I updated to the newest jquery-ui datepicker version here: https://github.com/uxsolutions/bootstrap-datepicker.
我想实现日期选择器来选择生日，但我在更改yearRange它时遇到了麻烦，因为它似乎不适用于我的版本 (1.5)。我在这里更新到最新的 jquery-ui datepicker 版本：https: //github.com/uxsolutions/bootstrap-datepicker。
Then I found out they provide this very helpful on-the-fly tool, so you can config your whole datepicker and see what settings you have to use.
然后我发现他们提供了这个非常有用的即时工具，因此您可以配置整个日期选择器并查看您必须使用哪些设置。
That's how I found out that the option
这就是我发现该选项的方式
defaultViewDate
默认查看日期
is the option I was looking for and I didn't find any results searching the web.
是我一直在寻找的选项，但我在网上搜索时没有找到任何结果。
So for other users: If you also want to provide the datepicker to change the birthdate, I suggest to use this code options:
所以对于其他用户：如果您还想提供日期选择器来更改生日，我建议使用此代码选项：
$('#birthdate').datepicker({
startView: 2,
maxViewMode: 2,
daysOfWeekHighlighted: "1,2",
defaultViewDate: { year: new Date().getFullYear()-20, month: 01, day: 01 }
});
When opening the datepicker you will start with the view to select the years, 20 years ago relative to the current year.
打开日期选择器时，您将从视图开始选择相对于当前年份 20 年前的年份。
