Dynamic forms and JQuery UI date input

Question

I have a form where you can input some information and click a button which will add a replica of that form, this can be done over and over again until they are happy with the information placed.

On this form, I have two date inputs, one which is date_from and another which is date_to, these are arrays to enable more forms on this page. What I am having trouble with, is I'm using JQuery's datepicker UI and at the minute, the inputs have id's so the datepicker can only be used once.

How would I get it so that the JQuery datepicker can be used on each date input which comes up?

This is my code so far...

$(function() {
    $("#to-date").datepicker({
        dateFormat: "dd/mm/yy",
        altField: "#alt-to",
        altFormat: "yy-mm-dd"
});

    $("#from-date").datepicker({
        dateFormat: "dd/mm/yy",
        altField: "#alt-from",
        altFormat: "yy-mm-dd"
    });
});

Here's my JSFiddle, although the datepicker isn't working on this, but it is on my desktop.

Any help would be appreciated.

Community · Accepted Answer · 2017-05-23 12:13:12Z

1

Use a class to select the inputs.

<input type="text" id="from-date"  class="from_date" value="">

$(".from_date").datepicker({...});

Edit With the updates (through the comment on my answer) question I found the solution here.

You can use JQuery selectors in the altField to get to the input you want the date to be shown in.

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered May 14, 2014 at 9:52

Tupel

3182 silver badges8 bronze badges

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

4 Comments

CheckeredMichael Over a year ago

That doesn't work, as I have a hidden field which it's meant to update and using just one updates all of the hidden fields relevant to the field which was clicked on.

CheckeredMichael Over a year ago

Sorry, I forgot the mention about there are hidden fields within the form as well. Everytime someone clicks on the add a form button it will give out two fields which can be seen and two which are hidden. I need the two which can be seen to update the two hidden fields corresponding to the two which you see. This needs to be completely dynamic some how.

Tupel Over a year ago

Then I think you'll find your answer here

CheckeredMichael Over a year ago

Thank you for that comment, it has helped me out. :)

Collectives™ on Stack Overflow

Dynamic forms and JQuery UI date input

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related