beforeShowDay 在 jQuery datepicker 中禁用 minDate答案

【问题标题】：beforeShowDay disables minDate in jQuery datepickerbeforeShowDay 在 jQuery datepicker 中禁用 minDate
【发布时间】：2017-04-20 19:46:25
【问题描述】：

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

【问题讨论】：

请添加工作 jsfiddle
我必须同意@TechBreak：当您添加 JSFiddle 来演示您的问题时，它会更容易帮助您。至少你应该显示你正在使用的 HTML。
我无法让任何一个日期选择器在 jsfiddle 上工作，至于 html，它几乎只是一个和。问题似乎不在 html 中。如果我注释整个 $('input').datepicker() 其他两个按我想要的那样工作，如果我注释另外两个， $('input').datepicker() 会使日期变灰我想让它变灰。我想知道 javascript 代码中是否存在冲突

标签： javascript jquery datepicker mindate

【解决方案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">

【讨论】：

这正是它的问题所在，非常感谢！