Blazor 날짜 시간 입력 개요

    Ignite UI for Blazor 사용자가 선택한 입력 요소에서 날짜와 시간을 설정하고 편집할 수 있습니다. 사용자는 편집 가능한 마스크 입력을 사용하여 날짜와 시간 부분을 모두 편집할 수 있습니다. 또한 검증을 활용하기 위해 원하는 디스플레이 및 입력 형식은 물론 최소값과 최대값을 지정할 수 있습니다.

    Usage

    ​IgbDateTimeInput을 사용하기 전에 다음과 같이 등록해야 합니다.

    // in Program.cs file

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

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

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

    Value binding

    구성 요소의 값을 IgbDateTimeInput 설정하는 가장 쉬운 방법은 Date 객체를 속성에 Value 전달하는 것입니다.

    <IgbDateTimeInput @ref="DateTimeInputRef" Value="@Date">
    <IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
</IgbDateTimeInput>

    Keyboard Navigation

    ​IgbDateTimeInput 에는 마우스를 터치하지 않고도 다양한 DateParts 쉽게 증가, 감소 또는 이동할 수 있는 직관적인 키보드 탐색 기능이 있습니다.

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

    Setting formats

    ​IgbDateTimeInput은 다양한 표시 및 입력 형식을 지원합니다.

    ​Intl.DateTimeFormat을 사용하여 and,and short와 medium 같은 long 사전 정의된 형식 옵션을 지원할 수 있습니다 full. 또한 다음과 dd-MM-yy 같이 지원되는 문자로 구성된 사용자 지정 문자열을 허용할 수도 있습니다. 또한 제공되지 않은 DisplayFormat 경우 구성 요소는 그대로 사용합니다 InputFormat.

    Input Format

    아래 표에는 구성 요소에서 지원하는 형식이 나와 있습니다. InputFormat​

    체재 설명
    d 날짜는 편집하는 동안 앞에 0이 붙도록 강제됩니다.
    dd 앞에 0이 명시적으로 설정된 날짜입니다.
    M 월은 편집하는 동안 앞에 0이 붙도록 강제됩니다.
    MM 앞에 0이 명시적으로 설정된 달입니다.
    yy 짧은 연도 형식.
    yyyy 전체 연도 형식입니다.
    h 12시간 형식의 시간은 편집하는 동안 앞에 0이 표시됩니다.
    hh 앞에 0이 명시적으로 설정된 12시간 형식의 시간입니다.
    H 24시간 형식의 시간은 편집하는 동안 앞에 0이 표시됩니다.
    HH 24시간 형식의 시간이며 앞에 0이 명시적으로 설정되어 있습니다.
    m 분은 편집하는 동안 앞에 0이 붙도록 강제됩니다.
    mm 앞에 0이 명시적으로 설정된 분입니다.
    tt 12시간 형식의 AM/PM 섹션입니다.

    특정 입력 형식을 설정하려면 문자열 IgbDateTimeInput로 전달합니다. 이렇게 하면 예상되는 사용자 입력 형식과 . mask 추가적으로, is 로 InputFormat 케일 기반이므로, 아무 것도 제공되지 않으면, 에디터는 디폴트로 설정됩니다 dd/MM/yyyy.

    <IgbDateTimeInput @ref="DateTimeInputRef" InputFormat="dd-MM-yy" DisplayFormat="medium">
    <IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
</IgbDateTimeInput>

    모든 것이 순조롭게 진행되면 브라우저에 다음이 표시됩니다.

    Display format

    날짜 시간 입력은 날짜/시간을 다양한 방식으로 표시하기 위해 미리 정의된 형식을 노출합니다. 아래의 모든 예는 en-US 로케일로 제공됩니다.

    옵션 예
    short 22/7/17, 오전 12:00
    medium 2022년 7월 17일, 오전 12:00:00
    long 2022년 7월 17일 오전 12:00:00(GMT+3)
    full 2022년 7월 17일 일요일 오전 12:00:00 동부 유럽 서머타임
    shortDate 7/17/22
    mediumDate 2022년 7월 17일
    longDate 2022년 7월 17일
    fullDate 2022년 7월 17일 일요일
    shortTime 12:00 AM
    mediumTime 12:00:00 AM
    longTime 오전 12:00:00(그리니치 표준시+3)
    fullTime 오전 12:00:00 동부 유럽 서머타임

    또한 사용자는 다음 표에 설명된 지원 기호를 사용하여 displayFormat 문자열을 구성할 수 있습니다.

    유형 체재 설명 예
    낮 d 최소 자릿수. 7, 17
    dd 제로 패딩. 07, 17
    월 M 최소 자릿수. 3, 10
    MM 제로 패딩. 03, 10
    MMM 약칭 10월
    MMMM 넓은 십월
    MMMMM 좁은 영형
    년도 y 숫자 2022
    yy 두 자리 22
    yyy 숫자 2022
    yyyy 숫자 2022
    1~12시간 h 최소 자릿수 1, 12
    hh 제로 패딩 01, 12
    시간 1~24 H 최소 자릿수 1, 23
    HH 제로 패딩 01, 23
    분 m 최소 자릿수 1, 59
    mm 제로 패딩 01, 59
    두번째 s 최소 자릿수 1, 59
    ss 제로 패딩 01, 59
    기간 t 약칭 오전 오후
    tt 약칭 오전 오후
    ttt 짧은 정오
    tttt 긴 정오
    ttttt 좁은 N

    [!Note] Many locales use the same time period string, irrespective of the format specified. Also, it has an effect only if a 12-hour clock is used.

    Min/max value

    및 Max 속성을 지정 Min 하여 입력을 제한하고 구성 요소의 유효성을 제어할 수 있습니다. 속성과 Value 마찬가지로 유형 string 일 수 있습니다.

    <IgbDateTimeInput @ref="DateTimeInputRef" Min="@MinDate" Max="@MaxDate">
    <IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
</IgbDateTimeInput>

    모든 것이 순조롭게 진행된 경우 값이 지정된 날짜보다 크거나 작으면 구성 요소가 invalid 됩니다. 아래 예를 확인하세요.

    Step up/down

    ​IgbDateTimeInput public StepUp 및 StepDown 메서드를 노출합니다. 현재 설정된 날짜 및 시간의 특정 DatePart 시간을 증가 또는 감소시키며 몇 가지 방법으로 사용할 수 있습니다.

    첫 번째 시나리오에서 특정 DatePart가 메서드에 전달되지 않으면 기본 DatePart는 지정된 InputFormat 구성 요소 구현과 내부 구성 요소 구현에 따라 증가하거나 감소합니다. 두 번째 시나리오에서는 다양한 요구 사항에 적합할 수 있으므로 조작할 DatePart를 명시적으로 지정할 수 있습니다. 또한 두 방법 모두 stepUp/stepDown 단계를 설정하는 데 사용할 수 있는 number 유형의 선택적 delta 매개 변수를 허용합니다.

    또한 는 SpinDelta 각 날짜 시간 세그먼트에 다른 델타를 적용하는 데 사용할 수 있는 속성입니다. 키보드, 마우스 휠 또는 StepUp and StepDown 메서드로 회전할 때 delta 매개 변수가 제공되지 SpinDelta 않는 한 적용됩니다.

    아래 예에서 시도해 보세요.

    Styling

    ​IgbDateTimeInput 구성 요소는 IgbInput 구성 요소에서 파생되므로 사용 가능한 모든 CSS 부분을 노출합니다. 참조는 입력 스타일을 참조하세요.

    API References

    Additional Resources