Slate 날짜와 시간 위젯

Time에는 Calendar, Date Picker, Date Range Picker와 Timeline이 있습니다. 아래 표에서 상호작용값은 사용자의 현재 선택을 반영하며, 별도 표시가 없는 속성은 편집자가 구성하는 설정값입니다.

Calendar

List는 시작 시각으로 다시 정렬하지 않고 제공한 이벤트 순서대로 표시합니다. Time은 각 이벤트가 차지하는 시간 블록으로 표시합니다.

종일 이벤트는 all-day 영역에서 시작과 끝 시각 사이에 완전히 포함되는 날에만 표시하며 선택값에도 조정된 날짜 경계를 반영합니다. 예를 들어 1월 1일 03:00부터 1월 3일 03:00까지인 종일 이벤트는 1월 1일 00:00부터 1월 3일 00:00까지로 표시합니다.

Date Picker

날짜만 표시하는 예입니다.

{"disabled":false,"displayFormat":"MM/DD/YYYY","timeEnabled":false,"value":"2014-09-10T05:00:00.000Z"}

시간 선택과 별도 출력 형식을 사용하는 예입니다.

{"disabled":false,"timeEnabled":true,"value":"2014-09-10 13:00","valueFormat":"YYYY-MM-DD HH:mm"}

기본 구성에는 valueFormat이 명시적으로 YYYY-MM-DD로 들어 있습니다. 형식 미지정 시의 ISO 8601 조건과 구분합니다.

{"disabled":false,"timeEnabled":false,"value":"","valueFormat":"YYYY-MM-DD"}

Date Range Picker

단축 구간은 ["2016-05-01","2016-05-10"]처럼 지정하며 시각도 포함할 수 있습니다. 다음은 과거 구간을 선택하는 예입니다.

{
  "disabled":false,
  "displayFormat":"YYYY-MM-DD",
  "fromDateValue":"2016-09-10T05:00:00.000Z",
  "maxDate":"2020-01-01",
  "minDate":"2000-01-01",
  "shortcutsEnabled":false,
  "timeEnabled":false,
  "toDateValue":"2016-10-10T05:00:00.000Z"
}

시간과 Q1~Q4 단축 구간을 포함한 예입니다. 단축 구간의 날짜는 아래 배열로 직접 정의합니다.

{
  "disabled":false,
  "displayFormat":"YYYY-MM-DD hh:mm:ss a",
  "fromDateValue":"2016-09-10T05:13:11.001Z",
  "shortcutLabels":["Q1","Q2","Q3","Q4"],
  "shortcutRanges":[
    ["2015-10-01","2015-12-31"],
    ["2016-01-01","2016-03-31"],
    ["2016-04-01","2016-06-30"],
    ["2016-07-01","2016-09-30"]
  ],
  "shortcutsEnabled":true,
  "timeEnabled":true,
  "timePickerPrecision":0,
  "toDateValue":"2016-10-10T05:14:11.002Z"
}

기본값은 다음과 같습니다.

{"disabled":false,"displayFormat":"YYYY-MM-DD","fromDateValue":null,"shortcutsEnabled":false,"timeEnabled":false,"timePickerPrecision":0,"toDateValue":null}

Timeline

다음 예에서 query1은 dates와 titles 배열을 반환합니다.

{
  "cssClasses":["green","red","green"],
  "dates":"{{query1.dates}}",
  "details":["this first event was spectacular",null,"the third event was alright"],
  "titles":"{{query1.titles}}"
}

{"cssClasses":[],"dates":[],"details":[],"titles":[]}