InputDate
検証
機能
サンプル
この InputDate コントロールを使用して日付を選択します。 週末は選択も入力もできないことがわかります。
このサンプルは、InvalidInput イベントを使用して無効な日付を確認します。
説明
このサンプルでは、ItemValidator 関数を使用して、日付が選択の対象になるかどうかを決定する方法を示します。
InvalidInput イベントを使用して無効な日付を確認し、エラーを修正できるように、 コントロールはフォーカスを保持します。
InvalidInput イベントを使用して無効な日付を確認し、エラーを修正できるように、 コントロールはフォーカスを保持します。
ソース
ValidationController.cs
using System.Web.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(Resources.InputDate.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(Resources.InputDate.Validation_Text0)</P>
@(Html.C1().InputDate().Value(today).Min(minDate).Max(maxDate).ItemValidator("itemValidator"))
<p></p>
<p>@Html.Raw(Resources.InputDate.Validation_Text3)</p>
@(Html.C1().InputDate().Id("invalidInput")
.Value(today).Min(minDate).Max(maxDate)
.OnClientInvalidInput("onInvalidInput")
.OnClientValueChanged("onValueChanged")
)
</div>
@section Description{
@Html.Raw(Resources.InputDate.Validation_Text1)
<br />
@Html.Raw(Resources.InputDate.Validation_Text2)
}
マニュアル