jQuery problems with different datepickers on one page

Question

I am building a planner which will be using the datepicker functionality in several different places. There is a general datepicker which controls the calendar, and then in different dialogs I want to have a button for opening a datepicker just for selecting a date for a field (e.g. the start date of an event).

The general datepicker is tied to a div (i.e. it's an inline datepicker), whereas the others are tied to inputs. There's a good reason why I have the one datepicker tied to a div: I need to be able to drag items onto it using draggable and droppable, which turns out to be impossible using a 'popup' datepicker.

Now, I've seen on a post at ExpertsExchange that once you have one datepicker instance initialized, its options will apply automatically to any other instance unless you specify them for the later ones. But in my case it seems everything gets tangled up: events specified for one item will fire on the other, the inline datepicker will appear after I close a popup datepickers, etc.

I'm not including real code yet because there's a lot of it, and I would first like to know if I'm missing a general principle, like "Datepicker does not allow one option to have different values for different instances because..." or "Don't mix inline and popup datepickers because..." or some such thing.

But my general idea in codespeak is:

$('div#mainDatePicker').datepicker({
  //options for main (inline) datepicker, doubling as defaults for any subsequent datepickers
})

$('input#selectStartDate').datepicker({
  //specific options for this datepicker, where different from the main one
})

Thanks for any help!

Wytze

score 3 · Answer 1 · answered Jun 07 '13 at 21:49

If you use $('.someclass).datepicker(); and $('.anotherclass).datepicker() it will work.

If you use:

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

this will not work.

Will happen what Alex P said.

To solve the problem you need to use id's. There is no other way.

It doesn't matter what id's you use. You can use random generated unique id's. Below is an example:

$('.someclass').each(function() {
   $('#' + $(this).attr('id')).datepicker();
});

score 2 · Answer 2 · answered Nov 25 '10 at 13:23

I did some work with multiple datepickers on the same page and had unexpected results until I realised that each datepicker needs to have a unique id.

For example, suppose you want to bind a datepicker to two similar input buttons. The following will cause problems:

<input type="text" class="myCustomDatePicker">
<input type="text" class="myCustomDatePicker">

For example, if you set a date using the second DatePicker the selected date will appear in the input field of the first input box.

Instead, setting an id will ensure each datepicker functions independently:

<input type="text" class="myCustomDatePicker" id="dp1">
<input type="text" class="myCustomDatePicker" id="dp2">

Don't know if this helps but just something to check I guess when using multiple datepickers on same page

Fareed Alnamrouti · Answer 3 · 2012-02-20T10:48:35.303

the jQuery UI Datepicker widget references the id of the html attribute you attach it to. So to use more than one datepicker you need to be sure the id's of each datepicker are different.

So you want to end up with the following HTML:

<input id="form-date-1" type="text" />
<input id="form-date-2" type="text" />
<script type="text/javascript">
  $("#form-date-1").datepicker();
  $("#form-date-2").datepicker();
</script>

check this article: http://mike-abner.posterous.com/multiple-jquery-ui-datepickers-on-the-same-pa

score 0 · Answer 4 · answered Nov 25 '10 at 10:27

I had this issue once (for the date format). Maybe you can bind it on click like :

$('div#mainDatePicker').click(function(){
    $(this).datepicker({
        //options for main (inline) datepicker, doubling as defaults for any subsequent datepickers
    })
})

$('input#selectStartDate').click(function(){
    $(this).datepicker({
        //specific options for this datepicker, where different from the main one datepickers
    })
})

jQuery problems with different datepickers on one page

4 Answers4