Refactor this jQuery datepicker code to be as small as possible

Question

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(<?php echo date("Y")?>, <?php echo date("m")-1?>, <?php echo date("d")?>),
 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(<?php echo date("Y")?>, <?php echo date("m")-1?>, <?php echo date("d")?>)
 }
);
$('#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.

• Matt Grande: You could have a defaultOptions object that contains all the common elements (showOn, buttonImage, buttonImageOnly, etc), then just modify it as necessary?
• Olivier Pons: My eyes are burning! Why do you do: <?php echo date("Y")?>, <?php echo date("m")-1?>, <?php echo date("d")?> instead of <?php echo date("Y").",".(date("m")-1).",".date("d"); ?> ? Just my 2c

Answer 1

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(
 <?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();

Answer 2

Hmm well according to the datepicker source code it doesn't use the jquery ui widget factory, which is a bit annoying because it's not standard. But global defaults should be set how ChaosPandion suggested.

However if you don't want to do global defaults how about your own defaults object? My favorite way of doing that is with jQuery.extend.

$(function() {
var standardDatePicker = function(options) {
 return $.extend({
 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(<?php echo date("Y")?>, <?php echo date("m")-1?>, <?php echo date("d")?>)
 }, options)
}
$('#startdate').datepicker(standOptions({ 
 onClose: function() { 
 $('#enddate').val($('#startdate').val());
 } 
}))
$('#enddate').datepicker(standardOptions());
})

By the way in javascript you place curly braces on the same line, not on a new line. This is not just a matter of style because as Douglas Crockford has pointed out over and over, placing braces on a new line can occasionally cause your program to have strange silent errors due to semi-colon insertion.