实现showdaydayday功能以实现动态日期选择器

Question

<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"/>
    End Date :
    <input name='settings[end_date][]', value="2018-06-25"
    class="datepicker year-date-month-calendar input-small removetradingdates-block"/>
    <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'
  };

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

JSFidddle如下：http://jsfiddle.net/yqr69eca/17/

我有一个动态日历控件，您可以在其中添加开始和结束日期。 我想拥有beforeshowday（），以便不允许另一个范围内的任何日期。开始日期应大于上一行的结束日期。结束日期应大于上一行的开始日期。