데이터피커

단일

<%- include(`${_src}/views/components/kendo/kendo-datepicker.ejs`, {
  id: 'testPicker1',
  startName: 'startDate',
  endName: 'endDate',
  size: 'sm', // sm ? md(기본 - 사이즈 지정 X) ? lg
  opt: {
    max: new Date() // 오늘 이후 날짜 비활성화 (미지정 시 제한 없음)
  }
}) %>

// 또는 options 래퍼 사용
<%- include(`${_src}/views/components/kendo/kendo-datepicker.ejs`, {
  options: {
    id: 'testPicker1',
    startName: 'startDate',
    endName: 'endDate',
    size: 'sm',
    opt: {
      max: new Date()
    }
  }
}) %>

  • height 28px / size-sm

  • height 32px / 기본 (사이즈 지정 X) / 오늘날짜 이후 비활성

  • height 36px / size-lg

단일 날짜 선택 (kendo-datepicker-single)

<%- include(`${_src}/views/components/kendo/kendo-datepicker-single.ejs`, {
  id: 'testPickerSingle1',
  name: 'singleDate',
  size: 's', // 's' | 'm' | 'l' | 'size-s' | 'size-m' | 'size-l' (기본: 'm')
  placeholder: '날짜를 선택하세요',
  dataName: 'singleDate',
  options: {}, // kendo DatePicker 옵션 객체
  disabled: false,
  wrapClass: '' // 추가 클래스
}) %>

  • size-s

  • size-m (기본)

  • size-l

  • size-l, 오늘 이전 날짜, 비활성화

파라미터 설명

- id: 선택 (string) - input 요소의 id 속성
- name: 선택 (string) - input 요소의 name 속성
- size: 선택 (string) - 's' | 'm' | 'l' | 'size-s' | 'size-m' | 'size-l' (기본: 'm')
- wrapClass: 선택 (string) - 추가 클래스명
- placeholder: 선택 (string) - placeholder 텍스트
- dataName: 선택 (string) - data-name 속성 값
- options: 선택 (object) - kendo DatePicker 옵션 객체 (함수는 넣지 말 것)