InputDate
InputDate
Range
This sample shows how to use InputDate with SelectionMode.Range
Ranges are defined by the value and rangeEnd properties.
Features
Selected range of days: 6
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace MvcExplorer.Controllers{ public partial class InputDateController : Controller { public ActionResult Range() { return View(); } }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | @{ var today = DateTime.Now.Date;}@section Scripts{ <script> 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) { var result = document.getElementById('result'); var inputDate = wijmo.Control.getControl('#idcInputDate'); result.innerHTML = ''; if (inputDate.rangeEnd) { range = inputDate.rangeEnd.getDate() - inputDate.value.getDate(); result.innerHTML = range + 1; } } </script>}<b style="margin: 10px 5px 10px 0;">@Html.Raw(Resources.InputDate.Range_Text2) <span id="result"></span></b><div style="margin-top:5px;"> @(Html.C1().InputDate().Id("idcInputDate") .SelectionMode(DateSelectionMode.Range) .Value(today) .RangeEnd(today.AddDays(5)) .OnClientRangeEndChanged("rangeEndChanged") )</div><br /><label style="font-weight:normal;">@Html.Raw(Resources.InputDate.Range_Text0)</label>@(Html.C1().InputNumber().Min(0).Step(1).Value(0).Format("n0").OnClientValueChanged("rangeMinChanged"))<label style="font-weight: normal;margin-top: 1em;">@Html.Raw(Resources.InputDate.Range_Text1)</label>@(Html.C1().InputNumber().Min(0).Step(1).Value(0).Format("n0").OnClientValueChanged("rangeMaxChanged"))<hr />@section Description{ <div>@Html.Raw(Resources.InputDate.Range_Text3)</div> <ul> <li>@Html.Raw(Resources.InputDate.Range_Text4)</li> <li>@Html.Raw(Resources.InputDate.Range_Text5)</li> <li>@Html.Raw(Resources.InputDate.Range_Text6)</li> </ul>} |