React 날짜 선택기 개요
날짜 선택기 구성 요소를 사용하면 사용자는 드롭다운 달력 UI를 사용하여 일, 월, 연도를 직관적으로 선택할 수 있습니다. 이는 애플리케이션 사용자가 특정 날짜를 선택해야 할 때 유용할 수 있으며 여러 편집기를 결합하여 날짜 범위 UI를 만들 수 있습니다.
React Date Picker Example
이 샘플은 단일 날짜를 선택하는 옵션을 사용하여 IgrDatePicker 만드는 방법을 보여줍니다.
Dependencies
날짜 선택기 구성 요소를 설치할 때 코어 및 입력 패키지도 설치해야 합니다.
npm install --save igniteui-react-core
npm install --save igniteui-react-inputs
npm install --save igniteui-react-layouts
Component Modules
날짜 선택기 구성 요소를 사용하려면 다음 모듈을 등록해야 합니다.
import { IgrDatePickerModule } from 'igniteui-react-inputs';
IgrDatePickerModule.register();
Usage
React Date Picker 편집기 구성 요소는 텍스트 영역, 달력 드롭다운 버튼 및 지우기 버튼의 세 가지 기본 부분으로 구성됩니다. 이러한 영역은 아래에 설명되어 있습니다.
텍스트 영역: 편집기의
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 입니다.
편집
다음 예에서는 IgrDatePicker에서 편집을 활성화하는 방법을 보여줍니다.
Date Limits
다음 예에서는 IgrDatePicker에서 선택한 날짜를 제한하는 방법을 보여줍니다.
Date Formats
다음 예에서는 IgrDatePicker에서 긴 날짜를 적용하는 방법을 보여줍니다.
Date Ranges
다음 예제에서는 여러 IgrDatePicker 컨트롤을 결합하는 방법을 보여줍니다.
API References
다음은 위 섹션에서 언급된 API 멤버 목록입니다.
IgrDatePickericonColorallowTextInputdateFormatfirstDayOfWeekformatStringlabelminDatemaxDateplaceholdershowClearButtonshowTodayButtonshowWeekNumbersfirstWeekOfYearopenOnFocusvaluetextColorTextFontFamilyTextFontSizeTextFontStyleTextFontWeight