结束日期 > 开始日期日期选择器 Javascript 不工作

Question

我希望日期选择器只显示大于开始日期的值。我经历过很多这样的例子，但 none 解释了为什么我的代码不起作用。 :-/

这是我的 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

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 日期选择器的内置选项上绑定所有条件。

Answer 2

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

中的 end 变量来确定结束日期

$(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");
        })

    })

结束日期 > 开始日期日期选择器 Javascript 不工作

end date > startdate date picker Javascript not working

javascript

jquery

jquery-ui-datepicker