Home  >  Article  >  Web Front-end  >  JS implements dynamic calculation of two time differences

JS implements dynamic calculation of two time differences

巴扎黑
巴扎黑Original
2016-12-19 17:36:421329browse

@model RightMobileSite.Models.Pulse
@{
    ViewBag.Title = "SetDates";
}
<h2>SetDates</h2>
<div>
    @Html.ActionLink("Pulse", "EditPulse", new { pulseId = Model.PulseId }) &gt;
    @Html.Label("Set Dates", "SetDates") &gt;
    @Html.ActionLink("View Pulse", "ViewPulse",new { pulseId=Model.PulseId }) &gt;
    @Html.ActionLink("Select Audience", "Index") &gt;
    @Html.ActionLink("Send for Approval", "Index")
</div>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.datetimepicker.js")" type="text/javascript"></script>
<script type="text/javascript">
    <!--
    function dateDiff(interval, date1, date2) {
        var objInterval = { &#39;D&#39;: 1000 * 60 * 60 * 24, &#39;H&#39;: 1000 * 60 * 60, &#39;M&#39;: 1000 * 60, &#39;S&#39;: 1000, &#39;T&#39;: 1 };
        interval = interval.toUpperCase();
        var dt1 = new Date(Date.parse(date1.replace(/-/g, &#39;/&#39;)));
        var dt2 = new Date(Date.parse(date2.replace(/-/g, &#39;/&#39;)));
        try {
            return Math.round((dt2.getTime() - dt1.getTime()) / eval(&#39;objInterval.&#39; + interval));
        }
        catch (e) {
            return e.message;
        }
    }
    function calc() {
        var a = $("input#PulseStartDate").val();
        var b = $("input#PulseFinishDate").val();
        return dateDiff(&#39;D&#39;,a,b);
    }
    function setRetval() {
        $("input#Duration").val(calc());
        return (true);
    }
    //-->
    $(function () {
        $("input#PulseStartDate").datetimepicker();
        $("input#PulseFinishDate").datetimepicker();
        $("input#Duration").val(calc());
        $("input#PulseStartDate").change(function () {
            setRetval();
        });
        $("input#PulseFinishDate").blur(function () {
            setRetval();
        });
        $("input#PulseFinishDate").change(function () {
            setRetval();
        });
    });
</script>
@using (Html.BeginForm())
{
    @Html.HiddenFor(model => model.PulseId)
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Pulse</legend>
       
        <div class="editor-label">
            @Html.LabelFor(model => model.PulseStartDate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.PulseStartDate)
            @Html.ValidationMessageFor(model => model.PulseStartDate)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.PulseFinishDate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.PulseFinishDate)
            @Html.ValidationMessageFor(model => model.PulseFinishDate)
        </div>
        <div class="editor-label">
            @Html.Label("Pulse Duration")
        </div>
        <div class="editor-label">
            <input type="text" id="Duration"/>
            @Html.Label("days")
        </div>
        <p>
            <input type="submit" value="SetDates" />
        </p>
    </fieldset>
}

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn