@composy/datepicker-vue

@composy/datepicker-vue

Vue 3 adapter for @composy/datepicker-core.

Components

• DatePicker
• DateRangePicker
• TimePicker
• v-datepicker directive
• useDatePicker and useClickOutside composables
• DatePickerPlugin and createDatePickerEnginePlugin

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { DatePicker, type DateRange } from '@composy/datepicker-vue'
import '@composy/datepicker-core/index.css'

const value = ref<DateRange | null>(null)
</script>

<template>
  <DatePicker
    v-model="value"
    mode="datetime"
    selection-type="range"
    allow-input
    input-separator="至"
    @change="(nextValue, formatted) => console.log(nextValue, formatted)"
  />
</template>

Main props

DatePicker forwards the core options, including mode, selectionType, format, valueFormat, weekStart, disabledDate, disabledTime, minDate, maxDate, showWeekNumber, showToday, showConfirm, showTime, timeFormat, hourStep, minuteStep, secondStep, use12Hours, hideSeconds, allowClear, allowInput, inputValidator, inputSeparator, presets, dateMark, size, placement, locale, classPrefix, placeholder, disabled, readonly, and panelCount.

DateRangePicker fixes selectionType to range. TimePicker fixes mode to time and accepts a Date or null as its model value.

Events include update:modelValue, change, panelChange, open, close, confirm, clear, focus, and blur.

Vue components mount the core renderer against their own container document. This also keeps outside-click handling in the same document when the component is rendered inside an iframe.

Styles

The Vue package does not ship a separate stylesheet. Import the CSS from the core package:

import '@composy/datepicker-core/index.css'

Build output is generated to dist, es, esm, and lib. The package exports components, directives, hooks, plugins, and TypeScript declarations.

Development

Canonical ESLint and ESM/CJS TypeScript configurations are in .ldesign/; package-root config files forward to them for compatibility.

pnpm --dir packages/vue run type-check
pnpm --dir packages/vue run type-check:cjs
pnpm --dir packages/vue run lint:check
pnpm --filter @composy/datepicker-vue build

License

MIT