React Date Picker 컴포넌트 개요

Ignite UI for React Date Picker는 수동 텍스트 입력을 통해 날짜를 입력하거나 팝업되는 달력 대화 상자에서 날짜 값을 선택하는 데 사용되는 기능이 풍부한 구성 요소입니다. 가볍고 사용이 간편한 날짜 선택기를 사용하면 월, 연도 및 10년과 같은 여러 보기 옵션을 사용하여 원하는 날짜로 이동할 수 있습니다. 또한 최소 및 최대 날짜 제약 조건과 필수 필드와 같은 일반적인 유효성 검사 속성을 지원합니다.

Ignite UI for React Date Picker Component를 사용하면 월별 보기 캘린더 드롭다운 또는 편집 가능한 입력 필드를 통해 단일 날짜를 선택할 수 있습니다. React Date Picker는 달력에서만 선택할 수 있는 대화 상자 모드, 로캘 인식 및 사용자 지정 가능한 날짜 형식 및 유효성 검사 통합도 지원합니다.

[!NOTE] The IgrDatePicker is a brand new component from Ignite UI for React version 18.7.0. The old IgrDatePicker prior to this version has been renamed to XDatePicker and its respective documentation page can be found under "Deprecated Components"

React Date Picker Example

아래에서는 사용자가 수동 텍스트 입력을 통해 날짜를 선택하고 왼쪽의 달력 아이콘을 클릭하여 해당 날짜로 이동할 수 있을 때 날짜 선택기가 작동하는 방식을 보여주는 샘플을 볼 수 있습니다. 렌더링 방법을 참조하십시오.

Getting Started with React Date Picker

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

npm install igniteui-react

그 다음에는 필요한 CSS를 가져오IgrDatePicker 고, 그 모듈을 등록해야 합니다. 다음과 같습니다:

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

Ignite UI for React에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

Using the React Date Picker Component

Display Date Picker

인스턴스화하기 위해IgrDatePicker 기본값으로는dropdown 다음 코드를 사용하세요:

<IgrDatePicker></IgrDatePicker>

Options

는IgrDatePicker adate에 결합될 수 있습니다.

const date = new Date();

<IgrDatePicker value={date}/>

Projecting components

prefix 및 suffix slots를 사용하면 Input의 기본 콘텐츠 앞뒤에 다른 콘텐츠를 추가할 수 있습니다.

<IgrDatePicker>
    <IgrIcon
        slot="suffix"
        name="arrow_upward"
        collection="material"
        class="small"
        onClick={() => datePickerRef.current.stepUp(DatePart.Month)}>
    </IgrIcon>
</IgrDatePicker>

위의 코드 조각은 기본 지우기 아이콘 바로 뒤에 입력 끝에 추가 아이콘을 추가합니다. 이렇게 하면 기본 토글 아이콘이 제거되지 않지만 접두사와 접미사가 차례로 쌓일 수 있습니다.

토글 및 지우기 아이콘 사용자 정의

캘린더와 클리어 아이콘은 와calendar 슬롯을 사용하여clear 템플릿화할 수 있습니다:

<IgrDatePicker>
    <IgrIcon slot="calendar" name="calendar" collection="material" class="small"></IgrIcon>
    <IgrIcon slot="clear" name="delete" collection="material" class="small"></IgrIcon>
</IgrDatePicker>

사용자 정의 작업 버튼

픽커의 행동 버튼은 슬롯을 통해actions 템플릿화할 수 있습니다:

<IgrDatePicker>
    <IgrButton
        slot='actions'
        onClick={() => datePickerRef.current.showWeekNumbers = true}>
        <span>Show Week Numbers</span>
    </IgrButton>
</IgrDatePicker>

Keyboard Navigation

​IgrDatePicker직관적인 키보드 내비게이션을 제공해 마우스를 만지지 않고도 다양한 DateParts 등을 쉽게 늘리거나 감소하거나 넘길 수 있습니다.

열쇠	설명
←	한 문자를 처음으로 이동
→	한 문자를 끝으로 이동
집	처음으로 이동
끝	끝으로 이동
CTRL / CMD + ←	날짜/시간 부분의 처음으로 이동 - 현재 부분 또는 왼쪽 부분
CTRL / CMD + →	날짜/시간 섹션의 끝으로 이동 - 현재 또는 오른쪽 섹션
날짜/시간 부분에 집중 + ↓	날짜/시간 부분을 감소시킵니다.
날짜/시간 부분에 집중 + ↑	날짜/시간 부분을 증가시킵니다.
CTRL / CMD +;	현재 날짜/시간을 편집기의 값으로 설정합니다.
ESC	달력 팝업을 닫고 입력 필드에 초점을 맞춥니다.

