InputDateTime
検証
機能
サンプル
日付と時刻を選択
このサンプルは、InvalidInput イベントを使用して無効な日付時刻を確認します。
説明
このサンプルでは、InputDateTime コントロールに検証を実装する方法を示します。ItemValidator 関数を使用して、
選択および入力の日付が有効かどうかを判断します。
InvalidInput イベントを使用して無効な日付を確認し、エラーを修正できるように、 コントロールはフォーカスを保持します。
InvalidInput イベントを使用して無効な日付を確認し、エラーを修正できるように、 コントロールはフォーカスを保持します。
ソース
ValidationController.cs
using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class InputDateTimeController : Controller { public ActionResult Validation() { return View(); } } }
Validation.cshtml
@{ 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) }
マニュアル