提出する前に日付の間隔を確認する

Question

私は2つの日付間の間隔を定義することができるDatePickersを2つ持っています。私は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文がtrueの場合、フォームを送信することにしたいです。何か案は？

Answer 1

1. これらの日付をDateオブジェクトに解析する必要があります。たとえば、new Date(end)とnew Date(start)です。

2. その値を減算します。最後に

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

3. 、一日に変換します：(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>

は、この情報がお役に立てば幸いです。