Question

Suppose you have a page with multiple datepickers and you want to set some properties with the same value to all of them (with a class selector), and then set non shared properties to each one of them (with an id selector). How to do this?

Here is what I´ve tried so far

$(document).ready(function() {
    // Shared properties for all datepickers with class="datepicker"
    $( ".datepicker" ).datepicker({
        showOn: 'focus',
        showButtonPanel: true,
        showOtherMonths: true,
        selectOtherMonths: true,
        dateFormat: "d M yy"
    });

    // Specific properties for each datepicker
    $("#myDate1").datepicker({ 
      altFormat: "yy-mm-dd",
      altField: "#myDate1_alt"
    });

    $("#myDate2").datepicker({ 
      altFormat: "yy-mm-dd",
      altField: "#myDate2_alt"
    });
});

Markup

<input type='text' id='myDate1' class="datepicker"/>        
<input type="hidden"  id="myDate1_alt"/>        

<input type='text' id='myDate2' class="datepicker"/>        
<input type="hidden"  id="myDate2_alt"/>

It sets well the shared properties but not the specific ones. I also tried inverting the order (“#myDate1” – “#myDate2” – “.datepicker”, but then the properties for “.datepicker” were gone).

Answer 1

You can pass the option verb to the datepicker() method:

// Specific properties for each datepicker.

$("#myDate1").datepicker("option", { 
    altFormat: "yy-mm-dd",
    altField: "#myDate1_alt"
});

$("#myDate2").datepicker("option", {
    altFormat: "yy-mm-dd",
    altField: "#myDate2_alt"
});