DatePicker API Reference

Props

Core Props

Prop	Type	Default	Description
modelValue	Date | String | Array | Object | Number	null	The selected date/time value
type	String	'date'	Picker type: 'date', 'time', or 'datetime'
placeholder	String	null	Placeholder text (auto-set based on type if not provided)
label	String	''	Input label
disabled	Boolean	false	Disable the date picker
readonly	Boolean	false	Make the input readonly
clearable	Boolean	true	Show clear button when value is set
loading	Boolean	false	Show loading state

Formatting Props

Prop	Type	Default	Description
format	String	null	Date format (auto-set based on type if not provided)
displayFormat	String	null	Display format using moment.js patterns
outputFormat	String	null	Output format - emits formatted strings instead of Date objects
previewFormat	String	null	Preview format for the picker

Selection Mode Props

Prop	Type	Default	Description
range	Boolean	false	Enable date range selection
multiDates	Boolean	false	Enable multiple date selection
multiDatesLimit	Number	null	Maximum number of dates that can be selected

Constraint Props

Prop	Type	Default	Description
minDate	Date | String	null	Minimum selectable date
maxDate	Date | String	null	Maximum selectable date
disabledDates	Array	[]	Array of dates to disable
disabledWeekDays	Array	[]	Array of week day numbers to disable (0-6)
yearRange	Array	[currentYear-50, currentYear+50]	Available year range

Time Picker Props

Prop	Type	Default	Description
enableTimePicker	Boolean	false	Enable time picker functionality
timePickerOptions	Object	{}	Options for time picker configuration
is24Hour	Boolean	true	Use 24-hour format
enableSeconds	Boolean	false	Enable seconds selection

Display Props

Prop	Type	Default	Description
hideCalendarIcon	Boolean	false	Hide the calendar/clock icon
hideDetails	Boolean	false	Hide input details/validation messages
dark	Boolean	false	Enable dark theme
locale	String	'en-US'	Locale for internationalization
timezone	String	null	Timezone for date handling

Calendar Display Props

Prop	Type	Default	Description
weekStart	Number | String	0	First day of week (0 = Sunday)
sixWeeks	Boolean	true	Show six weeks in calendar
weekNumbers	String | Function | Object	null	Show week numbers
hideOffsetDates	Boolean	false	Hide dates from adjacent months
noToday	Boolean	false	Hide today indicator

Picker Type Props

Prop	Type	Default	Description
monthPicker	Boolean	false	Show month picker only
yearPicker	Boolean	false	Show year picker only
quarterPicker	Boolean	false	Show quarter picker only

Behavior Props

Prop	Type	Default	Description
autoApply	Boolean	true	Automatically apply selection
closeOnAutoApply	Boolean	true	Close picker on auto-apply
textInput	Boolean	false	Allow manual text input
monthChangeOnScroll	Boolean	true	Change month on scroll

Overlay Props

Prop	Type	Default	Description
noHoursOverlay	Boolean	false	Hide hours overlay in time picker
noMinutesOverlay	Boolean	false	Hide minutes overlay in time picker
noSecondsOverlay	Boolean	false	Hide seconds overlay in time picker

Customization Props

Prop	Type	Default	Description
markers	Array	[]	Array of date markers
highlight	Array | Function	() => []	Highlight specific dates
selectText	String	'Select'	Text for select button
cancelText	String	'Cancel'	Text for cancel button
nowButtonLabel	String	'Now'	Text for now button

Validation Props

Prop	Type	Default	Description
rules	Array	[]	Validation rules array
hint	String	''	Hint text for the input

Events

Event	Payload	Description
update:modelValue	Date | String | Array | Object | null	Emitted when the value changes
change	Date | String | Array | Object | null	Emitted when a date is selected/changed
open	-	Emitted when the picker opens
close	-	Emitted when the picker closes
cleared	-	Emitted when the value is cleared

Slots

Slot	Props	Description
date-picker-header	-	Custom content for the picker header
date-picker-footer	-	Custom content for the picker footer (action buttons area)

