WeDatePicker

A versatile date and time picker component that wraps vuepic/vue-datepicker with Vuetify integration. Supports date, time, datetime selection with various formatting options, validation rules, and range selection.

Usage

<template>
  <!-- Basic date picker -->
  <WeDatePicker
    v-model="selectedDate"
    label="Select Date"
  />
  
  <!-- Time picker -->
  <WeDatePicker
    v-model="selectedTime"
    type="time"
    label="Select Time"
  />
  
  <!-- DateTime picker -->
  <WeDatePicker
    v-model="selectedDateTime"
    type="datetime"
    label="Select Date and Time"
  />
  
  <!-- Date range picker -->
  <WeDatePicker
    v-model="dateRange"
    range
    label="Select Date Range"
  />
  
  <!-- With validation -->
  <WeDatePicker
    v-model="appointmentDate"
    label="Appointment Date"
    :rules="[validatorRequired]"
  />
</template>

Props

Prop	Type	Default	Description
modelValue	String | Array	undefined	v-model value (formatted date string or array for range)
type	String	'date'	Picker type: 'date', 'time', or 'datetime'
minDate	String | Date	null	Minimum selectable date
maxDate	String | Date	null	Maximum selectable date
minTime	String | Date	null	Minimum selectable time
maxTime	String | Date	null	Maximum selectable time
locale	String	'it'	Localization for the calendar
range	Boolean	false	Enable date range selection
monthChangeOnArrows	Boolean	true	Navigate between months using arrow keys
showSeconds	Boolean	false	Show seconds in time picker
clearable	Boolean	false	Allow clearing the input
rules	Array	[]	Validation rules (compatible with Vuetify)

Note: The component also accepts all Vuetify v-text-field props through v-bind="$attrs" Note: The component also accepts all Vvuepic/vue-datepicker props through v-bind="$attrs"

Events

Event	Payload	Description
update:modelValue	String | Array	Emitted when the date selection changes

Format Handling

The component handles two types of formats:

1. Display Format: How dates are shown to the user

   • Date: dd/MM/yyyy
   • Time: HH:mm (or HH:mm:ss with showSeconds)
   • DateTime: dd/MM/yyyy HH:mm (or dd/MM/yyyy HH:mm:ss with showSeconds)

2. Model Format: How dates are stored in the model

   • Date: yyyy-MM-dd
   • Time: HH:mm (or HH:mm:ss with showSeconds)
   • DateTime: yyyy-MM-dd HH:mm (or yyyy-MM-dd HH:mm:ss with showSeconds)

Examples

Basic Date Selection

<script setup>
import { ref } from 'vue'

const selectedDate = ref(null)
</script>

<template>
  <WeDatePicker
    v-model="selectedDate"
    label="Select Date"
    clearable
  />
  
  <div v-if="selectedDate">
    Selected date: {{ selectedDate }} <!-- Will be in yyyy-MM-dd format -->
  </div>
</template>

Time Selection

<script setup>
import { ref } from 'vue'

const meetingTime = ref(null)
</script>

<template>
  <WeDatePicker
    v-model="meetingTime"
    type="time"
    label="Meeting Time"
    show-seconds
  />
</template>

Date Range for Booking

<script setup>
import { ref } from 'vue'
import { useValidators } from '#imports'

const { validatorRequired } = useValidators()
const bookingDateRange = ref(null) // Will be an array of two dates

const rules = [
  validatorRequired
]
</script>

<template>
  <WeDatePicker
    v-model="bookingDateRange"
    label="Booking Period"
    range
    :rules="rules"
  />
</template>

Date Constraints

<script setup>
import { ref } from 'vue'

// Don't allow selecting dates before today or after one year from now
const today = new Date()
const nextYear = new Date(today)
nextYear.setFullYear(nextYear.getFullYear() + 1)

const constrainedDate = ref(null)
</script>

<template>
  <WeDatePicker
    v-model="constrainedDate"
    label="Select Date (Limited Range)"
    :min-date="today"
    :max-date="nextYear"
  />
</template>

Advanced DateTime Selector

<script setup>
import { ref } from 'vue'

const appointmentDateTime = ref(null)
const workHoursStart = { hours: '09', minutes: '00' }
const workHoursEnd = { hours: '17', minutes: '00' }
</script>

<template>
  <WeDatePicker
    v-model="appointmentDateTime"
    type="datetime"
    label="Appointment Date & Time"
    :min-time="workHoursStart"
    :max-time="workHoursEnd"
    clearable
  />
</template>

Source Code