(Deprecated) date picker 옵션설명 v1

Deprecated

                                                      Version 1.3.1

DatePicker Options

    var datePicker = new DatePicker({
        element: '#input-datepicker',
        dateFormat: 'yyyy년 mm월 dd일', // v1.4.0 updated
        date: {
            year: 2015,
            month: 11,
            date: 17
        },
        selectableClassName: 'mySelectableClass',
        selectedClassName: 'selected',
        selectableRanges: [
            [{year: 2015, month: 11, date: 17}, {year: 2016, month: 2, date: 15}],
            [{year: 2016, month: 4, date: 3}, {year: 2016, month:5, date: 1}],
            [{year: 2016, month: 3, date: 5}, {year: 2016, month:3, date: 17}],
            [{year: 2016, month: 2, date: 24}, {year: 2016, month:2, date: 26}]
        ],
        showAlways: false,
        useTouchEvent: true,
        openers: [],
        pos: {left: 100, top: 100, zIndex: 9999},
        timePicker: new tui.component.TimePicker()
    }, cal);

1. element: 인풋 엘리먼트를 지정합니다.

2. dateFormat: 날짜 표현 형식을 지정합니다.(yyyy/yy/y/dd/d/mm/m) 지정하지 않으면 'yyyy-mm-dd'입니다.

3. date: 기본값 날짜를 지정합니다. 지정하지 않으면 오늘 날짜 입니다.

4. selectableClassName: 선택 가능한 날짜에 입힐 css 클래스를 지정합니다. 지정하지 않으면 'selectable'입니다.

5. selectedClassName: 선택된 날짜에 입힐 css 클래스를 지정합니다. 지정하지 않으면 'selected'입니다.

6. selectableRanges: 선택 가능한 날짜의 범위들을 등록할 수 있습니다. 각 범위들은 [시작날짜, 끝날짜]로 구성됩니다. range가 비었을 경우 1970년 ~ 2999년까지 기본 범위로 설정됩니다.

7. showAlways: 데이트 피커의 기본 동작은 캘린더가 아닌 다른 영역을 클릭하였을 때 캘린더가 사라지도록 되어있습니다. 이 옵션을 true로 설정하면 캘린더 이외의 영역을 클릭하여도 캘린더가 사라지지 않습니다.

8. useTouchEvent: 데이트피커는 모바일/태블릿 등 터치 이벤트를 사용할 수 있는 환경에서는 click/mousedown 이벤트 대신 터치 이벤트를 사용합니다. 이 옵션을 false로 설정하면 어느 환경에서든 항상 click/mousedown 이벤트만 사용합니다.

9. openers: 오픈 버튼을 등록합니다. 배열로 등록을 하여야 합니다. ex) ['#btn1', '#btn2']

10. pos: 레이어의 위치값 및 zindex를 지정합니다. ex) {left: 100, top: 100, zIndex: 8888}

11. timePicker: 타임피커 객체를 주입합니다.

---

TimePicker Options

    var timePicker = new tui.component.TimePicker({
        defaultHour: 0,
        defaultMinute: 0,
        inputElement: '#input',   // 데이트피커에 주입할 땐 인풋 엘리먼트는 설정하지 않아도 됩니다.
        hourStep: 1,
        minuteStep: 1,
        hourExclusion: [],
        minuteExclusion: [],
        showMeridian: true,
        position: {x: 0, y: 0}    // 데이트피커에 주입할 땐 포지션은 설정하지 않습니다.
    });

1. defaultHour, defaultMinute : 기본 시간 값

2. inputElement : 데이트피커에 주입 하려는 경우에는 input element를 지정하지 않아도 됩니다.

3. hourStep, minuteStep : 시각/분 증가/감소 값을 설정합니다.

4. hourExclusion, minuteExclusion : 배열로 지정합니다. 증가/감소 도중 해당 값이 포함된 경우에는 건너 뜁니다. ex) [11, 13]

5. showMeridian : 12시간 형식 AM/PM을 설정합니다.

6. position : 타임피커 엘리먼트의 위치를 지정합니다. 데이트피커에 주입할 땐 설정하지 않습니다.

• 참고
  데이트피커에 주입된 경우,
  datepicker가 open이 된 상태에서 setHour, setMinute, setTime 메서드를 통해서 선택한 시간을 조정 할 수 있습니다.