Bootstrap Datepicker:确保EndDate> StartDate以及最大开始日期

时间:2016-06-07 18:19:27

标签: javascript asp.net-mvc twitter-bootstrap datepicker bootstrap-datepicker

如果我的头衔很糟糕,那就道歉了。我还应首先提一下,如果重要的话,这是一个MVC应用程序。

这就是我想要做的。我希望我的日期选择器具有以下要求:

  • 开始日期必须是今天的范围 - 45天前
  • 结束日期一定不能超过今天
  • 结束日期必须在开始日期之后

这是我到目前为止所尝试的并且已经获得了前2个子弹:

HTML

<div class="col-md-6 row">
    <div class="form-group">
      <label for="StartDate">Start Date</label>
      <input  type="text" id="StartDate" class="form-control" data-provide="datepicker" data-date-start-date="-45d" data-date-end-date="0d">
      <label for="EndDate">End Date </label>
      <input  type="text" id="EndDate" class="form-control" data-provide="datepicker" data-date-start-date="-45d" data-date-end-date="0d">
      </div>
  </div>

使用Javascript:

<script type="text/javascript">
$(document).ready(function () {
  $("#StartDate").datepicker({
    dateFormat: 'mm/dd/yyyy',
    onSelect: function (selected) {
      $("#EndDate").datepicker("option", "minDate", selected)
    }
  });
  $("#EndDate").datepicker({
    dateFormat: 'mm/dd/yyyy',
    onSelect: function (selected) {
      $("#StartDate").datepicker("option", "maxDate", selected)
    }
  });

我还尝试删除HTML中的一些数据属性,而不是将它们添加到javascript中的datepicker方法中,但无济于事。

我尝试使用以下问题的解决方案,但无济于事:

我发现大多数示例都使用JQuery UI 1.9.2。我只使用JQuery 1.9.1和NOT UI。这会有所作为吗?

我是javascript以及所有其他网络内容的新手,所以我确信我错过了一些非常简单的内容,但感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

好吧,好像我找到了自己的答案。

原来我使用了两个不同插件的组合..哎呀。因此,如果其他人在验证开始日期时遇到问题&lt;在任何时候结束日期以及限制初始开始和结束日期,这是我能够工作的。

$("#StartDate").datepicker({
    autoclose: true,
  }).on('changeDate', function (selected) {
    var minDate = new Date(selected.date.valueOf());
    $('#EndDate').datepicker('setStartDate', minDate);
  });

  $("#EndDate").datepicker({
    autoclose: true
  }).on('changeDate', function (selected) {
    var minDate = new Date(selected.date.valueOf());
    $('#StartDate').datepicker('setEndDate', minDate);
  });