[英]jQueryUI DatePicker Customizing the Year
I have a Datepicker using jqueryui DatePicker. 我有一个使用jqueryui DatePicker的Datepicker。
The behavior requirement is: 行为要求是:
A User can store a Birthdate for a friend. 用户可以为朋友存储生日。 The User should be able to store a year if known, or select "N/A".
用户应该能够存储一年(如果知道),或者选择“ N / A”。
If "N/A" is selected, Store the year 1900 in the database and only display the day and month in an input field to the User. 如果选择“不适用”,则将1900年存储在数据库中,并且仅在用户输入字段中显示日期和月份。
The dropdown should start at 1950 but show the past 100 years from current date (<-- this would be icing on the cake, otherwise start at current year and if necessary go back to 1900) 下拉列表应从1950年开始,但应显示从当前日期算起的过去100年(<-这将锦上添花,否则请从当年开始,并在必要时返回1900年)
Here's what I got so far, but it's kludgey...and that's an understatement. 这是我到目前为止所得到的,但这很笨拙……这是一种轻描淡写的说法。 And for some reason, if the user selects a date, but doesn't alter the year dropdown, then the current year is stored, rather than 1900.
并且由于某种原因,如果用户选择一个日期,但不更改年份下拉菜单,则将存储当前年份,而不是1900。
(it's in the context of a json call). (在json调用的上下文中)。 Surely there's a better way.
当然有更好的方法。
var birthday_options = {changeMonth: true, changeYear: true, yearRange: '1900:2010',
onClose: function(dateText, inst) {
contact.field_updater('birthday').call(this);
$('input.mng-birthday').val(function(i, val) {
return val.replace('/1900', '');
});
},
beforeShow: function (input) {
setTimeout(function () {
$('select.ui-datepicker-year option:first').text('N/A');
}, 1);
}},
.find('.mng-birthday').val(data.birthday || 'Unknown')
.datepicker(birthday_options)
.end();
Click here to see a demo. 单击此处查看演示。
When you find yourself out of scope, the jQuery UI source is easy to modify. 当您发现自己超出范围时,易于修改jQuery UI源。 You just need to change the function definition for _generateMonthYearHeader:
您只需要更改_generateMonthYearHeader的函数定义:
// StackOverflow question: Add option for N/A
html += '<option value="1900">N/A</option>';
And make this change to _selectDay to ommit the year when N/A is selected. 并将此更改更改为_selectDay以省略选择N / A的年份。
// StackOverflow question: format the date
if (inst.currentYear == 1900)
this._selectDate(id, (inst.currentMonth + 1) + "/" + inst.currentDay);
else
this._selectDate(id, this._formatDate(inst, inst.currentDay,
inst.currentMonth, inst.currentYear));
In the script panel you have the core UI script, the modified datpicker script, and the setup: 在脚本面板中,您具有核心UI脚本,修改后的datpicker脚本和设置:
$(document).ready(function() {
var year = new Date().getFullYear();
$(".mng-birthday").datepicker({
changeYear: true,
// The year range is from the current year to 100 years before
yearRange: (year - 100) + ":" + year,
// The default date is january 1st fifty years before the current year
defaultDate: "01/01/1900"
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.