Javascript UI日期选择器代码格式

导言

我正在我的一个应用程序中使用jQuery datepicker插件。在一个页面上有多个

input

元素，其中包含

datepicker

插件的实例

但是每个元素在

datepicker

属性上都有一些不同的设置。 另外，

onSelect

事件具有不同于其他实例的功能

示例

第一个要素：

$("input[id*=txtEmployeeBirthDate]").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: "dd-mm-yy",
    showAnim: "slideDown",
    dayNamesMin: ["Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za"],
    monthNamesShort: ["jan", "feb", "mar", "apr", "mei", "jun", "jul", "aug", "sep", "okt", "nov", "dec"],
    yearRange: "1900:2050",
    onSelect: function (dateText, inst) { 
        $("input[id$=hdnBirthDate]").val(dateText); 
    }
});

第二个要素：

$("input[id*=txtHolidayDate]").datepicker({
    changeMonth: false,
    changeYear: false,
    dateFormat: "dd-mm-yy",
    showAnim: "slideDown",
    dayNamesMin: ["Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za"],
    monthNamesShort: ["jan", "feb", "mar", "apr", "mei", "jun", "jul", "aug", "sep", "okt", "nov", "dec"],
    monthNames: ["januari", "februari", "maart", "april", "mei", "juni", "juli", "augustus", "september", "oktober", "november", "december"],
    yearRange: _y + ":" + _y, // _y is a private variable which contains the current year
    onSelect: function (dateText, inst) {
        $("input[id$=hdnHolidayDate]").val(dateText); 
    }
});

问题

问题是我有超过5个不同的

datepicker

插件实例。 我想格式化或压缩代码，因为像

dateFormat

和

monthnameshort

这样的属性总是相同的

问题

---

这是他们的方法吗？覆盖日期选择器？或者哪种解决方案是最好的？

您可以使用可重用对象，并使用每个日期选择器的唯一设置对其进行扩展

var settings = {
    changeMonth     : true,
    changeYear      : true,
    dateFormat      : "dd-mm-yy",
    showAnim        : "slideDown",
    dayNamesMin     : ["Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za"],
    monthNamesShort : ["jan", "feb", "mar", "apr", "mei", "jun", "jul", "aug", "sep", "okt", "nov", "dec"]
}

$("input[id*=txtEmployeeBirthDate]").datepicker(
    $.extend(settings, {
        yearRange: "1900:2050",
        onSelect: function (dateText, inst) { 
            $("input[id$=hdnBirthDate]").val(dateText); 
        }
    })
);

$("input[id*=txtHolidayDate]").datepicker(
    $.extend(settings, {
        yearRange: _y + ":" + _y,
        onSelect: function (dateText, inst) {
            $("input[id$=hdnHolidayDate]").val(dateText); 
        }
    })
);

如果这些是应应用于所有日期选择器的全局设置，则还可以使用将其设置为全局设置

var defaults = {
    changeMonth     : true,
    ...etc
}

$.datepicker.setDefaults(defaults);

---

如果每个日期选择器需要以不同的方式初始化，则应以不同的方式初始化它们。您可以创建一个变量来保存月份数组（或所有日期选择器中常见的任何变量），并将该变量传递给日期选择器初始化，这样您就不必在每次进行更改时都复制该变量。使用全局设置，您还需要使用

$.extend（）

方法吗？或者只在实例中直接应用其他设置好吗？