React XDate Picker 개요

XDate Picker 구성 요소를 통해 사용자는 일, 월 및 연도를 직관적으로 선택할 수 있는 드롭다운 캘린더 UI를 사용할 수 있습니다. 이는 애플리케이션 사용자가 특정 날짜를 선택해야 하고 여러 편집기를 결합하여 날짜 범위 UI를 만들 수 있는 경우에 유용할 수 있습니다.

XDatePicker 구성 요소는 Ignite UI for React 버전 18.7.0에서 더 이상 사용되지 않습니다. 지원되는 최신 Ignite UI for React 날짜 선택기 구성 요소는 "예약" 아래의 해당 페이지를 참조하십시오.

React XDate Picker 예제

이 샘플에서는 옵션을 사용하여 단일 날짜를 선택하는 XDatePicker 방법을 보여 줍니다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrXDatePicker, IgrXDatePickerModule } from "@infragistics/igniteui-react-inputs";

IgrXDatePickerModule.register();

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

    constructor(props: any) {
        super(props);
        this.onDatePickerRef = this.onDatePickerRef.bind(this);
    }

    public onDatePickerRef(datePicker: IgrXDatePicker) {
        if (!datePicker) return;

        datePicker.value = new Date(Date.now());
        datePicker.showTodayButton = true;
        datePicker.showWeekNumbers = true;
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="container">
                    <IgrXDatePicker ref={this.onDatePickerRef} height="50px" width="220px" />
                </div>
            </div>
        );
    }
}

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

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

종속성

XDate Picker 구성 요소를 설치할 때 core 및 inputs 패키지도 설치해야 합니다.

npm install --save igniteui-react-core
npm install --save igniteui-react-inputs
npm install --save igniteui-react-layouts
cmd

컴포넌트 모듈

XDate Picker 구성 요소를 사용하려면 다음 모듈을 등록해야 합니다.

import { IgrXDatePickerModule } from 'igniteui-react-inputs';

IgrXDatePickerModule.register();
ts

용법

React XDate Picker 편집기 구성 요소는 텍스트 영역, 달력 드롭다운 버튼, 지우기 버튼의 세 가지 기본 부분으로 구성됩니다. 이러한 영역은 아래에 설명되어 있습니다.

텍스트 영역: 편집기의 속성에 Value 저장된 선택한 날짜를 표시합니다.
캘린더: 캘린더 버튼을 클릭하면 XDate Picker의 캘린더 드롭다운이 열립니다. 달력이 열리고 현재 선택된 Value 월이 있는 경우 해당 월이 표시됩니다. a Value를 지정하지 않으면 달력에 현재 날짜에 해당하는 월이 표시됩니다. 맨 위에 있는 월을 클릭하여 월 목록을 표시할 수 있으며 연도에도 동일하게 적용됩니다. 또한 월 및 연도 시각화의 왼쪽과 오른쪽에 화살표 버튼이 있어 표시된 월을 시간순으로 증가 및 감소시킵니다.
지우기 버튼: 'x' 아이콘은 현재 값을 지웁니다.

