Heim > Artikel > Web-Frontend > JS implementiert die dynamische Berechnung zweier Zeitunterschiede
@model RightMobileSite.Models.Pulse @{ ViewBag.Title = "SetDates"; } <h2>SetDates</h2> <div> @Html.ActionLink("Pulse", "EditPulse", new { pulseId = Model.PulseId }) > @Html.Label("Set Dates", "SetDates") > @Html.ActionLink("View Pulse", "ViewPulse",new { pulseId=Model.PulseId }) > @Html.ActionLink("Select Audience", "Index") > @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 = { 'D': 1000 * 60 * 60 * 24, 'H': 1000 * 60 * 60, 'M': 1000 * 60, 'S': 1000, 'T': 1 }; interval = interval.toUpperCase(); var dt1 = new Date(Date.parse(date1.replace(/-/g, '/'))); var dt2 = new Date(Date.parse(date2.replace(/-/g, '/'))); try { return Math.round((dt2.getTime() - dt1.getTime()) / eval('objInterval.' + interval)); } catch (e) { return e.message; } } function calc() { var a = $("input#PulseStartDate").val(); var b = $("input#PulseFinishDate").val(); return dateDiff('D',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> }