jQueryUI DatePicker自定義年份

Question

我有一個使用jqueryui DatePicker的Datepicker。

行為要求是：

• 用戶可以為朋友存儲生日。 用戶應該能夠存儲一年（如果知道），或者選擇“ N / A”。

• 如果選擇“不適用”，則將1900年存儲在數據庫中，並且僅在用戶輸入字段中顯示日期和月份。

• 下拉列表應從1950年開始，但應顯示從當前日期算起的過去100年（<-這將錦上添花，否則請從當年開始，並在必要時返回1900年）

這是我到目前為止所得到的，但這很笨拙……這是一種輕描淡寫的說法。 並且由於某種原因，如果用戶選擇一個日期，但不更改年份下拉菜單，則將存儲當前年份，而不是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腳本，修改后的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"
    });
});