DatePicker 날짜 선택기

LhDatePicker는 날짜 및 시간을 선택하기 위한 선택기 컴포넌트로, 날짜, 월, 연도 등 다양한 선택 모드를 지원합니다.

기본 사용법

vue

<script setup lang="ts">
import { ref } from 'vue'

const baseDate = ref(new Date(2024, 0, 1))
</script>

<template>
  <LhDatePicker v-model="baseDate" />
</template>

vue

<script>
export default {
  data() {
    return {
      baseDate: new Date(2024, 0, 1),
    }
  },
}
</script>

<template>
  <LhDatePicker v-model="baseDate" />
</template>

비활성화 상태

vue

<script setup lang="ts">
import { ref } from 'vue'

const disabledDate = ref(new Date())
</script>

<template>
  <LhDatePicker v-model="disabledDate" disabled />
</template>

vue

<script>
export default {
  data() {
    return {
      disabledDate: new Date(),
    }
  },
}
</script>

<template>
  <LhDatePicker v-model="disabledDate" disabled />
</template>

날짜 형식

vue

<script setup lang="ts">
import { ref } from 'vue'

const formatDate = ref(new Date())
</script>

<template>
  <LhDatePicker v-model="formatDate" format="MM/dd/yyyy" />
</template>

vue

<script>
export default {
  data() {
    return {
      formatDate: new Date(),
    }
  },
}
</script>

<template>
  <LhDatePicker v-model="formatDate" format="MM/dd/yyyy" />
</template>

삭제 버튼

vue

<script setup lang="ts">
import { ref } from 'vue'

const clearDate = ref(new Date())
</script>

<template>
  <LhDatePicker v-model="clearDate" clearable />
</template>

vue

<script>
export default {
  data() {
    return {
      clearDate: new Date(),
    }
  },
}
</script>

<template>
  <LhDatePicker v-model="clearDate" clearable />
</template>

크기

vue

<script setup lang="ts">
import { ref } from 'vue'

const smallDate = ref(new Date())
const mediumDate = ref(new Date())
const largeDate = ref(new Date())
</script>

<template>
  <LhDatePicker v-model="smallDate" size="small" />
  <LhDatePicker v-model="mediumDate" size="medium" />
  <LhDatePicker v-model="largeDate" size="large" />
</template>

vue

<script>
export default {
  data() {
    return {
      smallDate: new Date(),
      mediumDate: new Date(),
      largeDate: new Date(),
    }
  },
}
</script>

<template>
  <LhDatePicker v-model="smallDate" size="small" />
  <LhDatePicker v-model="mediumDate" size="medium" />
  <LhDatePicker v-model="largeDate" size="large" />
</template>

선택 모드

mode는 'date'(기본) / 'month' / 'year'을 지원합니다. 패널 안에서 제목을 클릭하면 단계적으로 내려갈 수 있습니다(날짜 → 월 → 연도). 월/연도 모드에서는 패널을 열면 해당 그리드로 바로 이동하며, 클릭 시 바로 선택하고 닫습니다(하단 버튼 없음).

vue

<script setup lang="ts">
import { ref } from 'vue'

const monthDate = ref(new Date())
const yearDate = ref(new Date(2024, 0, 1))
</script>

<template>
  <LhDatePicker v-model="monthDate" mode="month" />
  <LhDatePicker v-model="yearDate" mode="year" />
</template>

vue

<script>
export default {
  data() {
    return {
      monthDate: new Date(),
      yearDate: new Date(2024, 0, 1),
    }
  },
}
</script>

<template>
  <LhDatePicker v-model="monthDate" mode="month" />
  <LhDatePicker v-model="yearDate" mode="year" />
</template>

플레이스홀더, 읽기 전용 및 커스터마이징

placeholder로 플레이스홀더 텍스트를 지정합니다. readonly는 읽기 전용(패널은 볼 수만 있고 선택할 수 없음), range-separator는 구간 구분자, cell-class-name은 날짜 셀에 커스텀 클래스를 추가, popper-class는 패널 스타일을 커스터마이징합니다.