Examples

Dialog Mode

​IgrDatePicker또한 다음과 같은 모드를 지원합니다dialog:

<IgrDatePicker mode="dialog"></IgrDatePicker>

Display and input format

inputFormat그리고displayFormat는 피커의 편집기가 지정된 형식을 따르도록 설정할 수 있는 속성입니다.inputFormat 로컬 기반이기 때문에, 제공되지 않으면 선택기가 브라우저에서 사용하는 대로 기본값이 됩니다.

참고로 날짜 선택기 컴포넌트는 해당 포맷(예:date becomesmonth)이 없는 부분에 항상 앞 0d/M/yy​dd/MM/yy을 추가합니다. 이 내용은 편집 중에만 적용됩니다.

displayFormat피커의 입력이 초점이 맞지 않을 때 포맷하는 데 사용됩니다. 만displayFormat 약 번호가 제공되지 않으면, 피커는 그inputFormat 번호를displayFormat 사용합니다.

이에 대한 자세한 정보는 포맷 섹션에서IgrDateTimeInput 확인할 수 있습니다.

Increment and decrement

폭로IgrDatePicker와stepUp 방법들stepDown. 이 두 가지IgrDateTimeInput 모두 현재 설정된 날짜의 특정DatePart 항목을 증가 또는 감소시키는 데 사용할 수 있습니다.

<IgrDatePicker>
    <IgrIcon
        slot="prefix"
        name="arrow_upward"
        collection="material"
        onClick={() => datePickerRef.current.stepUp(DatePart.Month)}>
    </IgrIcon>
    <IgrIcon
        slot="suffix"
        name="arrow_downward"
        collection="material"
        onClick={() => datePickerRef.current.stepDown(DatePart.Month)}>
    </IgrIcon>
</IgrDatePicker>

In Forms

폼IgrDatePicker 요소에서 사용할 수 있고, 컴포넌트와min 속성은max 폼 검증기 역할을 합니다.

폼에서는 컴포넌트의 이벤트를 처리change 하고 라벨의 값을 업데이트할 수 있습니다.

Calendar Specific settings

​IgrDatePickerDate Picker가 제공하는 속성을 통해 달력의 일부 설정을 수정할 수 있습니다. 그 중visibleMonths 일부는 피커가 확장할 때 여러 달력을 표시할 수 있게 하는 것,weekStart 주 시작 날짜를 결정하는 기능,showWeekNumbers 연간 각 주별 숫자를 보여주는 등 다양한 기능을 제공합니다.

Internationalization

입력을 통해IgrDatePicker 해당 신호locale의 국소화를 제어할 수 있습니다.

일본어 로지먼트 정의는IgrDatePicker 다음과 같습니다:

<IgrDatePicker locale="ja-JP"></IgrDatePicker>

Styling

컴포넌트는IgrDatePicker andIgrInput 컴포넌트에서IgrCalendar 파생되기 때문에 사용 가능한 모든 CSS 파트를 노출합니다. 참고로 입력 스타일링과 캘린더 스타일링을 참조하세요.

igc-date-picker::part(header) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}
igc-date-picker::part(calendar-content) {
  background-color: var(--ig-surface-300);
}
igc-date-picker::part(date-inner current) {
  color: var(--ig-info-300);
  background-color: var(--ig-surface-300);
}
igc-date-picker::part(navigation-button):hover,
igc-date-picker::part(months-navigation):hover,
igc-date-picker::part(years-navigation):hover {
  color: var(--ig-secondary-500);
}
igc-date-picker::part(month-inner current),
igc-date-picker::part(year-inner current),
igc-date-picker::part(navigation-button),
igc-date-picker::part(months-navigation),
igc-date-picker::part(years-navigation) {
  color: var(--ig-info-300);
}
igc-date-picker::part(date-inner selected),
igc-date-picker::part(month-inner selected),
igc-date-picker::part(year-inner selected) {
  color: var(--ig-secondary-500-contrast);
  background-color: var(--ig-secondary-500);
}

API References

• IgrInput
• IgrCalendar
• IgrDatePicker
• Styling & Themes

Additional Resources

• Ignite UI for React Forums
• Ignite UI for React GitHub