재산	유형	설명
`IconColor`	끈	달력 버튼의 색상을 변경합니다.
`AllowTextInput`	부울	xdate 선택기의 값은이 속성을 true로 전환하여 입력하고 수정할 수 있습니다.
`DateFormat`	열거형	기본값은 DateShort입니다(예: 'mm/dd/yyyy'). DateLong으로 설정하면 편집기에 표시되는 날짜가 예를 들어 2021년 4월 14일 수요일과 같이 표시됩니다.
`FirstDayOfWeek`	열거형	기본값은 일요일입니다. 특정 요일은 달력의 각 주별 행(예: 월요일부터 일요일)의 첫 번째 날로 사용됩니다.
`FormatString`	끈	DateShort를 사용하는 경우 날짜 형식을 구성할 수 있습니다(예: 'dd/mm/yyyy'). DateLong`DateFormat` 이고`FormatString` 설정되어`DateFormat` 있으면 는 무시됩니다.
`Label`	끈	XDate Picker의 왼쪽 상단 모서리에 있는 날짜 위에 사용자 정의 텍스트를 표시합니다.
`MinDate`	날짜 시간	이전 날짜를 선택하거나 볼 수 없도록 제한합니다.
`MaxDate`	날짜 시간	이후 날짜를 선택하거나 볼 수 없도록 제한합니다.
`Placeholder`	끈	달력의 편집 부분 내의 값이 지워질 때 표시되는 사용자 정의 문자열입니다.
`ShowClearButton`	부울	기본값은 true이며, 지우기 버튼은 달력 버튼의 바로 왼쪽에 있으며 X로 시각화됩니다. 클릭하면 XDate Picker가`Value` 지워집니다. 지우기 버튼의 가시성은 켜고 끌 수 있습니다.
`ShowTodayButton`	부울	오늘은 달력을 연 날짜 바로 아래에 있습니다. 클릭하면 현재 날짜가 선택됩니다. 오늘 버튼의 표시 여부를 켜거나 끌 수 있습니다.
`ShowWeekNumbers`	부울	주 번호는 XDate Picker의 드롭다운 부분에서 모든 날짜 행의 왼쪽에 숫자로 표시할 수 있습니다. 주 번호의 가시성은 켜거나 끌 수 있습니다.
`FirstWeekOfYear`	열거형	전체 연도에 대한 주의 시작 번호를 구성합니다. FirstDay, FirstFourDayWeek, FirstFullWeek로 설정할 수 있습니다.
`OpenOnFocus`	부울	기본적으로 XDate Picker의 드롭다운 부분은 한 번의 클릭으로 열리므로 사용자가 캘린더 버튼을 클릭하여 캘린더를 드롭다운해야 합니다.
`Value`	날짜	XDate Picker의 값을 설정하고 드롭다운 캘린더에서 선택합니다.

사용자는 컨트롤의 다양한 텍스트 속성을 사용하여 XDate Picker의 글꼴을 사용자 지정할 수도 있습니다. 그들은: TextColor,, TextFontFamily, TextFontSize, TextFontStyle, 그리고 TextFontWeight.

편집

다음 예제에서는 에서 XDatePicker 편집을 활성화하는 방법을 보여 줍니다.


import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css'; // styles shared between all samples

import { IgrXDatePicker, IgrXDatePickerModule } from "@infragistics/igniteui-react-inputs";

IgrXDatePickerModule.register();

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

    constructor(props: any) {
        super(props);
        this.onDatePickerRef = this.onDatePickerRef.bind(this);
    }

    public onDatePickerRef(datePicker: IgrXDatePicker){
        
        if(!datePicker) return;

        datePicker.value = new Date(Date.now());
        datePicker.allowTextInput = true;
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="container">
                    <IgrXDatePicker ref={this.onDatePickerRef} height="60px" width="220px" />
                </div>
            </div>
        );
    }
}

root.render(<DatePickerEditing/>);
tsx

날짜 제한

다음 예제에서는 에서 선택한 날짜를 제한하는 방법을 보여 줍니다 XDatePicker.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css'; // styles shared between all samples


import { IgrXDatePicker, IgrXDatePickerModule } from "@infragistics/igniteui-react-inputs";

IgrXDatePickerModule.register();

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

    public datePicker: IgrXDatePicker;

    constructor(props: any) {
        super(props);
        this.onDatePickerRef = this.onDatePickerRef.bind(this);
        this.state = { minDate:  new Date().toLocaleString(), maxDate: new Date().toLocaleString() }
    }

    public onDatePickerRef(datePicker: IgrXDatePicker){
        if (!datePicker) { return; }

        this.datePicker = datePicker;
        datePicker.value = new Date(Date.now());
        let year = datePicker.value.getFullYear();
        let month = datePicker.value.getMonth();
        let lastDayOfMonth = new Date(year, month + 1, 0);
        this.datePicker.minDate = new Date(year, month, 1);
        this.datePicker.maxDate = lastDayOfMonth;
        this.datePicker.allowTextInput = false;

        this.setState({ minDate: new Date(year, month, 1), maxDate: lastDayOfMonth });
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="options">
                    <label className="options-label">Minimum Date: {this.state.minDate.toLocaleString()}</label>
                    <label className="options-label">Maximum Date: {this.state.maxDate.toLocaleString()}</label>
                </div>
                <div className="container">

                    <IgrXDatePicker ref={this.onDatePickerRef} height="50px" width="220px" />
                </div>
            </div>
        );
    }
}

root.render(<DatePickerDateLimits/>);
tsx

날짜 형식

