Web Components XDate Picker 개요

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

    [!WARNING] The XDatePicker component is deprecated from version 5.0.0 of Ignite UI for Web Components. For the latest supported Ignite UI for Web Components Date Picker component refer to its respective page under "Scheduling".

    Web Components XDate Picker Example

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

    Dependencies

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

    npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-inputs
npm install --save igniteui-webcomponents-layouts

    Component Modules

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

    import { IgcXDatePickerModule } from 'igniteui-webcomponents-inputs';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcXDatePickerModule);

    Usage

    Web Components 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'). DateLongDateFormat 이고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 편집을 활성화하는 방법을 보여 줍니다.

    Date Limits

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

    Date Formats

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

    Date Ranges

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

    API References

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

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