Blazor Date Picker 구성 요소 개요

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

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

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

Blazor Date Picker Example

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

Getting Started with Blazor Date Picker

To get started with the IgbDatePicker component, first we need to register its module as follows:

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule));

You will also need to link an additional CSS file to apply the styling to the IgbDatePicker component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

Ignite UI for Blazor에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

Using the Blazor Date Picker Component

Display Date Picker

To instantiate a IgbDatePicker in its default dropdown state, use the following code:

<IgbDatePicker @ref="DatePicker"></IgbDatePicker>

Options

The IgbDatePicker can be bound to a date.

<IgbDatePicker @ref="DatePicker" Value="@SelectedDate">
</IgbDatePicker>

@code {

    public DateTime SelectedDate { get; set; }
    public IgbDatePicker DatePicker { get; set; }

    protected override void OnInitialized()
    {
        this.SelectedDate = DateTime.Today;
    }
}

Projecting components

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

<IgbDatePicker @ref="DatePicker">
    <IgbIcon 
        Slot="suffix" 
        IconName="arrow_upward" 
        Collection="bootstrap" 
        Class="small" 
        @onclick="() => DatePicker.StepUp(DatePart.Month)">
    </IgbIcon>
</IgbDatePicker>

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

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

The calendar and clear icon could be templated by using the calendar and clear slots:

<IgbDatePicker>
    <IgbIcon Slot="calendar" IconName="calendar" Collection="material" Class="small"></IgbIcon>
    <IgbIcon Slot="clear" IconName="delete" Collection="material" Class="small"></IgbIcon>
</IgbDatePicker>

사용자 정의 작업 버튼

The picker's action buttons can be templated using the actions slot:

<IgbDatePicker>
    <IgbButton Slot="actions" @onclick="() => DatePicker.ShowWeekNumbers = true">Show Week Numbers</IgbButton>
</IgbDatePicker>

The IgbDatePicker has intuitive keyboard navigation that makes it easy to increment, decrement, or jump through different DateParts among others without having to touch the mouse.

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

Examples

Dialog Mode

The IgbDatePicker also supports a dialog mode:

<IgbDatePicker Mode="PickerMode.Dialog"></IgbDatePicker>

Display and input format

InputFormat and DisplayFormat are properties which can be set to make the picker's editor follow a specified format. The InputFormat is locale based, so if none is provided, the picker will default to the one used by the browser.

A good thing to note is that the Date Picker Component will always add a leading zero on the date and month portions if they were provided in a format that does not have it, e.g. d/M/yy becomes dd/MM/yy. This applies only during editing.

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.

More information about these can be found in the IgbDateTimeInput format section.

Increment and decrement

The IgbDatePicker exposes StepUp and StepDown methods. Both of which come from the IgbDateTimeInput and can be used for incrementing and decrementing a specific DatePart of the currently set date.

<IgbDatePicker @ref="DatePicker">
    <IgbIcon 
        Slot="prefix"
        IconName="arrow_upward"
        Collection="material"               
        @onclick="() => DatePicker.StepUp(DatePart.Month)">
    </IgbIcon>
    <IgbIcon 
        Slot="suffix"
        IconName="arrow_downward"
        Collection="material"
        @onclick="() => DatePicker.StepDown(DatePart.Month)">
    </IgbIcon>
</IgbDatePicker>

In Forms

The IgbDatePicker could be used in a form element, the component's Min and Max properties act as form validators.

In forms, we can handle the Change event of the component and update the value of the label.

Calendar Specific settings

The IgbDatePicker can modify some of the calendar's settings via the properties that the Date Picker exposes. Some of these include VisibleMonths which allows more than one calendar to be displayed when the picker expands, WeekStart which determines the starting day of the week, ShowWeekNumbers which shows the number for each week in the year and more.

Internationalization

The localization of the IgbDatePicker can be controlled through its Locale input.

Here is how a IgbDatePicker with Japanese locale definition would look like:

<IgbDatePicker Locale="ja-JP"></IgbDatePicker>

Styling

The IgbDatePicker component derives from the IgbInput and IgbCalendar component, so it exposes all available CSS parts. See Input Styling and Calendar Styling for reference.

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);
}