4
\$\begingroup\$

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.

\$\endgroup\$
2
  • \$\begingroup\$ You could have a defaultOptions object that contains all the common elements (showOn, buttonImage, buttonImageOnly, etc), then just modify it as necessary? \$\endgroup\$ Mar 16, 2012 at 15:28
  • \$\begingroup\$ 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 \$\endgroup\$ Mar 20, 2012 at 8:50

2 Answers 2

5
\$\begingroup\$

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();
\$\endgroup\$
1
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.