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]"
  />

  <!-- min date -->
  <WeDatePicker
    v-model="minDate"
    label="Min Date"
    :min="startOfWeek"
    :rules="[validatorRequired]"
  />

  <!-- max date -->
  <WeDatePicker
    v-model="maxDate"
    label="Max Date"
    :max="endOfWeek"
    :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'
min	String | Date	null	Minimum selectable date
max	String | Date	null	Maximum selectable dat
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
startDate	String | Date	null	Initial date to display in the calendar when opened. For ranges, the first element is used
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
disabledDate	Boolean	false	Disable date
disabledDates	Array	undefined	Disable a series of dates
presetDates	Array	[]	Provide a sidebar with a configured range / date that the user can select
allowedDates	Array	undefined	Allow a series of dates
clearable	Boolean	false	Allow clearing the input
rules	Array	[]	Validation rules (compatible with Vuetify)

Note: It is recommended to use min and max instead of minDate and maxDate.

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