InputDate
InputDate
Overview
This sample shows the basic usage of the InputDate control.
Features
April 2025
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
| 30 | 31 | 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 | 1 | 2 | 3 |
| 2025 | |||
| Jan | Feb | Mar | Apr |
| May | Jun | Jul | Aug |
| Sep | Oct | Nov | Dec |
Description
This sample shows the basic usage of the InputDate control.
HandleWheel: Determines whether the user can edit the current value using the mouse wheel.
HandleWheel: Determines whether the user can edit the current value using the mouse wheel.
1 2 3 4 5 6 7 8 9 10 11 12 | using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class InputDateController : Controller { public ActionResult Index() { 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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | @{ var today = DateTime.Now.Date; var minDate = new DateTime(today.Year, 1, 1); var maxDate = new DateTime(today.Year, 12, 31); var handleWheelOptions = new List<string> { "True", "False" }; } @section Scripts{ <script> function changeDate(sender, e) { wijmo.Control.getControl("#idcCalendar").value = sender.value; } function weekBeforeChanged(sender, args) { var inputDate = wijmo.Control.getControl('#idcInputDate'); inputDate.weeksBefore = sender.value; } function weekAfterChanged(sender, args) { var inputDate = wijmo.Control.getControl('#idcInputDate'); inputDate.weeksAfter = sender.value; } function monthCountChanged(sender, args) { var inputDate = wijmo.Control.getControl('#idcInputDate'); inputDate.monthCount = sender.value; } function handleWheelChanged(sender, args) { var inputDate = wijmo.Control.getControl('#idcInputDate'); if (sender.selectedValue === "True") { inputDate.handleWheel = true; } else { inputDate.handleWheel = false; } } </script>} <p><c1-calendar id="idcCalendar" value="@today" min="@minDate" max="@maxDate" width="300px"> </c1-calendar></p> <div> <label>@Html.Raw(InputDateRes.Index_Text1)</label> <c1-input-date id="idcInputDate" value="@today" min="@minDate" max="@maxDate" value-changed="changeDate"> </c1-input-date> </div> <br /> <fieldset> <legend style="margin:0;padding:5px;border-bottom-width:0;border-right-width:1px;width:auto">@Html.Raw(InputDateRes.WeekBeforeAfterHeader_Text0)</legend> <label style="font-weight:normal;">@Html.Raw(InputDateRes.WeekBefore_Text0)</label> <c1-input-number min="0" max="10" Step="1" value="0" format="n0" value-changed="weekBeforeChanged" /> <label style="font-weight: normal;margin-top: 1em;">@Html.Raw(InputDateRes.WeekAfter_Text0)</label> <c1-input-number min="0" max="10" Step="1" value="0" format="n0" value-changed="weekAfterChanged" /> <label style="font-weight: normal;margin-top: 1em;">@Html.Raw(InputDateRes.MonthCount_Text0)</label> <c1-input-number min="1" max="5" step="1" value="1" format="n0" value-changed="monthCountChanged" /> <label style="font-weight: normal;margin-top: 1em;">@Html.Raw(InputDateRes.HandleWheel_Text0)</label> <c1-combo-box selected-index-changed="handleWheelChanged"> <c1-items-source source-collection="@handleWheelOptions"></c1-items-source> </c1-combo-box> </fieldset> @section Description{ @Html.Raw(InputDateRes.Index_Text0) <br /> @Html.Raw(InputDateRes.HandleWheel_Text1) } |