javascript - 提交前检查日期间隔

Question

我有两个DatePickers，它允许用户定义两个日期之间的间隔。我想知道如何检查这些之间的日期间隔是否最多为 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 语句为 true，我希望发送表单。有什么想法吗？

Answer 1

1. 您需要将这些日期解析为 Date目的。例如:new Date(end) 和 new Date(start)。

2. 减去它的值。结果是毫秒级的差异:

   (新日期(结束)- 新日期(开始))

3. 最后，使用以下命令将其转换为日期:(valueInMilliseconds)/1000/60/60/24。例如:

   diffDays = (新日期(结束) - 新日期(开始))/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>

希望这有帮助。