React 날짜 시간 입력 개요

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

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrIcon, IgrDateTimeInput, DatePart, registerIconFromText } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

const upIconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 14l5-5 5 5z"/></svg>';
const downIconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>';
const clearIconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>';

export default class DateTimeInputOverview extends React.Component<any, any> {

    private dateTimeInput: IgrDateTimeInput;
    constructor(props: any) {
        super(props);
        registerIconFromText("up", upIconText, "material");
        registerIconFromText("down", downIconText, "material");
        registerIconFromText("clear", clearIconText, "material");
        this.dateTimeInputRef = this.dateTimeInputRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrDateTimeInput ref={this.dateTimeInputRef}>
                    <span slot="prefix" onClick={() => this.dateTimeInput.clear()}>
                    <IgrIcon name="clear" collection="material" />
                    </span>
                    <span slot="suffix" onClick={() => this.dateTimeInput.stepUp(DatePart.Month)}>
                    <IgrIcon name="up" collection="material" />
                    </span>
                    <span slot='suffix' onClick={() => this.dateTimeInput.stepDown(DatePart.Month)}>
                    <IgrIcon name="down" collection="material" />
                    </span> 
                </IgrDateTimeInput>
            </div>
        );
    }

    public dateTimeInputRef(input: IgrDateTimeInput) {
        if (!input) { return; }
        this.dateTimeInput = input;
    }

}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DateTimeInputOverview/>);
tsxコピー

Edit in: Codesandbox

이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

용법

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

npm install igniteui-react
cmd

그런 다음 다음과 같이 필요한 CSS를 가져와야 IgrDateTimeInput 합니다.

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

값 바인딩

구성 요소의 값을 IgrDateTimeInput 설정하는 가장 쉬운 방법은 Date 객체를 속성에 전달하는 것입니다. value​

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

The IgrDateTimeInput also accepts ISO 8601 strings.

문자열은 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로 구문 분석됩니다.

키보드 탐색

직관적 IgrDateTimeInput 인 키보드 탐색 기능이 있어 마우스를 터치하지 않고도 다른 키보드를 쉽게 늘리거나 줄이거나 건너뛸 DateParts 수 있습니다.

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

형식 설정

​IgrDateTimeInput 다양한 디스플레이 및 입력 형식을 지원합니다.

​Intl.DateTimeFormat을 사용하여 and,and short와 medium 같은 long 사전 정의된 형식 옵션을 지원할 수 있습니다 full. 또한 다음과 dd-MM-yy 같이 지원되는 문자로 구성된 사용자 지정 문자열을 허용할 수도 있습니다. 또한 제공되지 않은 displayFormat 경우 구성 요소는 그대로 사용합니다 inputFormat.

입력 형식

아래 표에는 구성 요소에서 지원하는 형식이 나와 있습니다. 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 섹션입니다.

특정 입력 형식을 설정하려면 문자열 IgrDateTimeInput로 전달합니다. 이렇게 하면 예상되는 사용자 입력 형식과 . mask​ ​inputFormat 또한 is 로케일 기반이므로 아무 것도 제공되지 않으면 편집기는 기본적으로 로케일 기반입니다 dd/MM/yyyy.

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

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

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrIcon, IgrDateTimeInput, DatePart, registerIconFromText } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

const upIconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 14l5-5 5 5z"/></svg>';
const downIconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>';
const clearIconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>';
export default class DateTimeInputInputFormatDisplayFormat extends React.Component<any, any> {

    private dateTimeInput: IgrDateTimeInput;
    constructor(props: any) {
        super(props);
        registerIconFromText("up", upIconText, "material");
        registerIconFromText("down", downIconText, "material");
        registerIconFromText("clear", clearIconText, "material");
        this.dateTimeInputRef = this.dateTimeInputRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrDateTimeInput ref={this.dateTimeInputRef} inputFormat="dd-MM-yy" displayFormat="medium">
                    <span slot="prefix" onClick={() => this.dateTimeInput.clear()}>
                    <IgrIcon name="clear" collection="material" />
                    </span>
                    <span slot="suffix" onClick={() => this.dateTimeInput.stepUp(DatePart.Date)}>
                    <IgrIcon name="up" collection="material" />
                    </span>
                    <span slot='suffix' onClick={() => this.dateTimeInput.stepDown(DatePart.Date)}>
                    <IgrIcon name="down" collection="material" />
                    </span> 
                </IgrDateTimeInput>
            </div>
        );
    }

    public dateTimeInputRef(input: IgrDateTimeInput) {
        if (!input) { return; }
        this.dateTimeInput = input;
    }

}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DateTimeInputInputFormatDisplayFormat/>);
tsxコピー

Edit in: Codesandbox

표시 형식

날짜 시간 입력은 날짜/시간을 다양한 방식으로 표시하기 위해 미리 정의된 형식을 노출합니다. 아래의 모든 예는 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

많은 로케일은 지정된 형식에 관계없이 동일한 기간 문자열을 사용합니다. 또한 12시간제를 사용하는 경우에만 효과가 있습니다.

최소/최대값

및 max 속성을 지정 min 하여 입력을 제한하고 구성 요소의 유효성을 제어할 수 있습니다. 속성과 value 마찬가지로 유형 string 일 수 있습니다.

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

모든 것이 순조롭게 진행된 경우 값이 지정된 날짜보다 크거나 작으면 구성 요소가 invalid 됩니다. 아래 예를 확인하세요.

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrIcon, IgrDateTimeInput, DatePart, registerIconFromText } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

const upIconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 14l5-5 5 5z"/></svg>';
const downIconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>';
const clearIconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>';

export default class DateTimeInputMinMaxValue extends React.Component<any, any> {

    private dateTimeInput: IgrDateTimeInput;
    constructor(props: any) {
        super(props);
        registerIconFromText("up", upIconText, "material");
        registerIconFromText("down", downIconText, "material");
        registerIconFromText("clear", clearIconText, "material");
        this.dateTimeInputRef = this.dateTimeInputRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrDateTimeInput ref={this.dateTimeInputRef} max={new Date(2024, 6, 25)}>
                    <span slot="prefix" onClick={() => this.dateTimeInput.clear()}>
                    <IgrIcon name="clear" collection="material" />
                    </span>
                    <span slot="suffix" onClick={() => this.dateTimeInput.stepUp(DatePart.Month)}>
                    <IgrIcon name="up" collection="material" />
                    </span>
                    <span slot='suffix' onClick={() => this.dateTimeInput.stepDown(DatePart.Month)}>
                    <IgrIcon name="down" collection="material" />
                    </span> 
                </IgrDateTimeInput>
            </div>
        );
    }

    public dateTimeInputRef(input: IgrDateTimeInput) {
        if (!input) { return; }
        input.min = new Date(2021, 0, 1);
        this.dateTimeInput = input;
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DateTimeInputMinMaxValue/>);
tsxコピー

Edit in: Codesandbox

스텝 업/다운

​IgrDateTimeInput public stepUp 및 stepDown 메서드를 노출합니다. 현재 설정된 특정 날짜와 시간을 증가 또는 감소 DatePart 시키며 몇 가지 방법으로 사용할 수 있습니다.

첫 번째 시나리오에서 특정 DatePart가 메서드에 전달되지 않으면 기본 DatePart는 지정된 inputFormat 구성 요소 구현과 내부 구성 요소 구현에 따라 증가하거나 감소합니다. 두 번째 시나리오에서는 다양한 요구 사항에 적합할 수 있으므로 조작할 DatePart를 명시적으로 지정할 수 있습니다. 또한 두 방법 모두 stepUp/stepDown 단계를 설정하는 데 사용할 수 있는 number 유형의 선택적 delta 매개 변수를 허용합니다.

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

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrIcon, IgrDateTimeInput, DatePart, registerIconFromText } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

const upIconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 14l5-5 5 5z"/></svg>';
const downIconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>';
const clearIconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>';

export default class DateTimeInputStepUpDown extends React.Component<any, any> {

    private dateTimeInput: IgrDateTimeInput;
      
    constructor(props: any) {
        super(props);
        registerIconFromText("up", upIconText, "material");
        registerIconFromText("down", downIconText, "material");
        registerIconFromText("clear", clearIconText, "material");
        this.dateTimeInputRef = this.dateTimeInputRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrDateTimeInput ref={this.dateTimeInputRef}>
                    <span slot="prefix" onClick={() => this.dateTimeInput.clear()}>
                    <IgrIcon name="clear" collection="material" />
                    </span>
                    <span slot="suffix" onClick={() => this.dateTimeInput.stepUp(DatePart.Month, 3)}>
                    <IgrIcon name="up" collection="material" />
                    </span>
                    <span slot='suffix' onClick={() => this.dateTimeInput.stepDown(DatePart.Date, 2)}>
                    <IgrIcon name="down" collection="material" />
                    </span> 
                </IgrDateTimeInput>
            </div>
        );
    }

    public dateTimeInputRef(input: IgrDateTimeInput) {
        if (!input) { return; }
        this.dateTimeInput = input;
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DateTimeInputStepUpDown/>);
tsxコピー

Edit in: Codesandbox

스타일링

구성 요소는 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);
}
css

EXAMPLE

Edit in: Codesandbox

API 참조

• IgrInput
• IgrMaskInput
• IgrIcon
• IgrDateTimeInput
• Styling & Themes

추가 리소스

• Ignite UI for React 포럼
• Ignite UI for React GitHub