Question

我有一个使用jqueryui DatePicker的Datepicker。

行为要求是：

用户可以为朋友存储出生日期。用户应该能够存储一年（如果已知），或选择“N / A”。
如果选择“N / A”，则将1900年存储在数据库中，并仅在输入字段中向用户显示日期和月份。
下拉列表应从1950年开始，但显示从当前日期起的过去100年（＆lt; - 这将是锦上添花，否则从当年开始，如果有必要，可以追溯到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

Click here to see a demo.

当您发现自己超出范围时，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"
    });
});

jQueryUI DatePicker自定义年份

1 个答案: