Basic UI

사용자가 날짜 정보를 선택하여 입력할 수 있도록 달력 날짜 선택 기능을 제공하는 컴포넌트로 기본 UI는 다음과 같다.

( 참고: https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1543733287/Input+Component#Common-options )

...

...

Function

1. Format

날짜 출력 포멧을 설정 할 수 있다.

...

2. Default

...

Value

디폴드 날짜를 셋팅 할 수 있다. 옵션에 있는 Default Value 에 원하는 조건을 직접 입력하여 설정한다.

{{:today}} or {{:defaultDates(0)}}	{{:defaultDates(-1)}}

{{:defaultDates(-1 month)}}	{{:defaultDates(1 year)}}

3. Disabled

...

Date

날짜 선택 시 선택 불가한 조건을 설정 할 수 있다. 옵션에 있는 Disabled Start Value와 Disabled End Value에 원하는 조건을 직접 입력하여 설정한다. 아래 예시는 옵션 2개를 모두 사용한 경우이다.

Disabled Start Value = {{:defaultDates(-3)}}	Disabled End Value = {{:defaultDates(3)}}

4.

...

Show Shortcuts

날짜 Shortcuts 기능을 사용하면, 사용자가 더 편리하게 원하는 날짜를 입력 할 수 있다. 예를 들어 Show Shortcuts{ON}하면 다음과 같이 2가지 Sub 옵션을 추가로 설정 할 수 있다.

• List Date Shortcuts : 숏컷 목록 선택

• Shortcuts Dropdown Selection : 드랍다운으로 숏컷 목록 출력 ON/OFF

List Date Shortcuts{"3일"} 로 설정하면, Date 컴포넌트 좌측에 날짜 자동 계산 버튼이 생성된다. [3일] 버튼을 클릭하면 Date컴포넌트에 날짜가 자동으로 계산되어 출력된다. Shortcuts 날짜 계산은 금일(today)를 포함하여 연산된다.

...

( Today = 2021.06.18 | Click [3일] > 2021.06.16 )

...

Image Added

Image Added

Image Added

Image Added

5. Date Picker

Picker 기능을 사용하여 다양한 날짜 입력 타입을 사용 할 수 있다. Date 컴포넌트에서 선택 가능한 Picker 옵션은 Date, DateTime, Week, Month, Year 가 있으며, 옵션 사용 시 출력 형태는 다음과 같다.

...

DateRange

사용자가 시작/종료일 2개의 날짜를 선택 할 수 있도록 기능을 제공하는 컴포넌트로 기본 UI는 다음과 같다.

...

Default DateRange

옵션에 있는 Default Value 에 원하는 조건을 직접 입력하여 시작일과 종료일의 디폴드 날짜를 설정 할 수 있다.

...

{{:defaultDates(-7, 0)}}

...

{{:defaultDates(0, 1 month)}}

...

...

{{:defaultDates(0, 1 year)}}

...

{{:defaultDates(-1 year,2 months)}}

...

Max Date Length

날짜 선택 시 사용자가 선택하는 최대 날짜 기간을 설정 할 수 있다. 옵션에 있는 Date Length에 원하는 Max 기간값을 직접 입력하여 설정한다. 사용자가 시작일 또는 종료일을 선택하면 설정해 놓은 날짜 기간 Max값에 조건 내의 날짜만 선택 할 수 있고, 나머지 날짜는 모두 모두 비활성화 된다.

...

6. Disable Clear

사용자가 입력한 날짜 정보를 삭제 할 수 있도록 Allow Clear 옵션을 제공한다. 삭제 아이콘 사용 여부를 ON/OFF 할 수 있으며, 각각 설정 했을 경우의 사용자 화면은 다음과 같다. Default는 Allow Clear{ON} 이다.

...