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”选择器中选择一个选项，则“enddate”将等于“startdate”，这是遗忘的。

这就是为什么您只需将“startdate”中的值复制到“enddate”选择器并禁用“enddate”进行更改即可。

Answer 3

您可以分两步完成此操作：

将属性readonly添加到#enddate，以便用户无法编辑或更改内容;
确保更新#startdate的值时，#enddate的值也会更新。

以下是第2步的jQuery：

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

工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: