Problems with jQuery with different dates on the same page

Question

I am creating a scheduler that will use the datepicker function in several different places. There is a common datepicker parameter that controls the calendar, and then in different dialogs I want to have a button to open the datepicker only to select the date for the field (for example, the start date of the event).

The general date-picker is attached to the div (i.e. datepicker is built in to it), while the others are attached to the inputs. There is a good reason why I have one datepicker attached to a div: I need to be able to drag and drop elements onto it using draggable and droppable, which is not possible using the "popup" datepicker.

Now, I saw on a post in ExpertExchange that after you have one instance of datepicker, its parameters will automatically be applied to any other if you did not specify them for later ones. But in my case, everything seems to be confused: the events set for one element will fire on the other hand, the built-in datepicker will appear after closing the datepickers popup, etc.

I do not include the real code yet, because there is a lot of it, and I would first like to find out if I have a lack of a general principle, for example, “Datepicker does not allow one option to have different values ​​for different instances, ...” or “Do not mix built-in and pop-up dates because ... "or some such things.

But my general idea is in code:

$('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

Answer 1

$('.someclass).datepicker(); $('.anotherclass).datepicker(), .

:

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

.

, .

, . .

, . . :

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

Answer 2

, , .

, , . :

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

, , DatePicker, .

id , datepicker :

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

, , - , ,

Answer 3

jQuery UI Datepicker html, . , , .

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>

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

Answer 4

( ). , :

$('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
    })
})