如何禁用jquery datepicker中所选日期以外的所有其他日期

Question

我有两个名为startdate和enddate的日期选择器。我想要禁用除startdate所选日期以外的所有其他日期。例如，如果我从startdate datepicker中选择了15/12/2016，那么我想在enddate datepicker中禁用除第15天以外的所有其他日期。

Demofiddle：https://jsfiddle.net/d7vzxn8s/

这是我的代码：

<p>Start Date: <input type="text" id="startdate"></p> 
<p>End Date: <input type="text" id="enddate"></p> 

<script> 
    $("#startdate").datepicker({ 
    onSelect: function (selected) { 
     var dt = new Date(selected); 
     dt.setDate(dt.getDate()); 
     $("#enddate").datepicker("option", "minDate", dt); 
     } 
    }); 
    $("#enddate").datepicker(); 

Answer 1

改性小提琴：https://jsfiddle.net/d7vzxn8s/2/

var dateToday = new Date(); 
     var selectedDate; 
     $("#startdate").datepicker({ 
      minDate: dateToday, 
      onSelect: function (dateText, inst) { 
       selectedDate = $(this).datepicker("getDate"); 
       var slctdDate = selectedDate.getDate() 
       // alert(selectedDate); 
       $("#enddate").datepicker({ 
       minDate: inst.day, 
       beforeShowDay: function(date){ 
        //Only allow fri, sat 

         return [date.getDate()==slctdDate]; 

       } 
       }); 

      } 
     }); 

     $("#enddate").datepicker("option"); 

Answer 2

如果你想只有一个选项，在“enddate”选择来接，这是oblivous说，“enddate”将等于“startdate”。

这就是为什么您可以简单地从“startdate”中复制值到“enddate”选择器并禁用“enddate”以完全更改。

Answer 3

您可以分两步实现：

1. 属性添加到readonly#enddate，从而使内容不能被编辑或由用户更改;
2. 确保当更新#startdate的值时，#enddate的值也会更新。

这里是jQuery的用于第2步：

$("#startdate").change(function(){ 
     $("#enddate").val($("#startdate").val()); 
    }); 

工作实施例：

$(document).ready(function(){ 
 

 
    $("#startdate").change(function(){ 
 
    $("#enddate").val($("#startdate").val()); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p>Start Date: <input type="text" id="startdate"></p> 
 
<p>End Date: <input type="text" id="enddate" readonly></p>