DatePicker 날짜 선택기

날짜 선택기입니다. date / month / year / datetime / range 다섯 가지 모드: 패널 안에서 단계적으로 드릴다운 (날짜 → 월 → 연도) 할 수 있고, datetime은 캘린더 아래에 시간 열 (시/분/초, 롤러 또는 클릭 전환, 확인 시 날짜와 병합) 을 붙이며, range는 두 단계 선택 (첫 클릭으로 시작 날짜를 정하고 하이라이트, 두 번째 클릭으로 구간을 정규화한 뒤 사이 날짜를 하이라이트) 입니다. 패널은 body에 마운트되며, format이 표시 형식을 제어합니다.

날짜 선택

<template>
  <div class="demo-col" style="gap: 16px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhDatePicker v-model="date" placeholder="날짜 선택" format="yyyy년 MM월 dd일" clearable />
      <LhDatePicker v-model="month" mode="month" placeholder="월 선택" size="small" />
      <LhDatePicker v-model="year" mode="year" placeholder="연도 선택" size="large" />
      <LhDatePicker v-model="datetime" mode="datetime" placeholder="날짜 및 시간 선택" disabled />
      <LhDatePicker v-model="date" placeholder="읽기 전용" readonly />
    </div>
    <LhDatePicker
      v-model="range"
      mode="range"
      range-separator="까지"
      placeholder="날짜 구간 선택 (두 번 클릭)"
      :cell-class-name="cellClass"
      popper-class="demo-popper"
    />
    <p class="demo-note">
      날짜: {{ fmt(date) }} | 월: {{ fmt(month) }} | 연도: {{ fmt(year) }} | 날짜 및 시간: {{ fmt(datetime) }}
    </p>
    <p class="demo-note">날짜 구간 (rangeSeparator="까지", 주말 빨강): {{ fmtRange(range) }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    date: new Date(2026, 9, 3),
    month: new Date(2026, 9, 1),
    year: new Date(2026, 0, 1),
    datetime: null,
    range: null,
  }),
  methods: {
    fmt(v) {
      return v instanceof Date ? v.toLocaleString('zh-CN', { hour12: false }) : '(선택 안 함)'
    },
    fmtRange(v) {
      if (!Array.isArray(v) || v.length !== 2) return '(선택 안 함)'
      const [a, b] = v
      const s = (d) => (d instanceof Date ? d.toLocaleString('zh-CN', { hour12: false }) : '(선택 안 함)')
      return `${s(a)} ~ ${s(b)}`
    },
    cellClass(date) {
      return date.getDay() === 0 || date.getDay() === 6 ? 'demo-cell-weekend' : ''
    },
  },
}
</script>

Props

프로퍼티	설명	타입	기본값
v-model	현재 선택값	Date \| [Date, Date] \| null	—
mode	모드: 날짜 / 월 / 연도 / 날짜 및 시간 / 날짜 구간	'date' \| 'month' \| 'year' \| 'datetime' \| 'range'	'date'
size	크기	'small' \| 'medium' \| 'large'	'medium'
disabled / clearable / readonly	비활성화 / 지우기 가능 / 읽기 전용	boolean	false / true / true
placeholder	자리표시 텍스트	string	언어 팩
format	표시 형식 (yyyy-MM-dd, yyyy-MM 등)	string	'yyyy-MM-dd'
rangeSeparator	날짜 구간 모드의 구분 기호 텍스트	string	'~'
cellClassName	사용자 정의 셀 클래스명	(date: Date) => string	—
popperClass	팝업 레이어 추가 클래스명	string	—
teleportTarget	팝업 레이어 마운트 대상	string \| HTMLElement	'body'
sx	sx 레이아웃 단축 프로퍼티	—	—

Events

input(v-model), change (value)

접근성

트리거는 role="combobox" + aria-expanded, 패널은 role="grid"이며, datetime 모드의 시간 열은 role="spinbutton"으로 aria-valuenow/min/max를 지정합니다. LhFormItem 안에서 검증 실패 시 자동으로 aria-invalid가 적용됩니다.