patternjavascriptMinor

Refactor this jQuery datepicker code to be as small as possible

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

thispossiblejquerysmallcodedatepickerrefactor

Problem

I am using jQuery datepicker on 2 forms on the same page.

I currently am using the following code (below), but as you can see, I am using the same parameters over again (showOn, buttonImage, buttonImageOnly, dateFormat, & constrainInput)

Is there a more efficient way to do this rather then repeating myself over and over again, over 4 methods?

$('#startdate').datepicker(
    {
        showOn: 'both', 
        buttonImage: '/assets/images/calendar_symbol.png', 
        buttonImageOnly: true,
        dateFormat: 'dd/mm/yy',
        constrainInput: true, // All of the above is repeated again below
        minDate: new Date(, , ),
        onClose: function()
            {
                $('#enddate').val($('#startdate').val());
            }
    }
);

$('#enddate').datepicker(
    {
        showOn: 'both', 
        buttonImage: '/assets/images/calendar_symbol.png', 
        buttonImageOnly: true,
        dateFormat: 'dd/mm/yy',
        constrainInput: true, // All the above repeated again..
        minDate: new Date(, , )
    }
);

$('#filter_startdate').datepicker(
    {
        showOn: 'both',
        buttonImage: '/assets/images/calendar_symbol.png',
        buttonImageOnly: true,
        dateFormat: 'dd/mm/yy',
        constrainInput: true,// and again...
        onClose: function()
            {
                $('#enddate').val($('#startdate').val());
            }
    }
);

$('#filter_enddate').datepicker(
    {
        showOn: 'both',
        buttonImage: '/assets/images/calendar_symbol.png',
        buttonImageOnly: true,
        dateFormat: 'dd/mm/yy',
        constrainInput: true // and again....
    }
);

I was thinking of using a if statement to check what was clicked (#startdate or #filter_startdate), and then breaking it down like that, but unsure if this would work or how to do this.

Solution

You'll want to use setDefaults to clean up your code a bit. Also with a few variables you can clean it up even more.

$.datepicker.setDefaults({
    showOn: 'both',
    buttonImage: '/assets/images/calendar_symbol.png',
    buttonImageOnly: true,
    dateFormat: 'dd/mm/yy',
    constrainInput: true
});

var minDate = new Date(
    , 
    , 
    
);

var setEndDate = function() {
    $('#enddate').val($('#startdate').val());
};

$('#startdate').datepicker({
    minDate: minDate ,
    onClose: setEndDate 
});

$('#enddate').datepicker({
    minDate: minDate 
});

$('#filter_startdate').datepicker({
    onClose: setEndDate 
});

$('#filter_enddate').datepicker();

Code Snippets

$.datepicker.setDefaults({
    showOn: 'both',
    buttonImage: '/assets/images/calendar_symbol.png',
    buttonImageOnly: true,
    dateFormat: 'dd/mm/yy',
    constrainInput: true
});

var minDate = new Date(
    <?php echo date("Y")?>, 
    <?php echo date("m")-1?>, 
    <?php echo date("d")?>
);

var setEndDate = function() {
    $('#enddate').val($('#startdate').val());
};

$('#startdate').datepicker({
    minDate: minDate ,
    onClose: setEndDate 
});

$('#enddate').datepicker({
    minDate: minDate 
});

$('#filter_startdate').datepicker({
    onClose: setEndDate 
});

$('#filter_enddate').datepicker();

Context

StackExchange Code Review Q#10068, answer score: 5

Revisions (0)

No revisions yet.