InputDate
InputDate
Validation
This sample shows how to set item-validator attribute to a function to determine whether dates
are valid for selection and typing.
Features
Use this InputDate control to select a date. Notice you won't be able to select or type weekends.
The following sample checks invalid date using InvalidInput event.
Description
This sample shows how to set item-validator attribute to a function to determine whether dates
are valid for selection and typing.
It also show how to use InvalidInput event to check invalid date and keep focus for correcting it.
It also show how to use InvalidInput event to check invalid date 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 InputDateController : 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(InputDateRes.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(InputDateRes.Validation_Text0)</P> <c1-input-date value="@today" min="@minDate" max="@maxDate" item-validator="itemValidator"> </c1-input-date> <p></p> <P>@Html.Raw(InputDateRes.Validation_Text3)</P> <c1-input-date id="invalidInput" value="@today" min="@minDate" max="@maxDate" invalid-input="onInvalidInput" value-changed="onValueChanged"> </c1-input-date> </div> @section Description{ @Html.Raw(InputDateRes.Validation_Text1) <br /> @Html.Raw(InputDateRes.Validation_Text2) } |