如何禁用小于或等于动态字段开始日期的日期选择器的结束日期 [英] How to disable the end dates of a datepicker that are lesser than or equal to start date for dynamic fields

问题描述

仅对于默认值，小于开始日期的结束日期被禁用.我该如何在动态领域中做到这一点?

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>

推荐答案

    <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);
      });
    });

这篇关于如何禁用小于或等于动态字段开始日期的日期选择器的结束日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！