jquery datepicker multiple instances

问题:

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

回答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.

回答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" />

回答3:

This might be a little late, but all the suggestions above didn't work for me, I came up with an easy solution for this.

First, what is causing the problem: JQuery assign datepicker to element id. if you are cloning element, then same id might be cloned as well. which jQuery doesn't like. You might end up with either receiving null reference error or the date being assigned to first input field regardless which input field you click on.

Solution:

1) destroy datepicker 2) assign new unique ids to all input field 3) assign datepicker for each input

Make sure your input is something like this

<input type="text" name="ndate[]" id="date1" class="n1datepicker">

Before you clone, destroy datepicker

$('.n1datepicker').datepicker('destroy');

After you clone, add these lines as well

var i = 0;
$('.n1datepicker').each(function () {
    $(this).attr("id",'date' + i).datepicker();
    i++;
});

and the magic happens