다음 예제에서는 에서 긴 날짜를 XDatePicker 적용하는 방법을 보여 줍니다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css'; // styles shared between all samples

import { IgrXDatePicker, IgrXDatePickerModule, DateFormats } from "@infragistics/igniteui-react-inputs";

IgrXDatePickerModule.register();

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

    constructor(props: any) {
        super(props);
        this.onDatePickerRef = this.onDatePickerRef.bind(this);
        this.state = { dateFormat: DateFormats.DateLong }
    }

    public onDatePickerRef(datePicker: IgrXDatePicker){
        
        if(!datePicker) return;

        datePicker.value = new Date(Date.now());
        datePicker.dateFormat = this.state.dateFormat;
        datePicker.allowTextInput = false;
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
            <div className="options horizontal">
                    <span className="options-label">Date Formats: </span>
                    <select value={this.state.dateFormat}
                        onChange={this.ondateFormatChanged}>
                        <option>DateLong</option>
                        <option>DateShort</option>
                    </select>
                </div>
                <div className="container">
                    <IgrXDatePicker ref={this.onDatePickerRef} dateFormat={this.state.dateFormat} height="60px" width="300px" />
                </div>
            </div>
        );
    }

    public ondateFormatChanged = (e: any) =>{
        const dateFormatMode = e.target.value.toString();
        this.setState({dateFormat: dateFormatMode});
    }
}

root.render(<DatePickerFormat/>);
tsx

날짜 범위

다음 예제에서는 여러 XDatePicker 컨트롤을 결합하는 방법을 보여 줍니다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import "./date-picker-range.css";
import { IgrXDatePicker, IgrXDatePickerModule, IgrSelectedValueChangedEventArgs } from "@infragistics/igniteui-react-inputs";

IgrXDatePickerModule.register();

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

    public fromDatePickerRef: IgrXDatePicker;
    public toDatePickerRef: IgrXDatePicker;

    constructor(props: any) {
        super(props);
        this.onFromDatePickerRef = this.onFromDatePickerRef.bind(this);
        this.onToDatePickerRef = this.onToDatePickerRef.bind(this);
        this.fromDateChanged = this.fromDateChanged.bind(this);
        this.toDateChanged = this.toDateChanged.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="dateRanges">
                    <label className="caption">From:  </label>
                    <IgrXDatePicker ref={this.onFromDatePickerRef} height="50px" width="220px" selectedValueChanged={this.fromDateChanged}  />
                    <label className="caption">  To:  </label>
                    <IgrXDatePicker ref={this.onToDatePickerRef} height="50px" width="220px" selectedValueChanged={this.toDateChanged}/>
                </div>
            </div>
        );
    }

    public onFromDatePickerRef(picker: IgrXDatePicker) {
        this.fromDatePickerRef = picker;
        if (!picker) return;

        picker.value = new Date(Date.now());
        picker.allowTextInput = false;
    }

    public onToDatePickerRef(picker: IgrXDatePicker) {
        this.toDatePickerRef = picker;
        if (!picker) return;

        picker.value = new Date(Date.now());
        picker.allowTextInput = false;
    }

    public fromDateChanged(s: IgrXDatePicker, e: IgrSelectedValueChangedEventArgs) {
        let newDate = e.newValue;
        if (this.toDatePickerRef != null && newDate > this.toDatePickerRef.value) {
            this.toDatePickerRef.value = new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate() + 1);
        }
    }

    public toDateChanged(s: IgrXDatePicker, e: IgrSelectedValueChangedEventArgs) {
        let newDate = e.newValue;
        if (this.fromDatePickerRef != null && newDate < this.fromDatePickerRef.value) {
            this.fromDatePickerRef.value = new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate() - 1);
        }
    }
}

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

.dateRanges {
  display: flex;
}

.caption {
  align-self: center;
  margin-left: 25px;
  margin-right: 10px;
  margin-top: 8px;
}
css

API 참조

다음은 위 섹션에서 언급된 API 멤버 목록입니다.

XDatePicker
IconColor
AllowTextInput
DateFormat
FirstDayOfWeek
FormatString
Label
MinDate
MaxDate
Placeholder
ShowClearButton
ShowTodayButton
ShowWeekNumbers
FirstWeekOfYear
OpenOnFocus
Value
TextColor
TextFontFamily
TextFontSize
TextFontStyle
TextFontWeight