InputDate
検証
機能
サンプル
この InputDate コントロールを使用して日付を選択します。 週末は選択または入力できないことに注意してください。
このサンプルは、InvalidInput イベントを使用して無効な日付を確認します。
説明
このサンプルでは、item-validator 属性に、日付が選択の対象になるかどうかを決定する関数を設定する方法を示します。
InvalidInput イベントを使用して無効な日付を確認し、エラーを修正できるように、 コントロールはフォーカスを保持します。
InvalidInput イベントを使用して無効な日付を確認し、エラーを修正できるように、 コントロールはフォーカスを保持します。
ソース
ValidationController.cs
using Microsoft.AspNetCore.Mvc;
namespace MvcExplorer.Controllers
{
public partial class InputDateController : 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(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)
}
マニュアル