Jquery UI datepicker组合功能答案

【问题标题】：Jquery UI datepicker combining functionsJquery UI datepicker组合功能
【发布时间】：2014-11-25 09:21:29
【问题描述】：

我使用来自 jquery UI datepicker 示例站点的脚本 (1)。它提供了选择数据范围的能力。我添加了禁用今天之前的所有日期的“minDate：0”行。我想将它与我在 Stack Overflow 找到的函数 (2) 结合起来。它会禁用日历中的日期数组。

我尝试组合这些脚本，但我无法让它们一起工作（选择日期范围、禁用今天之前的日期并禁用日期数组）。非常感谢您的帮助。

(1) 来自 jquery UI datepicker 示例站点的代码。这个pen 有一个工作示例。

$(function() {
    $( "#from" ).datepicker({
      minDate: 0,
      changeMonth: true,
      numberOfMonths: 2,
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      minDate: 0,
      changeMonth: true,
      numberOfMonths: 2,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });


<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
</head>

<body>

<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">


</body>

(2) 禁用某些日期的脚本 (link)（另见 fiddle）

var array = ["2013-03-14","2013-03-15","2013-03-16"]

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

【问题讨论】：

这是Fiddle你想要的吗？
这正是我想要的。太感谢了。我尝试像这样混合代码，但一定忽略了一些东西（缺乏技能但正在努力）。

标签： jquery-ui datepicker

【解决方案1】：

只需像这样组合这些选项：

var array = ["2014-12-14","2014-12-15","2014-12-16"];

$( "#from" ).datepicker({
      minDate: 0,
      changeMonth: true,
      numberOfMonths: 2,
      beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ array.indexOf(string) == -1 ]
      },
      onClose: function( selectedDate ) {
          if (selectedDate) {
            $( "#to" ).datepicker( "option", "minDate", selectedDate );
          }
      }
   });
$( "#to" ).datepicker({
      minDate: 0,
      changeMonth: true,
      numberOfMonths: 2,
      beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ array.indexOf(string) == -1 ]
      },
      onClose: function( selectedDate ) {
          if (selectedDate) {
             $( "#from ").datepicker( "option", "maxDate", selectedDate);
          }
      }
  });

【讨论】：