InputTime
InputTime
Overview
This sample shows the basic usage of the InputTime control.
Features
Description
This sample shows the basic usage of the InputTime control.
1 2 3 4 5 6 7 8 9 10 11 12 | using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class InputTimeController : 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 | @{ var minTime = DateTime.Parse("07:00"); var maxTime = DateTime.Parse("19:00"); } @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(InputTimeRes.Index_Text3)"); } function onValueChanged(input, e) { _invalidTooltip.hide(); } </script>} <div> <label>@Html.Raw(InputTimeRes.Index_Text0)</label> <c1-input-time id="iditInputTime" value="@DateTime.Now" min="@minTime" max="@maxTime"></c1-input-time> <label>@Html.Raw(InputTimeRes.Index_Text2)</label> <c1-input-time id="invalidInput" value="@DateTime.Now" min="@minTime" max="@maxTime" invalid-input="onInvalidInput" value-changed="onValueChanged"></c1-input-time> </div> @section Description{ @Html.Raw(InputTimeRes.Index_Text1) } |