Web Components 날짜 선택기 구성 요소 개요

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

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

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

    Web Components Date Picker Example

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

    Getting Started with Web Components Date Picker

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

    npm install igniteui-webcomponents

    그런 다음 필요한 CSS를 IgcDatePickerComponent 가져오고 다음과 같이 모듈을 등록해야 합니다.

    import { defineComponents, IgcDatePickerComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcDatePickerComponent);

    Ignite UI for Web Components 에 대한 전체 소개는 시작 항목을 참조하세요.

    Using the Web Components Date Picker Component

    Display Date Picker

    를 인스턴스화하려면 IgcDatePickerComponent 기본값 dropdown 상태, 다음 코드를 사용합니다.

    <igc-date-picker>
    <p slot="helper-text">Date</p>
</igc-date-picker>

    Options

    는 IgcDatePickerComponent a date 또는 a string에 바인딩될 수 있습니다.

    const DatePicker = document.querySelector('igc-date-picker') as IgcDatePickerComponent;
const date = new Date();

DatePicker.value = date;

    문자열이 선택기에 바인딩된 경우 ISO 8601 형식이어야 합니다.

    <igc-date-picker value="2000-01-01"></igc-date-picker>

    Projecting components

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

    <igc-date-picker id="DatePicker">
    <igc-icon slot="suffix" name="arrow_upward" collection="material" class="small" onclick="DatePicker.stepUp()"></igc-icon>
</igc-date-picker>

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

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

    calendar 및 clear 아이콘은 및 clear 슬롯을 calendar 사용하여 템플릿화할 수 있습니다.

    <igc-date-picker id="DatePicker">
    <igc-icon slot="calendar" name="calendar" collection="material" class="small"></igc-icon>
    <igc-icon slot="clear" name="delete" collection="material" class="small"></igc-icon>
</igc-date-picker>

    사용자 정의 작업 버튼

    선택기의 작업 버튼은 슬롯을 사용하여 템플릿화할 수 있습니다. actions​

    <igc-date-picker id="DatePicker">
    <igc-button slot="actions" onclick="DatePicker.showWeekNumbers = true">Show Week Numbers</igc-button>
</igc-date-picker>

    Keyboard Navigation

    직관적 IgcDatePickerComponent 인 키보드 탐색 기능이 있어 마우스를 터치하지 않고도 다른 DateParts를 쉽게 증가, 감소 또는 건너뛸 수 있습니다.

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

    Examples

    Dialog Mode

    다음 IgcDatePickerComponent 모드도 지원합니다. dialog​

    <igc-date-picker id="DatePicker" mode="dialog">
</igc-date-picker>

    Display and input format

    inputFormat​ ​displayFormat 선택기의 편집기가 지정된 형식을 따르도록 설정할 수 있는 속성입니다. inputFormat는 로케일 기반이므로 아무 것도 제공되지 않으면 선택기는 기본적으로 브라우저에서 사용하는 것으로 설정됩니다.

    주목해야 할 좋은 점은 Date Picker Component 가 없는 형식으로 제공된 경우 and month 부분에 항상 선행 0 date을 추가한다는 것입니다(예 d/M/yy: becomes dd/MM/yy). 이는 편집 중에만 적용됩니다.

    displayFormat is used to format the picker's input when it is not focused. If no displayFormat is provided, the picker will use the inputFormat as its displayFormat.

    이에 대한 자세한 내용은 형식 섹션에서 확인할 IgcDateTimeInputComponent 수 있습니다.

    Increment and decrement

    ​IgcDatePickerComponent 노출 stepUp 및 stepDown 메서드. 둘 다 에서 비롯 IgcDateTimeInputComponent 되며 현재 설정된 날짜의 특정 DatePart 날짜를 증가 및 감소시키는 데 사용할 수 있습니다.

    <igc-date-picker id="DatePicker">
    <igc-icon slot="prefix" name="arrow_upward" collection="material" onclick="DatePicker.stepUp()"></igc-icon>
    <igc-icon slot="suffix" name="arrow_downward" collection="material" onclick="DatePicker.stepDown()"></igc-icon>
</igc-date-picker>

    In Forms

    는 IgcDatePickerComponent form 요소에서 사용할 수 있으며, 구성 요소 min와 max 속성은 form validators 역할을 합니다.

    양식에서는 구성 요소의 이벤트를 처리 igcChange 하고 레이블의 값을 업데이트할 수 있습니다.

    Calendar Specific settings

    ​IgcDatePickerComponent 날짜 선택기가 노출하는 속성을 통해 달력 설정 중 일부를 수정할 수 있습니다. 이들 중 일부는 선택기가 확장될 때 둘 이상의 달력을 표시할 수 있는 것, 주의 시작 요일을 결정하는 것, weekStart​ ​showWeekNumbers 연내의 각 주에 대한 숫자를 표시하는 것 등이 포함됩니다 visibleMonths.

    Internationalization

    의 IgcDatePickerComponent 지역화는 입력을 통해 제어할 수 있습니다 locale.

    ​IgcDatePickerComponent 일본어 로케일 정의는 다음과 같습니다.

    <igc-date-picker locale="ja-JP">
</igc-date-picker>

    Styling

    ​IgcDatePickerComponent 구성 요소는 및 IgcCalendarComponent 구성 요소에서 IgcInputComponent 파생되므로 사용 가능한 모든 CSS 부분을 노출합니다. 참조는 Input Styling 및 Calendar Styling을 참조하십시오.

    API References

    Additional Resources