日付入力：検証

InputDateコントロールは、minプロパティとmaxプロパティで決定される範囲外の値をユーザーが選択できないようにします。

ただし、範囲内のすべての日付が有効ではないこともよくあります。このような状況を処理するために、コントロールにはitemValidatorプロパティが用意されています。このプロパティは、パラメータとして日付を受け取り、その日付が選択対象として有効な場合はtrue、そうでない場合はfalseを返す関数を表します。

次の例のInputDateは、週末と休日の日付を選択できないようにしています。

HTML

<input id="theInputDate">

CSS

.wj-calendar {
    max-width: 21em;
}

.wj-calendar .wj-header {
    color: white;
    background: #808080;
}

.wj-calendar .date-holiday:not(.wj-state-selected) {
    font-weight: bold;
    color: #008f22;
    background: #f0fff0;
    outline: 2pt solid #008f22;
}

.wj-calendar .date-weekend:not(.wj-state-selected) {
    background-color: #d8ffa6;
}

JavaScript

import * as wijmo from '@mescius/wijmo';
import * as input from '@mescius/wijmo.input';
import { getHoliday } from './data';

function init() {
    // InputDate
    let theInputDate = new input.InputDate('#theInputDate', {
        itemValidator: (date) => (date.getDay() % 6 != 0) && !getHoliday(date)
    });

    // InputDateのカレンダーの項目を書式設定します（週末や祝日にスタイルを適用）
    theInputDate.calendar.formatItem.addHandler((sender, e) => {
        let weekday = e.data.getDay(), holiday = getHoliday(e.data);

        wijmo.toggleClass(e.item, 'date-weekend', weekday == 0 || weekday == 6);
        wijmo.toggleClass(e.item, 'date-holiday', holiday != null);
        e.item.title = holiday;
    });
}