提交前检查日期间隔答案

【问题标题】：Check date interval before submitting提交前检查日期间隔
【发布时间】：2017-11-27 15:38:54
【问题描述】：

我有两个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 声明为真，我希望发送表单。有什么想法吗？

【问题讨论】：

如果你从你正在使用的 datepicker 插件的 api 中获取每个日期对象会更简单。从那里很容易研究如何获得两个日期之间的差异

标签： javascript javascript html asp.net-mvc

【解决方案1】：

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

(new Date(end) - new Date(start))
最后，将其转换为一天：(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>

希望这会有所帮助。

【讨论】：