jquery use a datepicker on more pages

Question

Hello,

I have this in my javascript file:

$("#birthdate").datepicker({
   changeMonth: true,
   changeYear: true,
   altFormat: 'dd-mm-yy',
   altField: '#birthdate',

    });

I have various pages which have fields that need a datepicker. Sometimes even more then one datepicker on a page. How can I be sure that this is also going to work for a field that has for example class name "alternateDate"?

I tried

 $("#birthdate #alternateDate").datepicker({

But that's not going to work.

Any idea's?

Answer 1

In your example, you are referring to two id's (because of the symbol #). Maybe you can try to iterate through the collection of alternateDate elements:

$('#birthdate.alternateDate').each(function(index){ $(this).datepicker({...}) });

Disclaimer: I do not know the exact jquery iteration syntax, but I'm positive it is something like this.

Answer 2

Miguel,

You might not have understood my question well. What I mean to say is that #birthdate and #alternateDate are not necessarily on the same page. So I want to have one datePicker function but i want it to be used not only by an input field which has the class birthDate but also by some other classes.

How can I accomplish this?

Answer 3

How about adding a class to the fields you want to turn into date pickers. For example:

<input type="text" id="birthDate" class="MyDatePickers">
<input type="text" id="alternateDate" class="MyDatePickers">

Which you can activate with:

$(".MyDatePickers").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: 'dd-mm-yy'
                     });

Answer 4

Thanks for the reactions. But what would you then do with the alt Field?

Answer 5

Hmm still got a problem with the date format.

$.datepicker.formatDate('dd-mm-yy');
      $(".datepicker").datepicker({
       changeMonth: true,
       changeYear: true,
       });

Here is my html

<label for="geboortedatum">Geboortedatum <em>*</em></label><br/><input type="text" class="datepicker" id="birthdate" name="birthdate" value="{$birthdate}"><br/>

But the format in the datepicker input field is still shown as 04/01/2009

meaning mm/dd/yy

Any idea's?