InputDateRange
InputDateRange
Overview
The InputDateRange control extends the InputDate control and configures it to allow editing date ranges.
Features
Sample
Settings
Description
This sample shows the basic usage of the InputDateRange control.
You may specify custom date ranges that the user can pick from, or they can use the multi-month calendar in the drop-down to select date ranges with the mouse or keyboard.
Source
IndexController.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcExplorer.Models; namespace MvcExplorer.Controllers { public partial class InputDateRangeController : Controller { public ActionResult Index() { ViewBag.DemoSettings = true; return View(); } } }
Index.cshtml
@{ var today = DateTime.Now.Date; var rangeEnd = today.AddDays(3); } @section Scripts{ <script> // Get predefined date ranges function getPredefinedRanges() { let dt = wijmo.DateTime, now = new Date(); return { // Custom 'Custom Range': null, // Days //'Today': [now, now], //'Yesterday': [dt.addDays(now, -1), dt.addDays(now, -1)], //'Tomorrow': [dt.addDays(now, +1), dt.addDays(now, +1)], // Weeks 'This Week': [dt.weekFirst(now), dt.weekLast(now)], 'Last Week': [dt.weekFirst(dt.addDays(now, -7)), dt.weekLast(dt.addDays(now, -7))], 'Next Week': [dt.weekFirst(dt.addDays(now, +7)), dt.weekLast(dt.addDays(now, +7))], // Months 'This Month': [dt.monthFirst(now), dt.monthLast(now)], 'Last Month': [dt.monthFirst(dt.addMonths(now, -1)), dt.monthLast(dt.addMonths(now, -1))], 'Next Month': [dt.monthFirst(dt.addMonths(now, +1)), dt.monthLast(dt.addMonths(now, +1))], // Years 'This Year': [dt.yearFirst(now), dt.yearLast(now)], 'Last Year': [dt.addYears(dt.yearFirst(now), -1), dt.addYears(dt.yearLast(now), -1)], 'Next Year': [dt.addYears(dt.yearFirst(now), +1), dt.addYears(dt.yearLast(now), +1)], }; } function dateRangeChanged(s) { // Show date ranges let el = document.querySelector('#showRange'); el.innerHTML = wijmo.format('@Html.Raw(Resources.InputDateRange.Index_ShowRange)', s); } function monthCountChanged(sender) { let inputDateRange = wijmo.Control.getControl("#demoControl"); inputDateRange.monthCount = sender.value; } function weeksBeforeChanged(sender) { let inputDateRange = wijmo.Control.getControl("#demoControl"); inputDateRange.weeksBefore = sender.value; } function weeksAfterChanged(sender) { let inputDateRange = wijmo.Control.getControl("#demoControl"); inputDateRange.weeksAfter = sender.value; } function closeOnSelectionChanged(sender) { let inputDateRange = wijmo.Control.getControl("#demoControl"); inputDateRange.closeOnSelection = sender.checked; } </script> } <style> .settings > div { margin-bottom: 0.5em; } .settings label { width: 10em; text-align: right; margin-right: 0.5em; float: left; font-weight: normal; line-height: 2em; } .settings input { height: 1.8em; } .settings .wj-inputnumber { width: 10em; } .wj-inputdate-dropdown > .wj-listbox { max-height: initial; } </style> <p> <div id="demoControl"></div> </p> <p> <span id="showRange"></span> </p> @(Html.C1().InputDateRange().Id("demoControl") .AlwaysShowCalendar(true) .CloseOnSelection(true) .MonthCount(2) .WeeksBefore(0) .WeeksAfter(0) .PredefinedRanges("getPredefinedRanges") .OnClientValueChanged("dateRangeChanged") .OnClientRangeEndChanged("dateRangeChanged") .Value(today) .RangeEnd(rangeEnd) ) @section Settings{ <div class="settings"> <div> <label for="monthCount">Month Count</label> @(Html.C1().InputNumber().Id("monthCount").Min(1).Step(1).Value(2).OnClientValueChanged("monthCountChanged").Width(150)) </div> <div> <label for="weeksBefore">Weeks Before</label> @(Html.C1().InputNumber().Id("weeksBefore").Min(0).Step(1).Value(0).OnClientValueChanged("weeksBeforeChanged").Width(150)) </div> <div> <label for="weeksAfter">Weeks After</label> @(Html.C1().InputNumber().Id("weeksAfter").Min(0).Step(1).Value(0).OnClientValueChanged("weeksAfterChanged").Width(150)) </div> <div> <label for="closeOnSelection">Close On Selection</label> <input type="checkbox" id="closeOnSelection" onchange="closeOnSelectionChanged(this)" checked /> </div> </div> } @section Summary{ <p>@Html.Raw(Resources.InputDateRange.Index_Text0)</p> } @section Description{ <p>@Html.Raw(Resources.InputDateRange.Index_Text1)</p> <p>@Html.Raw(Resources.InputDateRange.Index_Text2)</p> }
Documentation