beforeShowDay 在 jQuery 日期选择器中禁用 minDate

Question

我正在使用两个 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',
    });
  });

Answer 1

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

我不太清楚你想要达到什么目的。但也许以下使用通用 beforeShowDay 函数的方法可能会有所帮助。无论如何，下面的示例将向您展示如何将包含日期选择器的 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">

beforeShowDay 在 jQuery 日期选择器中禁用 minDate

beforeShowDay disables minDate in jQuery datepicker

javascript

jquery

datepicker

mindate