InputDateTime
InputDateTime
Validation
This sample shows how to implement validation in the InputDateTime control.
Features
Select a date and a time
The following sample checks invalid date and time using InvalidInput event.
Description
This sample shows how to implement validation in the InputDateTime control. The ItemValidator function is used
to determine whether dates are valid for selection and typing.
It also show how to use InvalidInput event to check invalid date time and keep focus for correcting it.
It also show how to use InvalidInput event to check invalid date time and keep focus for correcting it.
1 2 3 4 5 6 7 8 9 10 11 12 | using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class InputDateTimeController : Controller { public ActionResult Validation() { 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 | @{ var today = DateTime.Now.Date; var minDate = new DateTime(today.Year, 1, 1); var maxDate = new DateTime(today.Year, 12, 31); } @section Scripts{ <style> .invalid-tooltip { background-color: red; color: yellow; opacity: 0.9; border-color: lightcoral; } </style> <script> var _invalidTooltip; c1.documentReady(function () { _invalidTooltip = new wijmo.Tooltip(); _invalidTooltip.cssClass = 'invalid-tooltip'; _invalidTooltip.position = 11; window.addEventListener('resize', function () { if (_invalidTooltip.isVisible) { _invalidTooltip.hide(); onInvalidInput(); } }); }) function onInvalidInput(input, e) { e && (e.cancel = true); _invalidTooltip.show("#invalidInput", "@Html.Raw(InputDateTimeRes.Validation_Text4)"); } function onValueChanged(input, e) { _invalidTooltip.hide(); } function itemValidator(date) { var weekday = date.getDay(); return weekday != 0 && weekday != 6; } </script>} <div> <P>@Html.Raw(InputDateTimeRes.Validation_Text0)</P> <c1-input-date-time value="@today" min="@minDate" max="@maxDate" item-validator="itemValidator"> </c1-input-date-time> <p></p> <P>@Html.Raw(InputDateTimeRes.Validation_Text3)</P> <c1-input-date-time id="invalidInput" value="@today" min="@minDate" max="@maxDate" invalid-input="onInvalidInput" value-changed="onValueChanged"> </c1-input-date-time> </div> @section Description{ @Html.Raw(InputDateTimeRes.Validation_Text1) <br /> @Html.Raw(InputDateTimeRes.Validation_Text2) } |