jQuery Date Picker on Multiple Fields using array notation

Question

Using JS to generate a list of input fields that have the name of:

name="date_from[]"

The class, 'date_picker', is instantiated using:

$( ".date_picker" ).datepicker({ dateFormat: "dd-mm-yy" });

When a new record is generated using JS the new input field does in deed display the Date Picker but the date selected is inserted into the first field, always.

Is there any solution, or maybe an option in the date_picker to make it insert into the currently selected field?

I cannot duplicate this problem, see this jsFiddle. - Please consider making something similar so we can see the scenario involved. — Ohgodwhy
– Ohgodwhy, Commented Aug 29, 2012 at 14:57
Ohgodywhy can you please write an answer so that I can give you credit for this. Helped me spot my error. — rmccallum
– rmccallum, Commented Aug 29, 2012 at 15:48
It turns out my Laravel code was adding an id to each input id="date_from[]". When I introduced this to your JSFiddle code it behaved the way I explained. I have since rebuilt the ID of each element in JS as I construct it to accommodate that. And it works — rmccallum
– rmccallum, Commented Aug 29, 2012 at 16:12
One other thing. If I add another row after the page has loaded datepicker will not pick this up. Is that correct? Should I reinitiate datepicker then? — rmccallum
– rmccallum, Commented Aug 29, 2012 at 16:13

Calvein · Accepted Answer · 2012-08-29 15:06:06Z

1

The datepicker has a onClose event wich provide a variable with the result. You need to take it, split it, and set it to your inputs :

var $input = $('input')
$input.datepicker({
    dateFormat: 'dd-mm-yy'
  , onClose: function(dateText) {
        for (var i = 0, date = dateText.split('-'), item; item = $input[i];) {
            item.value = date[i++];
        }
    }
})

Here is a live example.

answered Aug 29, 2012 at 15:06

Calvein

2,12113 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery Date Picker on Multiple Fields using array notation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related