Components - Date Picker

comment

레이아웃 예제

  • 타입: DualDatePicker (범위 선택형), MonthPicker (연/월 선택형), DefaultDatePicker (기본 날짜 선택형), TimePicker (시간 선택형)
  • JavaScript 초기화: new DateTimePickers.DualDatePicker({}) 형태로 초기화, 각 타입별로 옵션 설정 가능
  • 필수 ID (타입별):
    • DualDatePicker: inputId, dropdownId, leftCalendarId, rightCalendarId
    • MonthPicker: inputId, dropdownId, yearMonthListId
    • DefaultDatePicker: inputId, dropdownId, calendarId
    • TimePicker: inputId, dropdownId, timeListId
  • 날짜 범위 제한: minDate, maxDate 옵션으로 선택 가능한 날짜 범위 제한 (문자열 형식: 'YYYY-MM-DD' 또는 'YYYY-MM'). minYear, maxYear 옵션으로 연도 범위 제한 가능
  • 적용 버튼: 타입별로 다른 옵션명 사용
    • DefaultDatePicker, TimePicker: applyBtnId
    • MonthPicker: applyButtonId
    • DualDatePicker: applyPresetId
    적용 버튼 모드 사용 시 날짜 선택 후 적용 버튼 클릭 시 반영
  • Preset 기능: DualDatePicker에서 presetLabelId, applyPresetId로 프리셋 기능 사용 가능 (어제, 오늘, 최근 7일, 최근 30일, 지난주, 이번달, 지난달)
  • Disabled 상태: is-disabled 클래스를 date-input-container에 추가하여 비활성화 처리
Date Picker

HTML 구조

<div class="date-picker-container">
  <div class="date-input-container date-input-container--dual">
    <span class="date-preset-label" id="presetLabel">날짜 선택 범위</span>
    <input
      type="text"
      id="dualRangeInput"
      class="date-input"
      placeholder="날짜를 선택하세요"
      readonly
      aria-label="날짜 범위 선택"
      aria-controls="dualRangeDropdown"
      aria-expanded="false"
    />
  </div>

  <div class="picker-dropdown" id="dualRangeDropdown" role="dialog" aria-label="날짜 범위 선택 달력">
    <div class="picker-content">
      <div class="dual-calendars">
        <div class="each-calendar" id="leftCalendar"></div>
        <div class="each-calendar" id="rightCalendar"></div>
      </div>

      <div class="presets-container">
        <div class="presets" role="group" aria-label="날짜 범위 프리셋">
          <button class="presets__button" data-preset="yesterday" aria-pressed="false" role="button">어제</button>
          <button class="presets__button" data-preset="today" aria-pressed="false" role="button">오늘</button>
          <button class="presets__button" data-preset="last7" aria-pressed="false" role="button">최근 7일</button>
          <button class="presets__button" data-preset="last30" aria-pressed="false" role="button">최근 30일</button>
          <button class="presets__button" data-preset="prevW" aria-pressed="false" role="button">지난주</button>
          <button class="presets__button" data-preset="thisM" aria-pressed="false" role="button">이번달</button>
          <button class="presets__button" data-preset="prevM" aria-pressed="false" role="button">지난달</button>
        </div>
        <button class="ui-button ui-button--fix ui-button--primary" id="applyPreset">적용</button>
      </div>
    </div>
  </div>
</div>
Date Picker - 연/월 선택형

HTML 구조

<div class="date-picker-container">
  <div class="date-input-container">
    <input
      type="text"
      id="monthPicker"
      class="date-input"
      placeholder="기준 월을 선택하세요"
      readonly
      aria-label="연월 선택"
      aria-controls="yearMonthDropdown"
      aria-expanded="false"
    />
  </div>

  <div class="picker-dropdown" id="yearMonthDropdown" role="dialog" aria-label="연월 선택 달력">
    <div class="year-month-list" id="yearMonthList"></div>

    <div class="picker-footer">
      <button class="ui-button ui-button--primary" id="applyYearMonth">적용</button>
    </div>
  </div>
</div>
Date Picker - 기본 날짜 선택형

HTML 구조

<div class="date-picker-container">
  <div class="date-input-container">
    <input
      type="text"
      id="singleDatePicker"
      class="date-input"
      placeholder="날짜를 선택하세요"
      readonly
      aria-label="날짜 선택"
      aria-controls="singleCalendarDropdown"
      aria-expanded="false"
    />
  </div>

  <div class="picker-dropdown" id="singleCalendarDropdown" role="dialog" aria-label="날짜 선택 달력">
    <div class="each-calendar" id="singleCalendar"></div>
  </div>
</div>
Date Picker - 시간 선택형

HTML 구조

<div class="date-picker-container">
  <div class="date-input-container">
    <input
      type="text"
      id="timePicker"
      class="time-input"
      placeholder="HH:MM"
      readonly
      aria-label="시간 선택"
      aria-controls="timeDropdown"
      aria-expanded="false"
    />
  </div>

  <div class="picker-dropdown" id="timeDropdown" role="dialog" aria-label="시간 선택">
    <div class="time-list" id="timeList"></div>
    <div class="picker-footer">
      <button class="ui-button ui-button--primary" id="applyTime">적용</button>
    </div>
  </div>
</div>
Date Picker - Disabled

HTML 구조

<div class="date-picker-container">
  <div class="date-input-container is-disabled">
    <input
      type="text"
      id="datePickerDisabled"
      class="date-input"
      placeholder="날짜를 선택하세요"
      readonly
      disabled
      aria-label="날짜 선택 (비활성화됨)"
      aria-disabled="true"
      aria-controls="pickerDropdownDisabled"
      aria-expanded="false"
    />
  </div>

  <div class="picker-dropdown" id="pickerDropdownDisabled" role="dialog" aria-label="날짜 선택 달력">
    <div class="each-calendar" id="calendarDisabled"></div>
  </div>
</div>