jQuery UI：Datepicker将年份范围下拉至100年

本文翻译自：jQuery UI: Datepicker set year range dropdown to 100 years

Using the Datepicker the year drop down by default shows only 10 years. 使用Datepicker，默认情况下，年份下拉列表仅显示10年。 The user has to click the last year in order to get more years added. 用户必须单击去年才能获得更多年份。

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'});}

#1楼

参考：https://stackoom.com/question/wAyY/jQuery-UI-Datepicker将年份范围下拉至-年

#2楼

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 来自Docs

Default: "c-10:c+10" 默认值：“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"). 年份下拉列表中显示的年份范围：相对于当前年份（“-nn：+ nn”），相对于当前选定年份（“c-nn：c + nn”），绝对值（“nnnn： nnnn“），或这些格式的组合（”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. 请注意，此选项仅影响下拉列表中显示的内容，以使用minDate和/或maxDate选项限制可以选择的日期。

#3楼

I did this: 我这样做了：

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

where 50 is the range from current year. 其中50是当前年份的范围。

#4楼

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. ChangeYear： -设置为true时，表示可以选择当前日历中指示的上个月或下个月的单元格。 This option is used with options.showOtherMonths set to true. 此选项与options.showOtherMonths设置为true一起使用。

YearRange:- Specifies the range of years in the year dropdown. YearRange： -指定年份下拉列表中的年份范围。 (Default value: “-10:+10″) （默认值：“ - 10：+10”）

Example:- 例：-

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

Refer :- set year range in jquery datepicker 参考： - 在jquery datepicker中设置年份范围

#5楼

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. 我需要一个70年的范围，虽然不到100，但仍然是太多年的访问者滚动。 (jQuery does step through year in groups, but that's a pain in the patootie for most people.) （jQuery在小组中逐年完成，但对于大多数人来说，这对于patootie来说是痛苦的。）

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): 第一步是修改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>";

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. 请在您的代码中给出正确的归属信息。

#6楼

I wanted to implement the datepicker to select the birthdate and I had troubles changing the yearRange as it doesn't seemed to work with my version (1.5). 我想实现datepicker来选择生日，我在更改yearRange遇到了麻烦，因为它似乎与我的版本（1.5）无关。 I updated to the newest jquery-ui datepicker version here: https://github.com/uxsolutions/bootstrap-datepicker . 我在这里更新到最新的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 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: 所以对于其他用户：如果你还想提供datepicker来改变生日，我建议使用这个代码选项：

$('#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年前相对于当前年份的年份。

jQuery UI：Datepicker将年份范围下拉至100年相关推荐

jQuery UI Datepicker 选择时分秒
jQuery UI Datepicker日期选择插件很好用了,只不过只能精确到日,不能选择时间(小时分钟秒)很遗憾,而jquery-ui-timepicker-addon.js正是基于jQuery U ...
文本框下载jQuery UI Datepicker精美的日期选择组件
时间紧张,先记一笔,后续优化与完善. 期日择选组件在平常开辟中应用还是非常泛广的,jQuery UI Datepicker作为jQuery UI的期日择选组件,不仅应用活灵.主题富丰多样,更因为平常泛 ...
坑爹的jquery ui datepicker
1.坑爹的jquery ui datepicker 竟然不支持选取时分秒,害的我Format半天期间尝试了bootstrap的ditepicker,但是不起作用,发现被jquery ui 覆盖了, ...
使用 Jquery 来实现可以输入值的下拉选单雏型
最近案子中,需要使用下拉选单,但问题是,里面选项都会有各其他:,然後可以让 user 在输入值上网找了一下,有一堆现成的控件,可是现成的我要去了解,来结合我现在系统来应用,要花不少时间 ...
elementui树状菜单tree_Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）...
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
【Element ui 的NavMenu二级菜单下拉icon修改】
Element ui 的NavMenu二级菜单下拉icon修改原来是这样的,下拉icon在右边修改成icon在左边,并更改icon的形状修改icon的css属性,覆盖原来的.需要注意的是取消打开 ...
jQuery UI Datepicker日期日历改造为年月日历
jQuery UI Datepicker日期日历改造为年月日历参数为:yymm 显示如下效果参数为:yymmdd 显示效果如: 具体代码修改如下,红色为修改内容 /*! * jQuery UI ...
element ui中的el-dropdown（下拉框）防止点一下就隐藏的问题
element ui中的el-dropdown(下拉框)防止点一下就影藏的问题当使用el-dropdown下拉框时,下拉框的每项中,可能需要加入@click.@change或复选框等事件,而el-d ...
jQuery UI在Server 2008 IE8下DatePicker问题修复
这真是个WTF的问题,类似参见Stack Overflow 这个DatePicker问题只在Server 2008的IE8下出现.至于为什么win7的IE8支持,Server2008的IE8不支持,就 ...

jQuery UI：Datepicker将年份范围下拉至100年

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

jQuery UI：Datepicker将年份范围下拉至100年相关推荐

最新文章

热门文章