InputDate 유효성 검사
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() {
// the InputDate
let theInputDate = new input.InputDate('#theInputDate', {
itemValidator: (date) => (date.getDay() % 6 != 0) && !getHoliday(date)
});
// format items in the InputDate's calendar (apply styles to weekends and holidays):
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;
});
}