DatePicker

LhDatePicker is used to select a date or time range.

Basic Usage

Basic Usage

<script setup lang="ts">
import { ref } from 'vue'
import { LhDatePicker } from '@lh-ui/vue3'

const dateVal = ref('')
</script>

<template>
  <LhDatePicker v-model="dateVal" placeholder="Select date" />
</template>

<script>
import { LhDatePicker } from '@lh-ui/vue3'

export default {
  components: { LhDatePicker },
  data() {
    return {
      dateVal: '',
    }
  },
}
</script>

<template>
  <LhDatePicker v-model="dateVal" placeholder="Select date" />
</template>

Date Types

Date Types

<script setup lang="ts">
import { ref } from 'vue'
import { LhDatePicker } from '@lh-ui/vue3'

const date1 = ref('')
const date2 = ref('')
const date3 = ref([])
</script>

<template>
  <!-- Date -->
  <LhDatePicker v-model="date1" type="date" placeholder="Date" />
  <!-- DateTime -->
  <LhDatePicker v-model="date2" type="datetime" placeholder="DateTime" />
  <!-- Range -->
  <LhDatePicker v-model="date3" type="daterange" placeholder="Range" />
</template>

<script>
import { LhDatePicker } from '@lh-ui/vue3'

export default {
  components: { LhDatePicker },
  data() {
    return {
      date1: '',
      date2: '',
      date3: [],
    }
  },
}
</script>

<template>
  <!-- Date -->
  <LhDatePicker v-model="date1" type="date" placeholder="Date" />
  <!-- DateTime -->
  <LhDatePicker v-model="date2" type="datetime" placeholder="DateTime" />
  <!-- Range -->
  <LhDatePicker v-model="date3" type="daterange" placeholder="Range" />
</template>

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/date-picker/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

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?: LhSxProps
}

LhDatePickerMode _{(from @lh-ui/share/core/date-picker)}

export type LhDatePickerMode = 'date' | 'month' | 'year' | 'datetime'

LhComponentSize _{(from @lh-ui/share/core/shared)}

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

Selection Modes

mode supports 'date' (default) / 'month' / 'year'. Click the panel title to drill down: date → month → year. In month/year mode the panel opens directly on the corresponding grid and clicking a cell selects immediately (no footer buttons).

Month and Year Modes

2026Y 10M

2024Y

<script setup lang="ts">
import { ref } from 'vue'
import { LhDatePicker } from '@lh-ui/vue3'

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

<template>
  <LhDatePicker v-model="monthVal" mode="month" />
  <LhDatePicker v-model="yearVal" mode="year" />
</template>

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

<template>
  <LhDatePicker v-model="monthVal" mode="month" />
  <LhDatePicker v-model="yearVal" mode="year" />
</template>

Placeholder, readonly and customization

placeholder sets the hint text; readonly shows the panel but blocks picking; range-separator customizes the range separator; cell-class-name adds a class to date cells; popper-class customizes the panel.

placeholder / readonly

2026-10-16

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

<template>
  <LhDatePicker v-model="dp1" placeholder="Pick a check-in date" />
  <LhDatePicker :model-value="dp2" readonly />
</template>

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

<template>
  <LhDatePicker v-model="dp1" placeholder="Pick a check-in date" />
  <LhDatePicker :model-value="dp2" readonly />
</template>

Range separator and cell class

2024-01-01 to 2024-01-15

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

const dpRange = ref<[Date, Date] | null>([new Date(2024, 0, 1), new Date(2024, 0, 15)])
</script>

<template>
  <!-- Range separator, cell class and popper class -->
  <LhDatePicker
    v-model="dpRange"
    type="range"
    range-separator="to"
    :cell-class-name="(d) => d.getDay() === 0 ? 'is-sunday' : ''"
    popper-class="demo-datepicker-popper"
  />
</template>

<script>
export default {
  data() {
    return { dpRange: [new Date(2024, 0, 1), new Date(2024, 0, 15)] }
  },
}
</script>

<template>
  <!-- Range separator, cell class and popper class -->
  <LhDatePicker
    v-model="dpRange"
    type="range"
    range-separator="to"
    :cell-class-name="(d) => d.getDay() === 0 ? 'is-sunday' : ''"
    popper-class="demo-datepicker-popper"
  />
</template>

Size, disabled, clearable and format

size controls the input size; disabled blocks interaction; clearable shows the clear button; format customizes the displayed format.

size / disabled / clearable / format

2026/10/16

2026-10-16

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

<template>
  <LhDatePicker v-model="dp3" size="small" clearable format="yyyy/MM/dd" />
  <LhDatePicker v-model="dp4" disabled />
</template>

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

<template>
  <LhDatePicker v-model="dp3" size="small" clearable format="yyyy/MM/dd" />
  <LhDatePicker v-model="dp4" disabled />
</template>

Props

Prop	Description	Type	Default
modelValue	Bound value	Date | [Date, Date]	null
mode	Selection mode	"date" | "month" | "year" | "datetime"	'date'
size	Size	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
disabled	Disabled	boolean	false
clearable	Clearable	boolean	true
placeholder	Placeholder (generated from format using the datepicker.year/month locale messages when unset)	string	''
format	Date format	string	'yyyy-MM-dd'
readonly	—	boolean	true
rangeSeparator	—	string	'~'
cellClassName	—	(date: Date) => string	—
popperClass	—	string	—
sx	Shorthand layout props (e.g. { mt: 2, w: '50%' }), applied as inline styles on the trigger root element (the floating panel is not affected)	LhSxProps	—

Events

Event	Description	Callback
update:modelValue	Value change	(value: string | string[]) => void
change	Selection changed	(date, dateString) => void
clear	Clear clicked	() => void