结束日期>开始日期选择器Javascript无法正常工作

Question

我希望日期选取器只显示大于开始日期的值。我经历了许多这样的例子，但没有解释为什么我的代码不工作。 ： -/

这里是我的JS & HTML片段：

var start; 
 

 
$(document).ready(function() { 
 
    $('#s_dt').datepicker({ 
 
     startDate: new Date(), 
 
     daysOfWeekDisabled: [0, 6], 
 
     onSelect: function(date) { 
 
     start = new Date(date); 
 
     } 
 
    }) 
 
    .on('changeDate', function(ev) { 
 
     $('#s_dt').datepicker('hide'); 
 
    }); 
 
    $('#e_dt').datepicker({ 
 
     startDate: start, 
 
     daysOfWeekDisabled: [0, 6], 
 
    }) 
 
    .on('changeDate', function(ev) { 
 
     $('#e_dt').datepicker('hide'); 
 
    }); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/css/datepicker.css" rel="stylesheet" /> 
 

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

 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 

 
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/js/bootstrap-datepicker.js"></script> 
 

 

 
<div class="form-group"> 
 
    <label class=" col-sm-3" for="title">Start Date</label> 
 
    <div class="col-sm-9"> 
 
    <input type='text' class="form-control startdate" id="s_dt" placeholder="Start Date" name="s_dt" /> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <label class="col-sm-3" for="title">End Date</label> 
 
    <div class="col-sm-9"> 
 
    <input type='text' class="form-control startdate" id="e_dt" placeholder="End Date" name="e_dt" /> 
 
    </div> 
 
</div>

Answer 1

以下示例显示结束日期为开始日期后1天。您可以通过添加任何数量end变量end.setDate(st.getDate()+1);

$(document).ready(function() { 
     var start = new Date(); 
     var end = new Date(); 

     $("#s_dt").datepicker({ 
      startDate: start, 
      daysOfWeekDisabled: [0, 6], 
     }) 
     $("#s_dt").on('changeDate', function() { 
      var st = new Date($("#s_dt").val()); 
      var end = new Date(st); 
      end.setDate(st.getDate()+1); 
      end.toLocaleDateString(); 

      $("#e_dt").datepicker({ 
       startDate: end, 
       daysOfWeekDisabled: [0, 6], 
      }) 

     }) 
      //basically this clears out the datepicker when you clear out the end date to select a new date. 
     $("#e_dt").on('changeDate',function(){ 
      $('#e_dt').datepicker("remove"); 
     }) 

    }) 

Answer 2

var start; 
 
$('#s_dt').datepicker({ 
 
    startDate: new Date(), 
 
    daysOfWeekDisabled: [0, 6], 
 
    onSelect: function(date) { 
 
     start = new Date(date); 
 
     var selectedDate = $(this).datepicker("getDate"); 
 
     var today = new Date().valueOf(); 
 
     if (selectedDate.valueOf() < today) { 
 
      $(this).val(""); 
 
     } 
 
    } 
 
}) 
 

 
$('#e_dt').datepicker({ 
 
    setStartDate: new Date(), 
 
    daysOfWeekDisabled: [0, 6], 
 
    onSelect: function(date) { 
 
     start = new Date(date); 
 
     var s_date = $('#s_dt').datepicker("getDate"); 
 
     var selectedDate = $(this).datepicker("getDate"); 
 
     if (selectedDate.valueOf() < s_date) { 
 
      $(this).val(""); 
 
     } 
 
    } 
 
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/css/datepicker.css" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" /> 
 

 

 
<div class="form-group"> 
 
    <label class=" col-sm-3" for="title">Start Date</label> 
 
    <div class="col-sm-9"> 
 
     <input type='text' class="form-control startdate" id="s_dt" placeholder="Start Date" name="s_dt" /> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <label class="col-sm-3" for="title">End Date</label> 
 
    <div class="col-sm-9"> 
 
     <input type='text' class="form-control startdate" id="e_dt" placeholder="End Date" name="e_dt" /> 
 
    </div> 
 
</div>

绑定日期选择器的内置onSelect所有选项的条件。