使用bootstrap datepicker进行日期验证

时间:2016-01-11 05:51:54

标签: javascript jquery asp.net bootstrap-datepicker

使用bootstrap-datepicker。 StartDate和amp;有两个文本框。结束日期。当用户在这两个文本框中的任何一个中更改日期时,我试图设置验证。 在页面加载时,两个框都有当前日期。

测试案例:
用户设置时..
1. startDate超出当前日期,设置startDate = endDate
2. startDate超出endDate,设置endDate = startDate
3. endDate超出当前日期,设置endDate =当前日期
4.在startDate下面的endDate,设置startDate = endDate

案例1失败。今天是2016年1月11日,我将startDate设置为2016年1月12日,它不会改为2011年1月11日,但仍保持2016年1月12日。

此外,案例3失败。

我的逻辑有问题。

这是小提琴 - 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;
  }
}

1 个答案:

答案 0 :(得分: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);
});