How to disable the end dates of a datepicker that are lesser than or equal to start date for dynamic fields

Question

Here only for the default values the end dates lesser than start dates are disabled. How do i have it done for the dynamic fields as well?

var constants = {
  MAX_YEAR: "2020"
};

var datePickerOptions = {
  maxDate: constants.MAX_YEAR + '-12-31',
  changeYear: true,
  changeMonth: true,
  dateFormat: 'yy-mm-dd',
  onSelect: function(selected) {
    $("#enddate").datepicker("option", "minDate", selected)
  }
};

$(document).ready(function() {
  $('.datepicker').datepicker(datePickerOptions);

  $('#container').on('click', '.remove', function() {
    $(this).parent().remove();
  });

  $('#add').on('click', function() {
    var row = $('div.addNew:first').clone();
    $('#container').append(row);
    var pickers = row.find(".datepicker");
    pickers.removeAttr("id");
    pickers.removeClass("hasDatepicker");
    pickers.datepicker(datePickerOptions);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<div id="container">
  <div class="addNew" ?>
    Start Date :
    <input name='settings[start_date][]' , value="2018-06-25" class="datepicker year-date-month-calendar input-small removetradingdates-block" id="startdate" /> End Date :
    <input name='settings[end_date][]' , value="2018-06-25" class="datepicker year-date-month-calendar input-small removetradingdates-block" id="enddate" />
    <input type="button" class="remove" value="Remove" />
  </div>
  <input type="button" id="add" value="Add Periods" />
</div>

you'll have to explain it a lot better than that for anyone reading now (or in future) who hasn't read your previous questions. At least define "default" and "dynamic" in this context at the very least. Also "only for the default values the end dates lesser than start dates are disabled"...not in this demo they're not. When I open the enddate picker I can pick any date I like. The second time I open it I can't pick any date earlier than the end date I selected last time. This makes no logical sense as far as I can see. — ADyson, Jun 28 '18 at 13:29
Anyway your idea based on giving the inputs an ID will never work because IDs must be unique, and when you clone them, you'll end up with duplicate IDs which is invalid. Actually I'm disappointed you even tried this - as I explained this exact concept in the answer and comments on your last question (see https://stackoverflow.com/a/51022059/5947043) , due to removal of duplicate IDs being one of the things which needed to be done to get the datepickers working on the cloned inputs. I feel like you didn't actually learn anything from that... — ADyson, Jun 28 '18 at 13:32
What you need to do is find a way to relate each pair of inputs to _each other_. One idea is to give all start date inputs the _class_ "startdate" and all "enddates" the _class_ "enddates", and then in the onSelect, use jQuery to find the nearest datepicker field with the correct class, and get its value. In your current HTML structure it'll actually be a _sibling_ of the clicked datepicker. https://api.jquery.com/category/traversing/ - in there you'll find the tools you need. Please make an attempt to solve this yourself with the clues I've given you, ask again with more code if you're stuck — ADyson, Jun 28 '18 at 13:36

Programmer · Answer 1 · 2018-07-03T10:04:10.567

    <div id="container">
      <div class="addNew" ?>
        Start Date :
        <input name='settings[start_date][]', value="2018-06-25"
        class="datepicker year-date-month-calendar input-small removetradingdates-block startdate" />
        End Date :
        <input name='settings[end_date][]', value="2018-06-25"
        class="datepicker year-date-month-calendar input-small removetradingdates-block enddate" />
        <input type="button" class="remove" value="Remove" />
      </div>
      <input type="button" id="add" value="Add Periods" />
    </div>

    var constants = {
      MAX_YEAR: "2020"
    };

    var datePickerOptions = {
        maxDate: constants.MAX_YEAR + '-12-31',
        changeYear: true,
        changeMonth: true,
        dateFormat: 'yy-mm-dd',
        onSelect: function(selected) {

  $(this).parent().find(".enddate").datepicker("option","minDate", selected)
  $(this).parent().find(".startdate").datepicker("option","maxDate", selected)                   
                }

      };

    $(document).ready(function() {
      $('.datepicker').datepicker(datePickerOptions);

      $('#container').on('click', '.remove', function() {
        $(this).parent().remove();
      });

      $('#add').on('click', function() {
        var row = $('div.addNew:first').clone();
        $('#container').append(row);
        var pickers = row.find(".datepicker");
        pickers.removeAttr("id");
        pickers.removeClass("hasDatepicker");
        pickers.datepicker(datePickerOptions);
      });
    });

this will still restrict the end date incorrectly the second time you select the field. Bad news if you decide to change your mind and try to set an earlier end date (but one which is still after the start date). Also if you don't explicitly set a start date but leave it as the default, the end date is never restricted. You need to put a bit more thought into this and test it more thoroughly. I found all that in about 20 seconds of testing, so you can't have played with it very much. — ADyson, Jun 28 '18 at 14:12
@Adyson what would be the best way to resolve my issue. I am stuck with this. The dates are restricted when i click the second time — Programmer, Jul 03 '18 at 10:07
Well for a start you need to make sure the datepickers initialise with the correct settings, not only waiting for the user to select something. Also you need to stop them from updating themselves - they should only update each other. — ADyson, Jul 03 '18 at 10:13

How to disable the end dates of a datepicker that are lesser than or equal to start date for dynamic fields

1 Answers1

Linked