Pass data into datepicker from input-field using jQuery

Question

I'm trying to create a form where the user can choose two dates.

To do this, I'm using datepicker.

JavaScript to display the input field:

        let form = document.getElementById("dateform");

        let output = "<div>";
        output +=
          "<input type='text' id='date" + i + "' onFocus='pickdate("+ i +")'><br/>";
        output += "</div>";

        form.innerHTML = output;

The "i" is used because I have several things the user can book dates for in a table. So in order to not book the same thing over and over again I've created a loop to give each product a unique id.

      function pickdate(i) {
        $(document).ready(function () {
          date = $("#date" + i).datepicker();
        });
      }

Now, this code works. The problem I'm having is that I have to click on the datepicker twice in order for it to show.

The only way I've managed to get the datepicker to pop up on the first click is by using this:

      $(document).on("focus", "#date1", function () {
        $(this).datepicker();
      });

By using this I don't have to call the function in the html either.

I however, here give the "i" value manually in "id="#date1". I need it to be dynamic and come from the product the user clicks on. With JavaScript I can just send the variable like I've done above. But how do I send the "i" value into the function with jQuery?

Thank you.

EDIT:

I tried my best to recreate the problem:

https://codepen.io/leoss/pen/gOKGRML

zigdawgydawg · Accepted Answer · 2022-11-16 22:13:24Z

1

If you add the same css class to each <input/> and remove the onFocus like so:

let dateOutput += "<div class='booking-dates'>";
  dateOutput +=
    "<input type='text' class='my-date-picker' id='date" + i +"' />;

You can initialize all of the date pickers at once with something like:

$(document).ready(function () {
  $('.my-date-picker').datepicker({
    onSelect: function (date) {

    }
  });
});

You might not even need the id attribute at all.

Here is a codepen that combines your example with my example above and shows both how to initialize an arbitrary number of datepickers at once and how to find the i of the datepicker where a date was picked.

edited Nov 16, 2022 at 22:13

answered Nov 16, 2022 at 20:56

zigdawgydawg

2,04613 silver badges10 bronze badges

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

7 Comments

leo Over a year ago

thank you. I've tried this, unfortunately it doesn't work. The datepicker doesn't show up at all. I also need the "i"-value sent into the function because there are several products a user can book. And in order for each product to get a unique id, I have to use the "i"-variabel so it's not only the first product that always get booked. The data is fetched from a database.

zigdawgydawg Over a year ago

It would be great if you could create a Minimum Reproducible Example so that others can reproduce the behavior you are seeing.

zigdawgydawg Over a year ago

Regarding passing the i into the onSelect function, you could set a data-i attribute on each input and then access it inside the onSelect function with something like var i = $(this).data('i');

leo Over a year ago

I will try to recreate the problem. I'll update the post when I've done it.

leo Over a year ago

I added a codepen now. I hope it'll describe the problem better.

|

Collectives™ on Stack Overflow

Pass data into datepicker from input-field using jQuery

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related