InputDate 개요
InputDate 컨트롤을 사용하면 사용자가 날짜를 입력하고 편집할 수 있습니다. 날짜는 Globalize 클래스에서 지원하는 모든 형식으로 입력할 수 있습니다. 일반 입력 요소에 비해 다음과 같은 장점이 있습니다:
사용자는 숫자가 아닌 값을 입력할 수 없습니다.
format 속성을 사용하여 앱에 맞게 날짜 값을 포맷하고 구문 분석할 수 있습니다. 양식 문자열은 여기에 설명된 .NET-스타일의 날짜 양식 문자열로 표현됩니다.
min 및 max 속성을 사용하여 유효한 값의 범위를 지정할 수 있습니다(사용자는 이 범위를 벗어나는 값을 입력할 수 없습니다).
step 속성을 사용하여 사용자가 컨트롤의 증가/감소 버튼을 클릭할 때 값에 추가되는 증가를 지정할 수 있습니다.
아래 예시에서, InputDate는 이번 주 날짜만 허용합니다:
HTML
<label for="theInputDate">The Date</label>
<div id="theInputDate"></div>Javascript
import * as wijmo from '@mescius/wijmo';
import * as input from '@mescius/wijmo.input';
function init() {
// a regular input date
let theDate = new input.InputDate('#theInputDate', {
format: 'MMM dd, yyyy',
min: firstDay,
max: lastDay,
});
}기본적으로 위쪽(Up) 및 아래쪽(Down) 키는 현재 날짜를 하루씩 증가 또는 감소시키며 직접 수정합니다.
해당 키에 대한 KeyAction 설정을 구성하면, 위쪽 및 아래쪽 키를 눌렀을 때 Calendar가 열리도록 설정할 수 있으며, 이를 통해 자유롭게 날짜를 선택할 수 있습니다.
import * as input from '@mescius/wijmo.input';
new input.InputDate('#theDate', {
keyActionDownArrow: input.KeyAction.OpenDropdown,
keyActionUpArrow: input.KeyAction.OpenDropdown
});showConfirmationButtons를 활성화하면 키보드를 통해 날짜를 미리 선택할 수 있습니다.
import * as input from '@mescius/wijmo.input';
new input.InputDate('#theDate', {
showConfirmationButtons: true
});