Question

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

这是我的JS＆amp; 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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

以下示例显示结束日期为开始日期后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");
        })

    })

结束日期＆gt; startdate日期选择器Javascript无法正常工作

2 个答案: