jQueryUI DatePicker自定义年度

Question

我有一个使用jqueryui DatePicker的数据采集器。

行为要求是：

• 用户可以为朋友存储生日。如果知道的话，用户应该能够存储一年，或者选择"N/A“。如果选择了"N/A“，则将1900年存储在数据库中，并只在输入字段中向用户显示日期和月份。
• 下拉列表应该从1950年开始，但显示从当前日期开始的过去100年(<--这将是锦上添花，否则从当前年份开始，如果有必要，可以追溯到1900年)

这是我到目前为止得到的，但这是一个低估的kludgey...and。由于某种原因，如果用户选择日期，但不更改年份下拉，则当前年份将被存储，而不是1900年。

(这是在json电话的上下文中)。当然还有更好的办法。

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(); 

Answer 1

当您发现自己超出了范围时，jQuery UI源代码很容易修改。您只需更改_generateMonthYearHeader的函数定义：

// StackOverflow question: Add option for N/A
html += '<option value="1900">N/A</option>';

并将此更改为_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));

在脚本面板中有核心UI脚本、修改后的数据选择器脚本和设置：

$(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"
    });
});