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 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 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 73 74 | @{ 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> @(Html.C1().Calendar().Id("idcCalendar") .Value(today).Min(minDate).Max(maxDate) .Width(300) )</p><div> <label>Select a date</label> @(Html.C1().InputDate().Id("idcInputDate") .Value(today).Min(minDate).Max(maxDate).HandleWheel(true).OnClientValueChanged("changeDate") )</div><br /><fieldset> <legend style="margin:0;padding:5px;border-bottom-width:0;border-right-width:1px;width:auto">@Html.Raw(Resources.InputDate.WeekBeforeAfterHeader_Text0)</legend> <label style="font-weight:normal;">@Html.Raw(Resources.InputDate.WeekBefore_Text0)</label> @(Html.C1().InputNumber().Min(0).Max(10).Step(1).Value(0).Format("n0").OnClientValueChanged("weekBeforeChanged")) <label style="font-weight: normal;margin-top: 1em;">@Html.Raw(Resources.InputDate.WeekAfter_Text0)</label> @(Html.C1().InputNumber().Min(0).Max(10).Step(1).Value(0).Format("n0").OnClientValueChanged("weekAfterChanged")) <label style="font-weight: normal;margin-top: 1em;">@Html.Raw(Resources.InputDate.MonthCount_Text0)</label> @(Html.C1().InputNumber().Min(1).Max(5).Step(1).Value(1).Format("n0").OnClientValueChanged("monthCountChanged")) <label style="font-weight: normal;margin-top: 1em;">@Html.Raw(Resources.InputDate.HandleWheel_Text0)</label> @(Html.C1().ComboBox().Bind(handleWheelOptions).OnClientSelectedIndexChanged("handleWheelChanged"))</fieldset>@section Description{ @Html.Raw(Resources.InputDate.Index_Text0) <br /> @Html.Raw(Resources.InputDate.HandleWheel_Text1)} |