Methods

Method	Parameters	Return Type	Description
validate	-	Boolean	Validate the input and return validation result
setInternalValue	value: any	void	Set the internal value programmatically
getMomentValue	-	Moment | Array<Moment> | Object | null	Get the current value as moment.js object(s)

Format Examples

Date Formats (Moment.js)

// Common formats
'DD/MM/YYYY'     // 25/12/2023
'MM/DD/YYYY'     // 12/25/2023
'YYYY-MM-DD'     // 2023-12-25
'DD MMM YYYY'    // 25 Dec 2023
'MMMM DD, YYYY'  // December 25, 2023

Time Formats (Moment.js)

// Time formats
'HH:mm'          // 14:30 (24-hour)
'hh:mm A'        // 02:30 PM (12-hour)
'HH:mm:ss'       // 14:30:45 (with seconds)
'hh:mm:ss A'     // 02:30:45 PM (12-hour with seconds)

DateTime Formats (Moment.js)

// DateTime formats
'DD/MM/YYYY HH:mm'     // 25/12/2023 14:30
'MM/DD/YYYY hh:mm A'   // 12/25/2023 02:30 PM
'YYYY-MM-DD HH:mm:ss'  // 2023-12-25 14:30:45

Example Usage

Basic Date Picker

<template>
  <ODatePicker
    v-model="selectedDate"
    type="date"
    label="Select Date"
    placeholder="Choose a date"
    :minDate="new Date(2023, 0, 1)"
    :maxDate="new Date(2023, 11, 31)"
    @change="handleDateChange"
  />
</template>

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

const selectedDate = ref(null)

const handleDateChange = (date) => {
  console.log('Selected date:', date)
}
</script>

Time Picker

<template>
  <ODatePicker
    v-model="selectedTime"
    type="time"
    label="Select Time"
    :is24Hour="false"
    :enableSeconds="true"
    format="hh:mm:ss A"
    @change="handleTimeChange"
  />
</template>

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

const selectedTime = ref(null)

const handleTimeChange = (time) => {
  console.log('Selected time:', time)
}
</script>

Date Range Picker

<template>
  <ODatePicker
    v-model="dateRange"
    :range="true"
    label="Select Date Range"
    format="DD/MM/YYYY"
    :autoApply="false"
    @change="handleRangeChange"
  />
</template>

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

const dateRange = ref(null)

const handleRangeChange = (range) => {
  console.log('Date range:', range)
}
</script>

Multi-Date Picker

<template>
  <ODatePicker
    v-model="multipleDates"
    :multiDates="true"
    :multiDatesLimit="5"
    label="Select Multiple Dates"
    format="DD/MM/YYYY"
    @change="handleMultiDateChange"
  />
</template>

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

const multipleDates = ref([])

const handleMultiDateChange = (dates) => {
  console.log('Selected dates:', dates)
}
</script>

DateTime Picker with Custom Formatting

<template>
  <ODatePicker
    v-model="dateTime"
    type="datetime"
    label="Select Date & Time"
    displayFormat="DD/MM/YYYY HH:mm"
    outputFormat="YYYY-MM-DDTHH:mm:ss"
    :is24Hour="true"
    :enableSeconds="true"
    @change="handleDateTimeChange"
  />
</template>

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

const dateTime = ref(null)

const handleDateTimeChange = (dateTime) => {
  console.log('Selected date/time:', dateTime)
}
</script>

Date Picker with Validation

<template>
  <ODatePicker
    v-model="date"
    label="Required Date"
    :rules="[v => !!v || 'Date is required']"
    :clearable="false"
    @change="handleDateChange"
  />
</template>

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

const date = ref(null)

const handleDateChange = (date) => {
  console.log('Date selected:', date)
}
</script>

Dependencies

This component requires the following dependencies:

• @vuepic/vue-datepicker - Core date picker functionality
• moment - Date formatting and manipulation
• OInput - Input component for the wrapper