0

我正在使用两个 jQuery 日期选择器，基于生成的数组禁用日期。当我将 $("#date") 日期选择器放在 $('input') 之后，效果很好。但是，我还需要将 mindate 设置为今天，并将 maxDate 设置为 1 年后；当订单相反时，它可以工作。我怎样才能使它们都起作用？

$(function() {
    var array=[]; //disabled dates for the beforeShowDay go here

    $('input').datepicker({
      beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [$.inArray(string, array) == -1];
      }
    });

    $( "#date" ).datepicker({
      dateFormat: 'yy-mm-dd',
      minDate: new Date(),
      maxDate: '+1y',
      onSelect: function(date){

        var selectedDate = new Date(date);
        var msecsInADay = 86400000;
        var endDate = new Date(selectedDate.getTime() + msecsInADay);
        $("#date1").datepicker( "option", "minDate", endDate );
        $("#date1").datepicker( "option", "maxDate", '+1y' );
      }
    });

    $("#date1").datepicker({
      dateFormat: 'yy-mm-dd',
    });
  });
4

1 回答 1

0

我不会尝试在同一个 DOM 元素上应用两个选择器（'input' 和 '#date'），因为第二个可以覆盖第一个配置的内容。如果您希望两个日期选择器共享相同的beforeShowDay功能，您可以声明一次并将其分配给每个日期选择器。

我并不完全清楚你想要实现什么。但也许以下具有通用beforeShowDay功能的方法会有所帮助。在任何情况下，下面的示例将向您展示如何在您的问题中插入一个包含 datepicker 的 JSFiddle，以阐明您想要什么。

$(function() {
    var array=['2016-12-08']; //disabled dates for the beforeShowDay go here
    var beforeShowDay = function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [$.inArray(string, array) == -1];
      };

    $( "#date" ).datepicker({
      beforeShowDay: beforeShowDay,
      dateFormat: 'yy-mm-dd',
      minDate: new Date(),
      maxDate: '+1y',
      onSelect: function(date){
        var selectedDate = new Date(date);
        var msecsInADay = 86400000;
        var endDate = new Date(selectedDate.getTime() + msecsInADay);
        $("#date1").datepicker( "option", "minDate", endDate );
        $("#date1").datepicker( "option", "maxDate", '+1y' );
      }
    });

    $("#date1").datepicker({
      beforeShowDay: beforeShowDay,
      dateFormat: 'yy-mm-dd'
    });
    
  });
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input id="date">
<input id="date1">

于 2016-12-06T10:52:43.743 回答