Blazor 날짜 시간 입력 개요
Ignite UI for Blazor 사용하면 사용자가 선택한 입력 요소에서 날짜와 시간을 설정하고 편집할 수 있습니다. 사용자는 편집 가능한 마스크된 입력을 사용하여 날짜와 시간 부분을 모두 편집할 수 있습니다. 또한 원하는 표시 및 입력 형식과 최소값 및 최대값을 지정하여 유효성 검사를 활용할 수 있습니다.
Usage
사용하기IgbDateTimeInput 전에 다음과 같이 등록해야 합니다:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbDateTimeInputModule));
스타일링을 컴포넌트에 적용하려면 추가 CSS 파일을 연결해야 합니다IgbDateTimeInput. 다음 내용은 Blazor Web Assembly 프로젝트의 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 / CMD + ← | 날짜/시간 부분의 처음으로 이동 - 현재 부분 또는 왼쪽 부분 |
| CTRL / CMD + → | 날짜/시간 섹션의 끝으로 이동 - 현재 또는 오른쪽 섹션 |
| 날짜/시간 부분에 집중 + ↓ | 날짜/시간 부분을 감소시킵니다. |
| 날짜/시간 부분에 집중 + ↑ | 날짜/시간 부분을 증가시킵니다. |
| CTRL / CMD +; | 현재 날짜/시간을 편집기의 값으로 설정합니다. |
Setting formats
IgbDateTimeInput다양한 디스플레이 및 입력 포맷을 지원합니다.
Intl.DateTimeFormat을 사용하여 andlong,short andmedium와 같은full 사전 정의된 형식 옵션을 지원합니다. 또한, 지원되는 문자들로 구성된 맞춤형 문자열도 수용할 수 있습니다.dd-MM-yy 또한, 만DisplayFormat 약 NO가 제공된다면, 컴포넌트는 해당 역할을 사용할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를 설정합니다. 또한, 로케이션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
입력을 제한하고 컴포넌트의 유효성을 제어하는 속성 를Min 지정할Max 수 있습니다. 부동산과 마찬가지로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대중과StepUp 방법을 폭로합니다StepDown. 현재 설정된 날짜와 시간 중 특정DatePart 금액을 증가 또는 감소시키며, 여러 가지 방식으로 사용할 수 있습니다.
첫 번째 시나리오에서는 특정 DatePart가 메서드에 전달되지 않으면, 기본 DatePart가 지정된InputFormat 내용과 내부 구성 요소 구현에 따라 증가하거나 감소합니다. 두 번째 경우에는 어떤 DatePart를 조작할지 명시적으로 지정할 수 있는데, 이는 서로 다른 요구사항에 맞을 수 있습니다. 또한 두 방법 모두 stepUp/stepDown 단계를 설정하는 데 사용할 수 있는 선택적delta 타입 매개변수를 허용합니다.
또한,SpinDelta는 각 날짜 시간 구간에 다른 델타를 적용하는 데 사용할 수 있는 속성입니다. 키보드, 마우스 휠 또는StepUpStepDown and 메서드로 회전할 때 적용되며, 델타 파라미터가 제공SpinDelta 되지 않는 한 우선순위가 적용됩니다.
아래 예에서 시도해 보세요.
Styling
컴포넌트는IgbDateTimeInput 내부 요소의 거의 모든 CSS 파트를 노출합니다. 다음 표는 노출된 모든 CSS 부품을 나열합니다:
| 이름 | 설명 |
|---|---|
container |
모든 기본 입력 요소를 보유하는 기본 래퍼입니다. |
input |
기본 입력 요소입니다. |
label |
기본 레이블 요소입니다. |
prefix |
접두사 래퍼. |
suffix |
접미사 래퍼. |
helper-text |
도우미 텍스트 래퍼입니다. |
igc-date-time-input::part(input) {
background-color: var(--ig-primary-100);
border-color: var(--ig-secondary-500);
box-shadow: none;
}
igc-date-time-input::part(prefix),
igc-date-time-input::part(suffix) {
color: var(--ig-primary-600-contrast);
background-color: var(--ig-primary-500);
border-color: var(--ig-secondary-500);
}