Blazor 날짜 선택기 개요
날짜 선택기 구성 요소를 사용하면 사용자는 드롭다운 달력 UI를 사용하여 일, 월, 연도를 직관적으로 선택할 수 있습니다. 이는 애플리케이션 사용자가 특정 날짜를 선택해야 할 때 유용할 수 있으며 여러 편집기를 결합하여 날짜 범위 UI를 만들 수 있습니다.
Blazor Date Picker Example
이 샘플은 단일 날짜를 선택하는 옵션을 사용하여 IgbDatePicker
만드는 방법을 보여줍니다.
Component Modules
날짜 선택기 구성 요소를 사용하려면 다음 모듈을 등록해야 합니다.
// in Program.cs file
builder.Services.AddIgniteUIBlazor(
typeof(IgbDatePickerModule));
Usage
Blazor 날짜 선택기 편집기 구성 요소는 텍스트 영역, 달력 드롭다운 버튼, 지우기 버튼 등 세 가지 기본 부분으로 구성됩니다. 이러한 영역은 아래에 설명되어 있습니다.
텍스트 영역: 편집기의
Value
속성에 저장된 선택한 날짜를 표시합니다.달력: 달력 버튼을 클릭하면 날짜 선택기의 달력 드롭다운이 열립니다. 현재 선택한
Value
있는 경우 해당 월이 표시되는 달력이 열립니다.Value
지정하지 않으면 달력에 현재 날짜에 해당하는 월이 표시됩니다. 상단의 월을 클릭하면 월 목록이 표시되며, 해당 연도에도 동일하게 적용됩니다. 월과 연도 시각화의 왼쪽과 오른쪽에는 표시된 달을 시간순으로 늘리거나 줄이는 화살표 버튼도 있습니다.지우기 버튼: 'x' 아이콘은 현재 값을 지웁니다.
재산 | 유형 | 설명 |
---|---|---|
IconColor |
끈 | 달력 버튼의 색상을 변경합니다. |
AllowTextInput |
부울 | 날짜 선택기의 값을 입력하고 이 속성을 true로 전환하여 수정할 수 있습니다. |
DateFormat |
열거형 | 기본값은 DateShort입니다(예: 'mm/dd/yyyy'). DateLong으로 설정하면 편집기에 표시되는 날짜가 예를 들어 2021년 4월 14일 수요일과 같이 표시됩니다. |
FirstDayOfWeek |
열거형 | 기본값은 일요일입니다. 특정 요일은 달력의 각 주별 행(예: 월요일부터 일요일)의 첫 번째 날로 사용됩니다. |
FormatString |
끈 | DateShort를 사용하면 날짜 형식을 'dd/mm/yyyy'와 같이 구성할 수 있습니다. 참고로,DateFormat 의 DateLong과FormatString 그런 다음 설정됩니다.DateFormat 무시됩니다. |
Label |
끈 | 날짜 선택기의 왼쪽 위 모서리에 있는 날짜 위에 사용자 정의 텍스트를 표시합니다. |
MinDate |
날짜 시간 | 이전 날짜를 선택하거나 볼 수 없도록 제한합니다. |
MaxDate |
날짜 시간 | 이후 날짜를 선택하거나 볼 수 없도록 제한합니다. |
Placeholder |
끈 | 달력의 편집 부분 내의 값이 지워질 때 표시되는 사용자 정의 문자열입니다. |
ShowClearButton |
부울 | 기본값은 true입니다. 지우기 버튼은 달력 버튼 바로 왼쪽에 있으며 X로 시각화됩니다. 클릭하면Value 날짜 선택기의 지우기 버튼의 가시성을 켜거나 끌 수 있습니다. |
ShowTodayButton |
부울 | 오늘은 달력을 연 날짜 바로 아래에 있습니다. 클릭하면 현재 날짜가 선택됩니다. 오늘 버튼의 표시 여부를 켜거나 끌 수 있습니다. |
ShowWeekNumbers |
부울 | 주 번호는 날짜 선택기의 드롭다운 부분에서 모든 날짜 행 왼쪽에 숫자로 표시될 수 있습니다. 주 번호의 표시 여부를 켜거나 끌 수 있습니다. |
FirstWeekOfYear |
열거형 | 전체 연도에 대한 주의 시작 번호를 구성합니다. FirstDay, FirstFourDayWeek, FirstFullWeek로 설정할 수 있습니다. |
OpenOnFocus |
부울 | 기본적으로 날짜 선택기의 드롭다운 부분은 한 번 클릭하면 열리므로 사용자는 달력 버튼을 클릭하여 달력을 드롭다운해야 합니다. |
Value |
날짜 | 날짜 선택기의 값을 설정하고 드롭다운 달력에서 선택합니다. |
사용자는 컨트롤의 다양한 텍스트 속성을 사용하여 날짜 선택기의 글꼴을 사용자 정의할 수도 있습니다. TextColor
, TextFontFamily
, TextFontSize
, TextFontStyle
및 TextFontWeight
입니다.
편집
다음 예에서는 IgbDatePicker
에서 편집을 활성화하는 방법을 보여줍니다.
Date Limits
다음 예에서는 IgbDatePicker
에서 선택한 날짜를 제한하는 방법을 보여줍니다.
Date Formats
다음 예에서는 IgbDatePicker
에서 긴 날짜를 적용하는 방법을 보여줍니다.
Date Ranges
다음 예에서는 여러 IgbDatePicker
컨트롤을 결합하는 방법을 보여줍니다.
API References
다음은 위 섹션에서 언급된 API 멤버 목록입니다.
IgbDatePicker
IconColor
AllowTextInput
DateFormat
FirstDayOfWeek
FormatString
Label
MinDate
MaxDate
Placeholder
ShowClearButton
ShowTodayButton
ShowWeekNumbers
FirstWeekOfYear
OpenOnFocus
Value
TextColor
TextFontFamily
TextFontSize
TextFontStyle
TextFontWeight