Web Components 날짜/시간 입력 개요
Ignite UI for Web Components 날짜 시간 입력을 사용하면 선택한 입력 요소에서 날짜와 시간을 설정하고 편집할 수 있습니다. 사용자는 편집 가능한 마스킹된 입력을 사용하여 날짜 및 시간 부분을 모두 편집할 수 있습니다. 또한 원하는 표시 및 입력 형식은 물론 최소값 및 최대값을 지정하여 유효성 검사를 활용할 수 있습니다.
Usage
먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.
npm install igniteui-webcomponents
그 다음에는 필요한 CSS를 가져오IgcDateTimeInputComponent 고, 그 모듈을 등록해야 합니다. 다음과 같습니다:
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 문자열도 허용합니다.
문자열은 전체ISO 문자열일 수도 있고, 형식YYYY-MM-DDTHH:mm:ss.sssZ 상 날짜 전용 부분과 시간만 있는 부분으로 분리될 수도 있습니다.
날짜만
만약 날짜만 있는 문자열이 컴포넌트의 속성에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 / CMD + ← | 날짜/시간 부분의 처음으로 이동 - 현재 부분 또는 왼쪽 부분 |
| CTRL / CMD + → | 날짜/시간 섹션의 끝으로 이동 - 현재 또는 오른쪽 섹션 |
| 날짜/시간 부분에 집중 + ↓ | 날짜/시간 부분을 감소시킵니다. |
| 날짜/시간 부분에 집중 + ↑ | 날짜/시간 부분을 증가시킵니다. |
| CTRL / CMD +; | 현재 날짜/시간을 편집기의 값으로 설정합니다. |
Setting formats
IgcDateTimeInputComponent다양한 디스플레이 및 입력 포맷을 지원합니다.
Intl.DateTimeFormat을 사용하여 andlong,short andmedium와 같은full 사전 정의된 형식 옵션을 지원합니다. 또한, 지원되는 문자들로 구성된 맞춤형 문자열도 수용할 수 있습니다.dd-MM-yy 또한, 만displayFormat 약 NO가 제공된다면, 컴포넌트는 해당 역할을 사용할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
입력을 제한하고 컴포넌트의 유효성을 제어하는 속성 를min 지정할max 수 있습니다. 부동산과 마찬가지로value 그들도 유형string이 될 수 있습니다.
const input = document.querySelector('igc-date-time-input') as IgcDateTimeInputComponent;
input.min = new Date(2021, 0, 1);
<igc-date-time-input max="2022-01-01T21:00:00.000Z"></igc-date-time-input>
모든 것이 잘 진행된다면, 구성 요소는 해당 값이 주어진 날짜보다 크거나 낮은지 결정invalid 됩니다. 아래 예시를 확인해 보세요:
Step up/down
IgcDateTimeInputComponent대중과stepUp 방법을 폭로합니다stepDown. 현재 설정된 날짜와 시간 중 특정DatePart 금액을 증가 또는 감소시키며, 여러 가지 방식으로 사용할 수 있습니다.
첫 번째 시나리오에서는 특정 DatePart가 메서드에 전달되지 않으면, 기본 DatePart가 지정된inputFormat 내용과 내부 구성 요소 구현에 따라 증가하거나 감소합니다. 두 번째 경우에는 어떤 DatePart를 조작할지 명시적으로 지정할 수 있는데, 이는 서로 다른 요구사항에 맞을 수 있습니다. 또한 두 방법 모두 stepUp/stepDown 단계를 설정하는 데 사용할 수 있는 선택적delta 타입 매개변수를 허용합니다.
또한,spinDelta는 각 날짜 시간 구간에 다른 델타를 적용하는 데 사용할 수 있는 속성입니다. 키보드, 마우스 휠 또는stepUpstepDown and 메서드로 회전할 때 적용되며, 델타 파라미터가 제공spinDelta 되지 않는 한 우선순위가 적용됩니다.
const input = document.getElementById('dateTimeInput') as IgcDateTimeInputComponent;
const spinDelta: DatePartDeltas = {
date: 2,
month: 3,
year: 10,
};
input.spinDelta = spinDelta;
아래 예에서 시도해 보세요.
Styling
컴포넌트는IgcDateTimeInputComponent 내부 요소의 거의 모든 CSS 파트를 노출합니다. 다음 표는 노출된 모든 CSS 부품을 나열합니다:
| 이름 | 설명 |
|---|---|
container |
모든 기본 입력 요소를 보유하는 기본 래퍼입니다. |
input |
기본 입력 요소입니다. |
label |
기본 레이블 요소입니다. |
prefix |
접두사 래퍼. |
suffix |
접미사 래퍼. |
helper-text |
도우미 텍스트 래퍼입니다. |
igc-date-time-input::part(input) {
background-color: var(--ig-primary-100);
border-color: var(--ig-secondary-500);
box-shadow: none;
}
igc-date-time-input::part(prefix),
igc-date-time-input::part(suffix) {
color: var(--ig-primary-600-contrast);
background-color: var(--ig-primary-500);
border-color: var(--ig-secondary-500);
}