InputDate
InputDate
Ranges
Features
Sample
RangeEnd:
Selected range of days:
Selected range of days:
Description
This sample shows how to use InputDate with SelectionMode.Range
- Ranges are defined by the Value and RangeEnd properties.
- To select a date range with the mouse, the user should click the starting date Value and then the ending date RangeEnd.
- To select a date range with the keyboard, the user should use the cursor keys to select the starting date, then press the shift key and extend the selection to select the ending date.
Source
RangesController.cs
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class InputDateController : Controller { public ActionResult Ranges() { return View(); } } }
Ranges.cshtml
@{ var today = DateTime.Now.Date; var rangeEnd = DateTime.Now.Date.AddDays(3); } @section Scripts{ <script> document.readyState === 'complete' ? onLoaded() : window.onload = onLoaded; function showRangeEnd(calendar) { let rangEndSpan = document.querySelector('#rangeEnd'); rangEndSpan.textContent = wijmo.format('{rangeEnd:d}', calendar); } function showRange(inputDate) { var result = document.getElementById('result'); range = inputDate.rangeEnd.getDate() - inputDate.value.getDate() + 1; result.innerHTML = range; } function onLoaded() { let inputDate = wijmo.Control.getControl('#idcInputDate'); showRangeEnd(inputDate); if (inputDate.rangeEnd) { showRange(inputDate); } } function rangeMinChanged(sender, args) { var inputDate = wijmo.Control.getControl('#idcInputDate'); inputDate.rangeMin = sender.value; } function rangeMaxChanged(sender, args) { var inputDate = wijmo.Control.getControl('#idcInputDate'); inputDate.rangeMax = sender.value; } var rangeEndChanged = function (sender, args) { showRangeEnd(sender); } var rangeChanged = function (sender, args) { showRange(sender); } </script> } <b style="margin: 10px 5px 10px 0;">RangeEnd: <span id="rangeEnd"></span></b> <br /> <b style="margin: 10px 5px 10px 0;">@Html.Raw(InputDateRes.Range_Text2) <span id="result"></span></b> <div style="margin-top:5px;"> <c1-input-date id="idcInputDate" selection-mode="Range" value="@today" range-end="@rangeEnd" width="300px" range-end-changed="rangeEndChanged" range-changed="rangeChanged"> </c1-input-date> </div> <br /> <label style="font-weight:normal;">@Html.Raw(InputDateRes.Range_Text0)</label> <c1-input-number min="0" step="1" value="0" format="n0" value-changed="rangeMinChanged" /> <label style="font-weight: normal;margin-top: 1em;">@Html.Raw(InputDateRes.Range_Text1)</label> <c1-input-number min="0" step="1" value="0" format="n0" value-changed="rangeMaxChanged" /> <hr /> @section Description{ <div>@Html.Raw(InputDateRes.Range_Text3)</div> <ul> <li>@Html.Raw(InputDateRes.Range_Text4)</li> <li>@Html.Raw(InputDateRes.Range_Text5)</li> <li>@Html.Raw(InputDateRes.Range_Text6)</li> </ul> }
Documentation