Web Components 날짜 시간 입력 개요
Ignite UI for Web Components 사용자가 선택한 입력 요소에서 날짜와 시간을 설정하고 편집할 수 있습니다. 사용자는 편집 가능한 마스크 입력을 사용하여 날짜와 시간 부분을 모두 편집할 수 있습니다. 또한 검증을 활용하기 위해 원하는 디스플레이 및 입력 형식은 물론 최소값과 최대값을 지정할 수 있습니다.
Usage
먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.
npm install igniteui-webcomponents
그런 다음 IgcDateTimeInputComponent와 필요한 CSS를 가져오고 다음과 같이 해당 모듈을 등록해야 합니다.
import { defineComponents, IgcDateTimeInput } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcDateTimeInput);
Ignite UI for Web Components 에 대한 전체 소개는 시작 항목을 참조하세요.
Value binding
IgcDateTimeInputComponent 구성요소의 값을 설정하는 가장 쉬운 방법은 Date 객체를 value 속성에 전달하는 것입니다.
const input = document.querySelector('igc-date-time-input') as IgcDateTimeInputComponent;
const date = new Date();
input.value = date;
IgcDateTimeInputComponent는 ISO 8601 문자열도 허용합니다.
문자열은 YYYY-MM-DDTHH:mm:ss.sssZ 형식의 전체 ISO 문자열이거나 날짜 전용 부분과 시간 전용 부분으로 구분될 수 있습니다.
날짜만
날짜 전용 문자열이 구성 요소의 value 속성에 바인딩된 경우 YYYY-MM-DD 형식이어야 합니다. inputFormat은 입력에 값을 입력할 때 계속 사용되며 동일한 형식일 필요는 없습니다. 또한 날짜 전용 문자열을 바인딩할 때 지시문은 시간을 T00:00:00으로 강제하여 시간 이동을 방지합니다.
시간 한정
시간 전용 문자열은 일반적으로 ECMA 사양에 정의되어 있지 않지만 시간 전용 솔루션이 필요한 시나리오에 지시문을 통합할 수 있도록 24시간 형식(HH:mm:ss을 지원합니다. 12시간 형식은 지원되지 않습니다.
전체 ISO 문자열
전체 ISO 문자열이 바인딩된 경우 지시문은 Date.parse에 필요한 모든 요소가 제공되는 경우에만 이를 구문 분석합니다.
InvalidDate 포함한 모든 거짓 값은 null로 구문 분석됩니다. 불완전한 날짜 전용, 시간 전용 또는 전체 ISO 문자열은 InvalidDate로 구문 분석됩니다.
Keyboard Navigation
IgcDateTimeInputComponent 에는 마우스를 터치하지 않고도 다양한 DateParts 쉽게 증가, 감소 또는 이동할 수 있는 직관적인 키보드 탐색 기능이 있습니다.
| 열쇠 | 설명 |
|---|---|
| ← | 한 문자를 처음으로 이동 |
| → | 한 문자를 끝으로 이동 |
| 집 | 처음으로 이동 |
| 끝 | 끝으로 이동 |
| Ctrl / 명령 + ← | 날짜/시간 부분의 처음으로 이동 - 현재 부분 또는 왼쪽 부분 |
| Ctrl / 명령 + → | 날짜/시간 섹션의 끝으로 이동 - 현재 또는 오른쪽 섹션 |
| 날짜/시간 부분에 집중 + ↓ | 날짜/시간 부분을 감소시킵니다. |
| 날짜/시간 부분에 집중 + ↑ | 날짜/시간 부분을 증가시킵니다. |
| Ctrl / 명령 +; | 현재 날짜/시간을 편집기의 값으로 설정합니다. |
Setting formats
IgcDateTimeInputComponent는 다양한 표시 및 입력 형식을 지원합니다.
그것은 사용한다 국제 날짜시간 형식 이를 통해 다음과 같은 미리 정의된 형식 옵션을 지원할 수 있습니다. long 그리고 short, medium 그리고 full. 또한 다음과 같은 지원되는 문자로 구성된 사용자 정의 문자열을 허용할 수도 있습니다. dd-MM-yy. 또한 그렇지 않다면 displayFormat 제공되면 구성 요소는 inputFormat 그 자체로.
Input Format
아래 표는 구성 요소의 inputFormat에서 지원되는 형식을 보여줍니다.
| 체재 | 설명 |
|---|---|
d |
날짜는 편집하는 동안 앞에 0이 붙도록 강제됩니다. |
dd |
앞에 0이 명시적으로 설정된 날짜입니다. |
M |
월은 편집하는 동안 앞에 0이 붙도록 강제됩니다. |
MM |
앞에 0이 명시적으로 설정된 달입니다. |
yy |
짧은 연도 형식. |
yyyy |
전체 연도 형식입니다. |
h |
12시간 형식의 시간은 편집하는 동안 앞에 0이 표시됩니다. |
hh |
앞에 0이 명시적으로 설정된 12시간 형식의 시간입니다. |
H |
24시간 형식의 시간은 편집하는 동안 앞에 0이 표시됩니다. |
HH |
24시간 형식의 시간이며 앞에 0이 명시적으로 설정되어 있습니다. |
m |
분은 편집하는 동안 앞에 0이 붙도록 강제됩니다. |
mm |
앞에 0이 명시적으로 설정된 분입니다. |
tt |
12시간 형식의 AM/PM 섹션입니다. |
특정 입력 형식을 설정하려면 IgcDateTimeInputComponent에 문자열로 전달하세요. 그러면 예상되는 사용자 입력 형식과 mask 모두 설정됩니다. 또한 inputFormat은 로케일 기반이므로 아무것도 제공되지 않으면 편집기는 기본적으로 dd/MM/yyyy로 설정됩니다.
<igc-date-time-input input-format="dd-MM-yy" display-format="medium"/>
모든 것이 순조롭게 진행되면 브라우저에 다음이 표시됩니다.
Display format
날짜 시간 입력은 날짜/시간을 다양한 방식으로 표시하기 위해 미리 정의된 형식을 노출합니다. 아래의 모든 예는 en-US 로케일로 제공됩니다.
| 옵션 | 예 |
|---|---|
short |
22/7/17, 오전 12:00 |
medium |
2022년 7월 17일, 오전 12:00:00 |
long |
2022년 7월 17일 오전 12:00:00(GMT+3) |
full |
2022년 7월 17일 일요일 오전 12:00:00 동부 유럽 서머타임 |
shortDate |
7/17/22 |
mediumDate |
2022년 7월 17일 |
longDate |
2022년 7월 17일 |
fullDate |
2022년 7월 17일 일요일 |
shortTime |
12:00 AM |
mediumTime |
12:00:00 AM |
longTime |
오전 12:00:00(그리니치 표준시+3) |
fullTime |
오전 12:00:00 동부 유럽 서머타임 |
또한 사용자는 다음 표에 설명된 지원 기호를 사용하여 displayFormat 문자열을 구성할 수 있습니다.
| 유형 | 체재 | 설명 | 예 |
|---|---|---|---|
| 낮 | d |
최소 자릿수. | 7, 17 |
dd |
제로 패딩. | 07, 17 | |
| 월 | M |
최소 자릿수. | 3, 10 |
MM |
제로 패딩. | 03, 10 | |
MMM |
약칭 | 10월 | |
MMMM |
넓은 | 십월 | |
MMMMM |
좁은 | 영형 | |
| 년도 | y |
숫자 | 2022 |
yy |
두 자리 | 22 | |
yyy |
숫자 | 2022 | |
yyyy |
숫자 | 2022 | |
| 1~12시간 | h |
최소 자릿수 | 1, 12 |
hh |
제로 패딩 | 01, 12 | |
| 시간 1~24 | H |
최소 자릿수 | 1, 23 |
HH |
제로 패딩 | 01, 23 | |
| 분 | m |
최소 자릿수 | 1, 59 |
mm |
제로 패딩 | 01, 59 | |
| 두번째 | s |
최소 자릿수 | 1, 59 |
ss |
제로 패딩 | 01, 59 | |
| 기간 | t |
약칭 | 오전 오후 |
tt |
약칭 | 오전 오후 | |
ttt |
짧은 | 정오 | |
tttt |
긴 | 정오 | |
ttttt |
좁은 | N |
[!Note] Many locales use the same time period string, irrespective of the format specified. Also, it has an effect only if a 12-hour clock is used.
Min/max value
minValue 및 maxValue 속성을 지정하여 입력을 제한하고 구성 요소의 유효성을 제어할 수 있습니다. value 속성과 마찬가지로 string 유형일 수 있습니다.
const input = document.querySelector('igc-date-time-input') as IgcDateTimeInputComponent;
input.minValue = new Date(2021, 0, 1);
<igc-date-time-input max-value="2022-01-01T21:00:00.000Z"></igc-date-time-input>
모든 것이 순조롭게 진행된 경우 값이 지정된 날짜보다 크거나 작으면 구성 요소가 invalid 됩니다. 아래 예를 확인하세요.
Step up/down
IgcDateTimeInputComponent는 공용 stepUp 및 stepDown 메소드를 노출합니다. 현재 설정된 날짜 및 시간의 특정 DatePart 늘리거나 줄이며 몇 가지 방법으로 사용할 수 있습니다.
첫 번째 시나리오에서는 특정 DatePart가 메서드에 전달되지 않으면 지정된 inputFormat 및 내부 구성 요소 구현에 따라 기본 DatePart가 증가하거나 감소합니다. 두 번째 시나리오에서는 다양한 요구 사항에 맞게 조작할 DatePart를 명시적으로 지정할 수 있습니다. 또한 두 방법 모두 stepUp/stepDown 단계를 설정하는 데 사용할 수 있는 숫자 유형의 선택적 delta 매개변수를 허용합니다.
또한 spinDelta 각 날짜 시간 세그먼트에 서로 다른 델타를 적용하는 데 사용할 수 있는 속성입니다. 키보드, 마우스 휠 또는 stepUp 및 stepDown 메소드를 사용하여 회전할 때 적용됩니다. 단, delta 매개변수가 spinDelta 보다 우선하므로 제공된 매개변수가 없는 한 적용됩니다.
const input = document.getElementById('dateTimeInput') as IgcDateTimeInputComponent;
const spinDelta: DatePartDeltas = {
date: 2,
month: 3,
year: 10,
};
input.spinDelta = spinDelta;
아래 예에서 시도해 보세요.
Styling
IgcDateTimeInputComponent 구성 요소는 IgcInputComponent 구성 요소에서 파생되므로 사용 가능한 모든 CSS 부분을 노출합니다. 참조는 입력 스타일을 참조하세요.