달력(Calendar) 개요
Calendar 컨트롤은 1개월 달력을 표시하여 사용자가 날짜를 선택할 수 있게 합니다. value 속성을 사용하여 현재 선택된 날짜를 가져오거나 설정합니다.
기본적으로 사용자는 Calendar 컨트롤에서 날짜를 선택할 수 있습니다. 이 기본 동작은 selectionMode 속성을 사용하여 변경할 수 있는데, 이는 사용자가 일, 월 또는 값을 선택할 수 있는지의 여부를 결정합니다. min 및 max 속성을 통해 사용자가 선택할 수 있는 날짜 범위를 제한합니다.
HTML
<input id="theCalendar" />Javascript
import * as wijmo from '@mescius/wijmo';
import * as input from '@mescius/wijmo.input';
function init() {
// the calendar
let theCalendar = new input.Calendar('#theCalendar', {
valueChanged: () => showCurrentDate()
});
}Calendar 컨트롤에서 키보드 탐색을 쉽게 하기 위해 Tab 및 Shift+Tab 키의 동작을 수정하려면 keyActionTab을 사용할 수 있습니다.
import * as input from '@mescius/wijmo.input';
new input.Calendar('#theCalendar', {
keyActionTab: input.CalendarTabKeyAction.All // all functional elements can receive focus
});
키보드를 통해 날짜를 미리 선택하려면 focusMode를 활성화할 수 있으며, 이 모드는 Calendar의 값을 변경하지 않고 날짜를 미리 선택할 수 있게 해줍니다. 이 모드에서는 날짜에 호버 효과가 적용됩니다.
import * as input from '@mescius/wijmo.input';
new input.Calendar('#theCalendar', {
focusMode: true // enable focus mode
});