提交前检查日期间隔

Question

我有两个DatePickers，它允许用户定义两个日期之间的间隔。我想知道如何检查这两者之间的date-interval是否最多为30天。如果不是，则会弹出一个提示此问题的警报，并且不会发送该请求。

我有一台div

<div id="excelExportDiv" class="glyphicon glyphicon-list-alt date_glyphicon top-4" data-url="@Url.Action("CreateExcelFile","Customer", new {id = Model.Konstants.First().STATION, xx="4", start = "", end = "", includeInactiveInExport = "" })"></div> 

更新发送的参数的关联javascript。

$(function excelFunction() {
  $('#excelExportDiv').click(function() {
    var start = $('#startDateTextBox').val();
    var end = $('#endDateTextBox').val();
    var checkedValue = "off";
    var inputElements = document.getElementsByClassName('messageCheckbox');
    for (var i = 0; inputElements[i]; ++i) {
      if (inputElements[i].checked) {
        checkedValue = "on";
        break;
      }
    }
    var url = $(this).data("url") + "&start=" + start + "&end=" + end + "&includeInactiveInExport=" + checkedValue;
    window.location.href = url;
  });
});

检查date-interval的逻辑已经写好了，所以基本上我有一个if语句，如下所示：

if (diffDays > 30) {
  alert("Maximum range is 30 days!");
  return false;
} else {
  //submit the action...
}

如果if语句为真，我希望发送表单。有什么想法吗？

Answer 1

1. 你需要将这些日期解析成Date对象。例如：new Date(end)和new Date(start).
2. Subtract它的值。结果是以毫秒为单位的差异：

(new Date(end) - new Date(start))

• Finally，使用：(valueInMilliseconds)/1000/60/60/24将其转换为日期。例如：

diffDays = (new Date(end) - new Date(start)) / 1000 / 60 / 60 / 24;

如下所示：

​

$(function() {
  $("#startDateTextBox, #endDateTextBox").datepicker();

  $("#excelExportDiv").on("click", function() {
    var start = $("#startDateTextBox").val(),
      end = $("#endDateTextBox").val(),
      diffDays;

    diffDays = (new Date(end) - new Date(start)) / 1000 / 60 / 60 / 24;

    console.log(diffDays);

    if (diffDays > 30) {
      alert("Maximum range is 30 days!");
      return false;
    } else {
      //submit the action...
    }
  });
});

div {
  margin: 2px;
}

label {
  display: block;
}

#excelExportDiv {
  background-color: #ccc;
  border: solid 1px #7e8da2;
  border-radius: 5px;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  padding: 10px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
  <label>Start date</label>
  <input type="text" id="startDateTextBox">
</div>
<div>
  <label>End date</label>
  <input type="text" id="endDateTextBox">
</div>


<div id="excelExportDiv" class="glyphicon glyphicon-list-alt date_glyphicon top-4">Export</div>

​

希望这能有所帮助。