如何在jquery datepicker中禁用除选定日期之外的所有其他日期

I have two datepickers named startdate and enddate. I want to disable all other dates except the selected date from startdate. for example if i selected 15/12/2016 from startdate datepicker then i want to disable all other dates in enddate datepicker except 15th day.

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

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

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

This is my code :

这是我的代码:

 <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();

3 个解决方案

#1

Modified Fiddle : https://jsfiddle.net/d7vzxn8s/2/

修改小提琴: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");

#2

If you want to make only one option to pick in the "enddate" selector, it is oblivous that "enddate" would equal to "startdate".

如果您只想在“enddate”选择器中选择一个选项，那么“enddate”将等于“startdate”。

That's why you can simply copy value from "startdate" as you pick it to the "enddate" selector and disable "enddate" to be changed at all.

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

#3

You can achieve this in two steps:

你可以通过以下两个步骤来实现:

Add the attribute readonly to #enddate, so that the content cannot be edited or changed by the user;
向#enddate添加readonly属性，使用户无法编辑或更改内容;
Ensure that when the value of #startdate is updated, the value of #enddate is then updated too.
确保当#startdate的值被更新时，#enddate的值也被更新。

Here is the jQuery for Step 2:

下面是第2步的jQuery:

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

Working Example:

工作的例子:

$(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>

#1