vue

<script setup lang="ts">
import { ref } from 'vue'
const dp1 = ref(null)
const dp2 = ref(new Date())
</script>

<template>
  <!-- 플레이스홀더 텍스트 -->
  <LhDatePicker v-model="dp1" placeholder="체크인 날짜를 선택하세요" />
  <!-- 읽기 전용 -->
  <LhDatePicker :model-value="dp2" readonly />
</template>

vue

<script>
export default {
  data() {
    return {
      dp1: null,
      dp2: new Date(),
    }
  },
}
</script>

<template>
  <!-- 플레이스홀더 텍스트 -->
  <LhDatePicker v-model="dp1" placeholder="체크인 날짜를 선택하세요" />
  <!-- 읽기 전용 -->
  <LhDatePicker :model-value="dp2" readonly />
</template>

DatePicker API

참고: datetime / 구간 선택은 현재 타입만 예약되어 있고 선택 UI가 없습니다(시간 열과 구간 패널이 미구현, 가족 이슈 대장 P-08 참고). 외부에서 구간 값 [Date, Date]을 전달하면 패널에 정상적으로 표시되지만, 패널 안에서 확인해도 구간 값을 덮어쓰지 않습니다.

속성	설명	타입	기본값
modelValue	바인딩된 날짜	`Date \| [Date, Date]`	`null`
mode	선택 모드	`"date" \| "month" \| "year" \| "datetime"`	`'date'`
size	크기	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
disabled	비활성화 여부	`boolean`	`false`
clearable	삭제 버튼 표시 여부	`boolean`	`true`
placeholder	플레이스홀더 텍스트(전달하지 않으면 format에 따라 생성되며, 언어 팩 `datepicker.year/month`를 사용)	`string`	`''`
format	날짜 형식	`string`	`'yyyy-MM-dd'`
readonly	입력창 읽기 전용	`boolean`	`true`
rangeSeparator	구간 구분자	`string`	`'~'`
cellClassName	—	`(date: Date) => string`	—
popperClass	—	`string`	—
sx	빠른 레이아웃 속성(예: `{ mt: 2, w: '50%' }`), 인라인 스타일로 변환되어 트리거 루트 요소에 적용(플로팅 패널은 영향을 받지 않음)	`LhSxProps`	—

DatePicker Events

이벤트	설명	타입
update:model-value	값이 변경될 때 발생	`(value: Date \| [Date, Date]) => void`
change	값 확인이 변경될 때 발생	`(value: Date \| [Date, Date]) => void`

타입 정의

이 컴포넌트가 외부로 내보내는 TypeScript 타입 구조는 다음과 같습니다(packages/components/date-picker/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 펼쳐 전체 정의를 확인하세요. 속성 설명은 위쪽 Props 표를 참고하세요).

LhDatePickerProps

export interface LhDatePickerProps {
  modelValue?: Date | [Date, Date] | null
  mode?: LhDatePickerMode
  size?: LhComponentSize
  disabled?: boolean
  clearable?: boolean
  placeholder?: string
  format?: string
  readonly?: boolean
  rangeSeparator?: string
  cellClassName?: (date: Date) => string
  popperClass?: string
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhDatePickerMode _{(@lh-ui/share/core/date-picker에서 가져옴)}

/**
 * DatePicker 모드
 */
export type LhDatePickerMode = 'date' | 'month' | 'year' | 'datetime'

LhComponentSize _{(@lh-ui/share/core/shared에서 가져옴)}

export type LhComponentSize = (typeof LH_SIZE_CONST)[keyof typeof LH_SIZE_CONST]

DatePicker 날짜 선택기 ​

기본 사용법 ​

비활성화 상태 ​

날짜 형식 ​

삭제 버튼 ​

크기 ​

선택 모드 ​

플레이스홀더, 읽기 전용 및 커스터마이징 ​

DatePicker API ​

DatePicker Events ​

타입 정의 ​