Blazor 날짜 선택기 구성 요소 개요

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

    Ignite UI for Blazor Date Picker Component를 사용하면 사용자가 월별 보기 캘린더 드롭다운 또는 편집 가능한 입력 필드를 통해 단일 날짜를 선택할 수 있습니다. 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

    구성 요소를 시작하려면 IgbDatePicker 먼저 다음과 같이 모듈을 등록해야 합니다.

    // in Program.cs file

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

    또한 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다 IgbDatePicker. Blazor 웹 어셈블리 프로젝트의 wwwroot/index.html 파일 또는 Blazor 서버 프로젝트의 Pages/_Host.cshtml 파일에 다음을 배치해야 합니다.

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

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

    Using the Blazor Date Picker Component

    Display Date Picker

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

    <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>

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

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

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

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

    사용자 정의 작업 버튼

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

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

    Keyboard Navigation

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

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

    Examples

    Dialog Mode

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

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

    Display and input format

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

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

    DisplayFormat 초점이 맞지 않을 때 선택기의 입력을 형식화하는 데 사용됩니다. no DisplayFormat가 제공되지 않으면 선택기는 를 InputFormat 그대로 DisplayFormat 사용합니다.

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

    Increment and decrement

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

    <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

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

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

    Calendar Specific settings

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

    Internationalization

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

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

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

    Styling

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

    API References

    Additional Resources