DatePicker

Date and time selection component with calendar interface. Built on top of @vuepic/vue-datepicker.

Open in Storybook

Interactive Demo

Usage

<script setup>
import { ref } from 'vue';
import { DatePicker } from '@yellowcard/b2b-design-system';

const date = ref(null);
</script>

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

API Reference

Props

Prop	Type	Default	Description
modelValue	Date | string | null	—	Selected date value (v-model)
label	string	—	Input label
required	boolean	false	Shows required indicator
skeleton	boolean	false	Skeleton loading state

TIP

This component wraps @vuepic/vue-datepicker and supports all of its props. See the VueDatePicker documentation for the full API.

Events

Event	Payload	Description
update:modelValue	Date | string | null	Emitted when date changes