@hz-libs/bpe-ui-datepicker

Date picker, range picker, and calendar primitives for Vue 3.

Docs

Install

pnpm add @hz-libs/bpe-ui-datepicker

The app must already depend on Vue ^3.5.0. This package depends on @hz-libs/bpe-ui-popover and @hz-libs/bpe-ui-selectbox. Component CSS is included in the JavaScript import.

Use

v-model is a Date, or null when the field is empty. The field can be cleared. allow-time-picker adds a time control. disable keeps the current value visible and blocks the calendar.

<script setup>
import { ref } from 'vue'
import { DatePicker } from '@hz-libs/bpe-ui-datepicker'

const date = ref(null)
</script>

<template>
  <DatePicker v-model="date" placeholder="Select a date" />
</template>

DateRangePicker stores a start and an end date in an array.

<script setup>
import { ref } from 'vue'
import { DateRangePicker } from '@hz-libs/bpe-ui-datepicker'

const range = ref([])
</script>

<template>
  <DateRangePicker v-model="range" placeholder="Select a range" />
</template>

Exports

Calendar, CalendarRange, DatePicker, DateRangePicker.