DateRange
- DXP Angela (Unlicensed)
Basic UI
DateRange는 사용자가 시작/종료일 2개 날짜를 선택 할 수 있도록 기능을 제공하는 컴포넌트이다. 기본 UI는 다음과 같다.
( 참고: Input Component | Common options )
Function
1. Format
날짜 출력 포멧을 설정 할 수 있다.
2. Default DateRange
옵션에 있는 Default Value 에 원하는 조건을 직접 입력하여 시작일과 종료일의 디폴드 날짜를 설정 할 수 있다.
{{:defaultDates(-7, 0)}} | {{:defaultDates(0, 1 month)}} |
|---|---|
{{:defaultDates(0, 1 year)}} | {{:defaultDates(-1 year,2 months)}} |
|---|---|
3. Max Date Length
날짜 선택 시 사용자가 선택하는 최대 날짜 기간을 설정 할 수 있다. 옵션에 있는 Date Length에 원하는 Max 기간값을 직접 입력하여 설정한다. 사용자가 시작일 또는 종료일을 선택하면 설정해 놓은 날짜 기간 Max값에 조건 내의 날짜만 선택 할 수 있고, 나머지 날짜는 모두 모두 비활성화 된다.
4. Show Shortcuts
Shortcuts 기능을 사용하면, 사용자가 더 편리하게 원하는 날짜를 입력 할 수 있다. Show Shortcuts{ON}하면 다음과 같이 2가지 Sub 옵션을 추가로 설정 할 수 있다. ( 참고: Date | 4. Show Shortcuts )
List Date Shortcuts : 숏컷 목록 선택
Shortcuts Dropdown Selection : 드랍다운으로 숏컷 목록 출력 ON/OFF
Shortcuts Dropdown Selection{ON}
5. Date Picker
Picker 기능을 사용하여 다양한 날짜 입력 타입을 사용 할 수 있다. ( 참고: Date | 5. Date Picker )
→ Date, DateTime, Week, Month, Year
6. Show Navigations
선택한 기간을 기준으로 날짜를 자동 계산 해주는 네비게이션 기능을 제공한다. Show Navigation{ON}으로 설정 시 날짜 선택 필드 양쪽 사이드에 <, > 버튼이 생성된다. 시작일과 종료일을 선택하고 네비게이션을 클릭하면, 설정한 기간만큼 -,+ 날짜가 계산되어 자동으로 출력된다.
Shortcuts Dropdown Selection{OFF}, Shortcuts Navigations{ON}
7. Disable Clear
사용자가 입력한 날짜 정보를 삭제 할 수 있도록 Allow Clear 옵션을 제공한다. 삭제 아이콘 사용 여부를 ON/OFF 할 수 있으며, 각각 설정 했을 경우의 사용자 화면은 다음과 같다. Default는 Allow Clear{ON} 이다.