Apply jQuery datepicker to multiple instances

To add multiple instance of jQuery datepicker (or timepicker), it is possible to use class instead of the ID to initialize the widget in particular when the form is generated from the backend and the exact number of field is not known.

The html code will be:

<input type="text" class="datepicker" id="date1" />
<input type="text" class="datepicker" id="date2" />
<input type="text" class="datepicker" id="date3" />

The jQuery script will be:

$('.datepicker').each(function(){
    $(this).datepicker();
});

Remember to include jquery and jquery-ui scripts to the page.

Tagged , , ,

Leave a Reply