UI datepicker code format

Question

Introduction

I'm using the jQuery datepicker plugin in one of my applications. On one page their are multiple input elements which contains an instance of the datepicker plugin.

But each element has some differences set on the datepicker properties. Also the onSelect event has a function that is different from each other instance.

Example

First element:

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

Second element:

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

Problem

The problem is that I have more then 5 different instances of the datepicker plugin. And I would like to format or compact the code, because some properties like dateFormat and monthNamesShort are always the same.

Question

Is their a way to do this? Override the datepicker? Or what solution would be the best?

If each datepicker needs to be initialized differently than you should initialize them differently. You could do things like creating a variable to hold your month array (or whatever is common across all the datepickers) and pass that variable to the datepicker initialization so you don't have to copy it each time you make a change. — Coda17
– Coda17, Commented Jun 3, 2014 at 14:14

adeneo · Accepted Answer · 2014-06-03 14:21:56Z

2

You can use a reusable object, and just extend it with the unique settings for each datepicker

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

FIDDLE

If these are global settings that should apply to all datepickers, you can also set them as global settings with

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

$.datepicker.setDefaults(defaults);

FIDDLE

edited Jun 3, 2014 at 14:21

answered Jun 3, 2014 at 14:16

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mivaweb Over a year ago

Using the global settings do you still have to use the $.extend() method? Or is it good to only apply the other settings directly in the instance?

Collectives™ on Stack Overflow

UI datepicker code format

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related