React 날짜 시간 입력 개요

Ignite UI for React 하면 사용자가 선택한 입력 요소에서 날짜와 시간을 설정하고 편집할 수 있습니다. 사용자는 편집 가능한 마스크된 입력을 사용하여 날짜와 시간 부분을 모두 편집할 수 있습니다. 또한 원하는 표시 및 입력 형식과 최소값 및 최대값을 지정하여 유효성 검사를 활용할 수 있습니다.

Usage

먼저, 다음 명령을 실행하여 Ignite UI for React 설치해야 합니다.

npm install igniteui-react

You will then need to import the IgrDateTimeInput, its necessary CSS, like so:

import { IgrDateTimeInput } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

Value binding

The easiest way to set the value of the IgrDateTimeInput component is by passing a Date object to the value property:

<IgrDateTimeInput value={someValue}></IgrDateTimeInput>

The IgrDateTimeInput also accepts ISO 8601 strings.

The string can be a full ISO string, in the format YYYY-MM-DDTHH:mm:ss.sssZ or it could be separated into date-only and time-only portions.

날짜만

If a date-only string is bound to the value property of the component, it needs to be in the format YYYY-MM-DD. The inputFormat is still used when typing values in the input and it does not have to be in the same format. Additionally, when binding a date-only string, the directive will prevent time shifts by coercing the time to be T00:00:00.

시간 한정

Time-only strings are normally not defined in the ECMA specification, however to allow the directive to be integrated in scenarios which require time-only solutions, it supports the 24 hour format - HH:mm:ss. The 12 hour format is not supported.

전체 ISO 문자열

If a full ISO string is bound, the directive will parse it only if all elements required by Date.parse are provided.

All falsy values, including InvalidDate will be parsed as null. Incomplete date-only, time-only, or full ISO strings will be parsed as InvalidDate.

The IgrDateTimeInput has intuitive keyboard navigation that makes it easy to increment, decrement, or jump through different DateParts among others without having to touch the mouse.

열쇠	설명
`←`	한 문자를 처음으로 이동
`→`	한 문자를 끝으로 이동
`집`	처음으로 이동
`끝`	끝으로 이동
`CTRL` / `CMD` + `←`	날짜/시간 부분의 처음으로 이동 - 현재 부분 또는 왼쪽 부분
`CTRL` / `CMD` + `→`	날짜/시간 섹션의 끝으로 이동 - 현재 또는 오른쪽 섹션
날짜/시간 부분에 집중 + `↓`	날짜/시간 부분을 감소시킵니다.
날짜/시간 부분에 집중 + `↑`	날짜/시간 부분을 증가시킵니다.
`CTRL` / `CMD` +`;`	현재 날짜/시간을 편집기의 값으로 설정합니다.

Setting formats

The IgrDateTimeInput supports different display and input formats.

It uses Intl.DateTimeFormat which allows it to support predefined format options, such as long and short, medium and full. Additionally, it can also accept a custom string constructed from supported characters, such as dd-MM-yy. Also, if no displayFormat is provided, the component will use the inputFormat as such.

Input Format

The table bellow shows formats that are supported by the component's 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 섹션입니다.

To set a specific input format, pass it as a string to the IgrDateTimeInput. This will set both the expected user input format and the mask. Additionally, the inputFormat is locale based, so if none is provided, the editor will default to dd/MM/yyyy.

<IgrDateTimeInput inputFormat="dd-MM-yy" displayFormat="medium"></IgrDateTimeInput>

모든 것이 순조롭게 진행되면 브라우저에 다음이 표시됩니다.

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

You can specify min and max properties to restrict input and control the validity of the component. Just like the value property, they can be of type string.

 <IgrDateTimeInput min={minDate} max={maxDate}></IgrDateTimeInput>

If all went well, the component will be invalid if the value is greater or lower than the given dates. Check out the example below:

Step up/down

The IgrDateTimeInput exposes public stepUp and stepDown methods. They increment or decrement a specific DatePart of the currently set date and time and can be used in a couple of ways.

In the first scenario, if no specific DatePart is passed to the method, a default DatePart will increment or decrement, based on the specified inputFormat and the internal component implementation. In the second scenario, you can explicitly specify what DatePart to manipulate as it may suite different requirements. Also, both methods accept an optional delta parameter of type number which can be used to set the stepUp/stepDown step.

아래 예에서 시도해 보세요.

Styling

컴포넌트는IgrDateTimeInput 내부 요소의 거의 모든 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);
}