Question

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

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>

Answer 1

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

如何为动态字段禁用小于或等于开始日期的日期选择器的结束日期

1 个答案: