使用 bootstrap 日期选择器进行日期验证

Question

使用 bootstrap-日期选择器。 StartDate 和 EndDate 有两个文本框。当用户更改这两个文本框中的任何一个中的日期时，我正在尝试设置验证。在页面加载时，两个框都有当前日期。

测试用例：
当用户设置..
1. startDate超出当前日期，设置startDate=endDate
2.startDate超过endDate，设置endDate=startDate
3. endDate超出当前日期，设置endDate=current Date
4.endDate低于startDate，设置startDate=endDate

案例 1 失败。假设今天是 2016 年 1 月 11 日，我将开始日期设置为 2016 年 1 月 12 日，它不会更改为 2011 年 1 月 11 日，而是保持为 2016 年 1 月 12 日。

此外，案例 3 失败。

我的逻辑有问题吗

这里是 fiddle - http://jsfiddle.net/snh6eh9p/2/

JS:

function validateDates(dateType) {
  //dateType is to know if this function was fired by changing startdate or enddate
  //end-date must always be >= start-date
  var today = new Date();
  var startDate = new Date($(".txtStartDate").val());
  var endDate = new Date($(".txtEndDate").val());

  switch (dateType) {
    case 1:
    case "1":
      //if startDate is changed
      if (startDate > today) {
        setTriggerDates(endDate, 1); //set startDate=enddate         
      } else if (startDate > endDate) {
        setTriggerDates(startDate, 2); //set endDate=startDate
      }
      break;
    case 2:
    case "2":
      //if endDate is changed                    
      if (endDate > today) {
        setTriggerDates(today, 2); //set endDate=today
      } else if (endDate < startDate) {
        setTriggerDates(endDate, 1); //set startDate=endDate
      }
      break;
  }
}

function setTriggerDates(newDate, applyTo) {
  //applyTo determines, which textfield the value should be applied to.
  //if 1, then change value of txtStartDate,
  //if 2, then change value of txtEndDate  

  //populate date into the date fields
  var today = new Date(newDate);
  var dd = today.getDate();
  var mm = today.getMonth() + 1; //January is 0!
  var yyyy = today.getFullYear();

  if (dd < 10) {
    dd = '0' + dd
  }

  if (mm < 10) {
    mm = '0' + mm
  }

  today = yyyy + '-' + mm + '-' + dd;

  switch (applyTo) {
    case 1:
    case "1":
      $(".txtStartDate").val(today);
      break;
    case 2:
    case "2":
      $(".txtEndDate").val(today);
      break;
  }
}

Answer 1

更新了您的 jsfiddle 以解决问题 http://jsfiddle.net/snh6eh9p/4/。

我所做的唯一改变是在 hide 事件上调用 validateDates 而不是 changeDate 事件

$(".txtStartDate").datepicker()
.on("hide", function(ev) {
    validateDates(1);
});

$(".txtEndDate").datepicker()
.on("hide", function(ev) {
    validateDates(2);
});

使用 bootstrap 日期选择器进行日期验证

Date validations with bootstrap datepicker

javascript

asp.net

jquery

bootstrap-datepicker