Forums

How can I get the jQuery UI DatePicker to work in a Multiplier? The DatePicker works fine when assigned to a single ID textbox element. But when I'm using the multiplier, there is a unique ID assigned to each additional date to be added, and the DatePicker I've configured doesn't work with the Multiplier. Any suggestions?

The ID for the single DatePicker is #startdate and #endate.

The multiplier is using: #student[##][sstartdate] and #student[##][senddate]

The code I'm using for the jQuery UI DatePIcker:

jQuery(document).ready(function (jQ) {
  jQ( '#startdate' ).datepicker({
    numberOfMonths: 2,
    minDate: 0,
    onSelect: checkDate,
    beforeShowDay: unavailable
  });

  function checkDate(start_date, el) {
    jQ( '#enddate' ).datepicker('option', 'disabled', false);
    jQ( '#enddate' ).datepicker('option', 'minDate', start_date);
  }

  // note the following line would be set dynamically in a real application
    var unavailableDates = ['20-2-2016','21-2-2016','23-2-2016','24-2-2016','25-2-2016','26-2-2016','27-2-2016','28-2-2016','29-2-2016','1-3-2016','2-3-2016','3-3-2016','4-3-2016','5-3-2016','6-3-2016','7-3-2016','8-3-2016','9-3-2016','10-3-2016','11-3-2016','12-3-2016','13-3-2016','14-3-2016','15-3-2016','16-3-2016','17-3-2016','18-3-2016','19-3-2016','20-3-2016','21-3-2016','22-3-2016','23-3-2016','24-3-2016','25-3-2016','26-3-2016','27-3-2016','28-3-2016','29-3-2016','30-3-2016','31-3-2016','1-4-2016','2-4-2016','3-4-2016','9-4-2016','10-4-2016','11-4-2016','12-4-2016','13-4-2016','14-4-2016','15-4-2016','16-4-2016','17-4-2016','18-4-2016','19-4-2016','20-4-2016','21-4-2016','22-4-2016','23-4-2016','24-4-2016','25-4-2016','26-4-2016','27-4-2016','28-4-2016','29-4-2016','30-4-2016','1-5-2016','2-5-2016','3-5-2016','4-5-2016','5-5-2016','6-5-2016','7-5-2016','8-5-2016','9-5-2016','10-5-2016','11-5-2016','12-5-2016','13-5-2016','14-5-2016','15-5-2016','16-5-2016','17-5-2016','18-5-2016','19-5-2016','20-5-2016','21-5-2016','22-5-2016','23-5-2016','24-5-2016','25-5-2016','26-5-2016','27-5-2016','28-5-2016','29-5-2016','30-5-2016','31-5-2016','1-6-2016','2-6-2016','3-6-2016','4-6-2016','5-6-2016','2-7-2016','3-7-2016','4-7-2016','5-7-2016','6-7-2016','7-7-2016','8-7-2016','9-7-2016','10-7-2016','30-7-2016','31-7-2016','13-8-2016','14-8-2016','15-8-2016','16-8-2016','17-8-2016','18-8-2016','19-8-2016','20-8-2016','21-8-2016','22-8-2016','23-8-2016','24-8-2016','25-8-2016','26-8-2016','27-8-2016','28-8-2016','29-8-2016','30-8-2016','31-8-2016','1-9-2016','2-9-2016','3-9-2016','4-9-2016','5-9-2016','6-9-2016','7-9-2016','8-9-2016','9-9-2016','10-9-2016','11-9-2016','12-9-2016','13-9-2016','14-9-2016','15-9-2016','16-9-2016','17-9-2016','18-9-2016','19-9-2016','20-9-2016','21-9-2016','22-9-2016','23-9-2016','24-9-2016','25-9-2016','26-9-2016','27-9-2016','28-9-2016','29-9-2016','30-9-2016','31-9-2016','1-10-2016','2-10-2016','3-10-2016','4-10-2016','5-10-2016','6-10-2016','7-10-2016','8-10-2016','9-10-2016','10-10-2016','11-10-2016','12-10-2016','13-10-2016','14-10-2016','15-10-2016','16-10-2016','17-10-2016','18-10-2016','19-10-2016','20-10-2016','21-10-2016','22-10-2016','23-10-2016','24-10-2016','25-10-2016','26-10-2016','27-10-2016','28-10-2016','29-10-2016','30-10-2016','31-10-2016','1-11-2016','2-11-2016','3-11-2016','4-11-2016','5-11-2016','6-11-2016','7-11-2016','8-11-2016','9-11-2016','10-11-2016','12-11-2016','13-11-2016','14-11-2016','15-11-2016','16-11-2016','17-11-2016','18-11-2016','19-11-2016','20-11-2016','21-11-2016','22-11-2016','24-11-2016','25-11-2016','26-11-2016','27-11-2016','28-11-2016','29-11-2016','30-11-2016','1-12-2016','2-12-2016','3-12-2016','4-12-2016','5-12-2016','6-12-2016','7-12-2016','8-12-2016','9-12-2016','10-12-2016','11-12-2016','12-12-2016','13-12-2016','14-12-2016','15-12-2016','16-12-2016','17-12-2016','18-12-2016','31-12-2016'];

  jQ( '#enddate' ).datepicker({
    numberOfMonths: 3,
    minDate: +10,
    maxDate: '+10M +10D',
    beforeShowDay: unavailable
  });

  jQ( '#enddate' ).datepicker('option', 'disabled', true);

  function unavailable(date) {
    dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
    if (jQ.inArray(dmy, unavailableDates) == -1) {
       return [true, ''];
    } else {
      return [false, '', 'Unavailable'];
    }
  }
});

Hi toad,

When you use the Multiplier the Add button creates a new copy of the multiplier inputs with new names and ids. It is not clever enough to spot that you have some custom code attached to one of these and add that too. You have to add code to do that.

So far I haven't found any automatic way of running JavaScript after the add button runs - I have found a workaround that you are welcome to try. See the Working with JavaScript section in this FAQ.

To add the datepicker you'll have to know the id of the newly created text input you want to link it to. I did this by adding a hidden input to the multiplier with a known id so that I could easily get a list of all the multiplier ids in use, I saved this, then when the Add or Delete button was clicked checked to see what has changed. If there is a new Id then add a datepicker to the element in that row.

Bob