jquery datepicker multiple instances

Question

I have made a RequestForQuote form, in which I give the possebility to add new positions to get RFQ'ed.

In basics this is quite easy done via PHP in my case. Work realy fine. You may want to have a look. It is to be found at: my website

Now I got infected with the jquery-virus and simply wanted to add the datepicker ui (for the latest version I got from their webpage).

<input type="text" size="10" id="deldate[] 
     class="datepicker" value="<?php echo $_REQUEST['deldate'][$k]; ?>" />

$k is from a php for($k=0;$k<=$NoPos;$k++) loop

the javascript code work is like:

$(function() {
$('input').filter('.datepicker').datepicker({
        showOn: 'button', 
        buttonImage: 'calender/media/cal.gif', 
        buttonImageOnly: true,
        firstDay: 1,
        dateFormat: 'yy-mm-dd', 
        minDate: 0, maxDate: '+4Y'});

}); 

An in the browswer it looks quite nice, the ui shows up, I cann select a date.

BUT...

if I add another position to the form, which is done via PHP, so I have to submit the form to count $NoPos up, the formerly inersted date(s) is lost and I have a blank input-field.

now with the onSubmit: function(dateText) I can get the selected date. However I am failing in accessing the correct input field to put the date in.

So my question is simple: What am I doing wrong? If evrything is fine then someone would please please tell me how I can solve this..

I have thougth of something such as:

for (var i=0;i<=NoPos;i++) {
    var tag = "#deldate"+i;
    $(tag).datepicker({ ... });
}

and using php to <input type="text" size="10" id="lieferdat<?php echo $k; ?>" class="datepicker" />

Many thanks for your assumed patience to read through this...

and many more thanks for any hints given

Cheers Daniel

Solution 1

i was looking for the same myself, and i think i found the trick to it: $('input').filter('.datepickerclass').datepicker()
and on the relevant input elements:
class="datepickerclass"

i see above you tried something similar, but just following the recipe (of that link) worked for me.

Solution 2

I don't think the problem lies with the datepicker. The datepicker is just used to fill in the input field with the date, it shouldn't have anything to do with the form fields that are submitted to the server. In any event, only a single datepicker control (div) is actually placed on the page no matter how many dynamic datepickers you actually use. Can you post the relevant generated HTML for the page?

BTW, it looks like (at least in your sample code) you are missing a quote on the id. If that's in the actual code, that could be causing your problem.

EDIT: Based on your posted example (which really should have been added to your question by editing it instead of added as an answer to it), I see your problem. Your input has no name parameter. Inputs are only posted back if they have a name.

Change this:

<input type="text" size="10"
       id="lieferdat<?php echo $k; ?>"
       class="datepicker" />

to this:

<input type="text" size="10"
       id="lieferdat<?php echo $k; ?>"
       name="lieferdat<?php echo $k; ?>"
       class="datepicker" />

Comments

[Daniel]

I agree that it is not jquery's "fault" just my inexperience in this area.. I have posted the html code. Thanks again!

[Daniel]

You were correct that the name parameter was missing. I fixed that but no change. Still, as soon as I add another pos, i.e. submit the form (either with POST or GET) all values are there execpt the dates I put in...

[Daniel]

I was quite tiered yesterday, so I started over today from sratch. Result: if I use a direct pointer such as $('#lieferdat').datepicker() it works fine. the date stays after a reload of the page. Well, I could go and "place" 20 ids and limit the inut to that number (usually the customer does not need more than 10). However I would have been more satisfied to do it dynamicallay. Well, I will post the result, if I manage to handle it one day. Again thanks for the support!! Cheers, Daniel