Props
⚠️ Important ⚠️
If you come from vue3-date-time-picker
, the library is moved to the new repository with the new name: @vuepic/vue-datepicker
. If you haven't updated yet, please switch to the new package.
List of available props
Info
- When checking the examples, for
boolean
prop types, the example will show the behavior opposite of what is set for the default value - If you use the component in the browser
<script>
tag, make sure to pass multi-word props with-
, for example,is24
asis-24
and so on
Modes
Set the default mode for the datepicker
Info
Depending on the mode, v-model
might be different, so make sure to use the proper configuration
range
Range picker mode
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" range />
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const date = ref();
// For demo purposes assign range from the current date
onMounted(() => {
const startDate = new Date();
const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
date.value = [startDate, endDate];
})
return {
date,
}
}
}
</script>
autoRange
Predefine range to select
Info
range prop must be enabled
- Type:
number | string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" range auto-range="5" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
multiCalendars
Enabling this prop will show multiple calendars side by side (on mobile devices, they will be in a column layout) for range picker. You can also pass a number to show more calendars. If you pass true
, 2 calendars will be shown automatically.
Info
range prop must be enabled
- Type:
boolean | number | string
- Default:
false
Code Example
<template>
<Datepicker v-model="date" range multiCalendars />
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const date = ref();
onMounted(() => {
const startDate = new Date();
const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
date.value = [startDate, endDate];
})
return {
date,
}
}
}
</script>
monthPicker
Change datepicker mode to select only month and year
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="month" monthPicker />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const month = ref({
month: new Date().getMonth(),
year: new Date().getFullYear()
});
return {
month,
}
}
}
</script>
timePicker
Change datepicker mode to select only time
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="time" timePicker />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const time = ref({
hours: new Date().getHours(),
minutes: new Date().getMinutes()
});
return {
time,
}
}
}
</script>
textInput
When enabled, will try to parse the date from the user input. You can also adjust the default behavior by providing text input options
Text input works with all picker modes.
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" placeholder="Start Typing ..." textInput />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
inline
Removes the input field and places the calendar in your parent component
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" inline autoApply />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
multiDates
Allow selecting multiple single dates. When changing time, the latest selected date is affected. To deselect the date, click on the selected value
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" multiDates />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
flow
Define the selecting order. Position in the array will specify the execution step. When you overwrite the execution step, the flow is reset
- Type:
('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds')[]
- Default:
[]
Info
Flow is not supported with multiCalendars
mode
Code Example
<template>
<Datepicker v-model="date" :flow="flow" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
const flow = ref(['month', 'year', 'calendar']);
return {
date,
flow,
}
}
}
</script>
utc
Output date(s) will be in UTC timezone string. You can use this if you gather dates from different timezones and want to send the date directly to the server
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" utc />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
weekPicker
Select a specific week range
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" weekPicker />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// On selection, it will be the first and the last day of the week
const date = ref();
return {
date,
}
}
}
</script>
vertical
Sets the datepicker orientation in the vertical mode. This mode will change the arrow action from left/right to the top/bottom, transitions will also be vertical
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" vertical />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
yearPicker
Change datepicker mode to select only year
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="year" yearPicker />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const year = ref(new Date().getFullYear());
return {
year,
}
}
}
</script>
Modes configuration
Props for configuring and extending the datepicker when using a specific mode
partialRange
This prop is enabled by default, meaning, two dates are not required for range input. If no second date is selected, the value will be null
- Type:
boolean
- Default:
true
Code Example
<template>
<Datepicker v-model="date" range :partialRange="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
presetRanges
When configured, it will provide a sidebar with configured range that user can select
Info
range prop must be enabled
- Type:
{ label: string; range: Date[] | string[] }[]
- Default:
[]
Code Example
<template>
<Datepicker v-model="date" range :presetRanges="presetRanges" />
</template>
<script>
import { ref } from 'vue';
import { endOfMonth, endOfYear, startOfMonth, startOfYear, subMonths } from 'date-fns';
export default {
setup() {
const date = ref();
const presetRanges = ref([
{ label: 'Today', range: [new Date(), new Date()] },
{ label: 'This month', range: [startOfMonth(new Date()), endOfMonth(new Date())] },
{
label: 'Last month',
range: [startOfMonth(subMonths(new Date(), 1)), endOfMonth(subMonths(new Date(), 1))],
},
{ label: 'This year', range: [startOfYear(new Date()), endOfYear(new Date())] },
]);
return {
date,
presetRanges,
}
}
}
</script>
Info
range prop must be enabled
minRange
Set minimal range available for selection. This is the number of days between the selected start and end date
Info
range prop must be enabled
- Type:
number | string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" range minRange="3" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
maxRange
Set maximal range available for selection. This is the number of days between the selected start and end date
Info
range prop must be enabled
- Type:
number | string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" range maxRange="7" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
fixedStart
Allows only adjustment of the second date in the defined range
Info
range prop must be enabled
WARNING
v-model
must be provided with both dates.
Should not be used in combination with fixedEnd
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" range fixedStart :clearable="false" />
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const date = ref();
// For demo purposes assign range from the current date
onMounted(() => {
const startDate = new Date();
const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
date.value = [startDate, endDate];
})
return {
date,
}
}
}
</script>
fixedEnd
Allows only adjustment of the first date in the defined range
Info
range prop must be enabled
WARNING
v-model
must be provided with both dates.
Should not be used in combination with fixedStart
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" range fixedEnd :clearable="false" />
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const date = ref();
// For demo purposes assign range from the current date
onMounted(() => {
const startDate = new Date();
const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
date.value = [startDate, endDate];
})
return {
date,
}
}
}
</script>
multiCalendarsSolo
When enabled, both calendars will be independent of each other
Info
range and multiCalendars props must be enabled
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" range multiCalendars multiCalendarsSolo />
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const date = ref();
onMounted(() => {
const startDate = new Date();
const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
date.value = [startDate, endDate];
})
return {
date,
}
}
}
</script>
multiStatic
The default calendar view when using multiCalendars
is to keep it on the month selected by the user. When this prop is disabled, it will auto-update the first calendar when the range starts and adjust the rest of them based on the first month
Info
range and multiCalendars props must be enabled
- Type:
boolean
- Default:
true
Code Example
<template>
<Datepicker v-model="date" range multiCalendars :multiStatic="false" />
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const date = ref();
onMounted(() => {
const startDate = new Date();
const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
date.value = [startDate, endDate];
})
return {
date,
}
}
}
</script>
textInputOptions
Configuration for textInput prop
- Type:
{ enterSubmit?: boolean; tabSubmit?: boolean; openMenu?: boolean; format?: string; rangeSeparator?: string }
- Default:
{ enterSubmit: true, tabSubmit: true, openMenu: true, rangeSeparator: '-' }
Properties explanation:
enterSubmit
: When enabled, pressing enter will select a date if the input value is a valid date objecttabSubmit
: When enabled, pressing tab will select a date if the input value is a valid date objectopenMenu
: When enabled, opens the menu when clicking on the input fieldformat
: Override the default parsing format. Default is the string value from formatrangeSeparator
: If you userange
mode, the default separator is-
, you can change it here
Code Example
<template>
<Datepicker
v-model="date"
placeholder="Start Typing ..."
textInput
:textInputOptions="textInputOptions" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
const textInputOptions = ref({
format: 'MM.dd.yyyy'
})
return {
date,
textInputOptions,
}
}
}
</script>
modeHeight
If you use monthPicker
and timePicker
, set custom height of the picker in px
- Type:
number | string
- Default:
255
Code Example
<template>
<Datepicker v-model="time" timePicker modeHeight="120" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const time = ref({
hours: new Date().getHours(),
minutes: new Date().getMinutes()
});
return {
time,
}
}
}
</script>
inlineWithInput
Use input with the inline mode, useful if you enable textInput
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" inline textInput inlineWithInput autoApply />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
multiDatesLimit
Limit the number of dates to select when multiDates
is enabled
- Type:
number | string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" multiDates multiDatesLimit="3" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
Formatting
Format options for the value displayed in the input or preview
format
Format the value of the date(s) in the input field. Formatting is done automatically via provided string format. However, you can override the default format by providing a custom formatter function
- Type:
string | (params: Date | Date[]) => string
- Default:
- Single picker:
'MM/dd/yyyy HH:mm'
- Range picker:
'MM/dd/yyyy HH:mm - MM/dd/yyyy HH:mm'
- Month picker:
'MM/yyyy'
- Time picker:
'HH:mm'
- Time picker range:
'HH:mm - HH:mm'
- Single picker:
Info
If is24 prop is set to false
, hours format will be changed to 'hh:mm aa'
For additional information on how to pass custom string format you can check Unicode tokens
Code Example
<template>
<Datepicker v-model="date" :format="format" />
</template>
<script>
// Example using a custom format function
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
// In case of a range picker, you'll receive [Date, Date]
const format = (date) => {
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();
return `Selected date is ${day}/${month}/${year}`;
}
return {
date,
format,
}
}
}
</script>
previewFormat
Format the value of the date(s) in the action row
- Type:
string | (params: Date | Date[]) => string
- Default:
null
Same configuration as in format prop
Note: If not provided, it will auto inherit data from the format prop
Code Example
<template>
<Datepicker v-model="date" :previewFormat="format" />
</template>
<script>
// Example using a custom format function
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
// In case of a range picker, you'll receive [Date, Date]
const format = (date) => {
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();
return `Selected date is ${day}/${month}/${year}`;
}
return {
date,
format,
}
}
}
</script>
monthNameFormat
Set the month name format
- Type:
'short' | 'long'
- Default:
'short'
Code Example
<template>
<Datepicker v-model="date" monthNameFormat="long" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
Localization
Localization options and label props
locale
Set datepicker locale. Datepicker will use built in javascript locale formatter to extract month and weekday names
- Type:
string
- Default:
'en-US'
Code Example
<template>
<Datepicker v-model="date" locale="de" cancelText="abbrechen" selectText="auswählen" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
formatLocale
Specify localized format output. This prop uses Locale
object from date-fns
library
For more info about supported locales or adding a custom locale object, please visit date-fns documentation
- Type:
Locale
- Default:
null
Code Example
<template>
<Datepicker v-model="date" :format-locale="ja" format="E" />
</template>
<script>
import { ref } from 'vue';
import { ja } from 'date-fns/locale';
export default {
setup() {
const date = ref(new Date());
return {
date,
ja,
}
}
}
</script>
selectText
Select text label in the action row
- Type:
string
- Default:
'Select'
Code Example
<template>
<Datepicker v-model="date" selectText="Pick" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
cancelText
Cancel text label in the action row
- Type:
string
- Default:
'Cancel'
Code Example
<template>
<Datepicker v-model="date" cancelText="Close" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
nowButtonLabel
Change the text for now button
- Type:
string
- Default:
'Now'
Code Example
<template>
<Datepicker v-model="date" showNowButton nowButtonLabel="Current" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
weekNumName
Sets the label for the week numbers column
- Type:
string
- Default:
'W'
Code Example
<template>
<Datepicker v-model="date" weekNumbers weekNumName="We" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
ariaLabels
Customize the language of the HTML aria-labels
for localized accessibility
- Type
interface AriaLabels {
toggleOverlay?: string;
menu?: string;
input?: string;
calendarWrap?: string;
calendarDays?: string;
openTimePicker?: string;
closeTimePicker?: string;
incrementValue?: (type: 'hours' | 'minutes' | 'seconds') => string;
decrementValue?: (type: 'hours' | 'minutes' | 'seconds') => string;
openTpOverlay?: (type: 'hours' | 'minutes' | 'seconds') => string;
amPmButton?: string;
openYearsOverlay?: string;
openMonthsOverlay?: string;
nextMonth?: string;
prevMonth?: string;
}
- Default:
{}
Code Example
<template>
<Datepicker v-model="date" :ariaLabels="ariaLabels" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
const ariaLabels = ref({ menu: 'Some custom menu label' })
return {
date,
ariaLabels,
}
}
}
</script>
General configuration
General behavior props configuration
uid
Pass an id
to the input and menu elements. If provided, you can select menu id as dp-menu-${uid}
and input id as dp-input-${uid}
- Type:
string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" uid="demo" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
monthChangeOnScroll
Scrolling the mouse wheel over the calendar will change the month. Scroll down for next month and vice versa
You can also set the value to 'inverse'
, so that scrolling down will go to the previous month and up on the next
- Type:
boolean | 'inverse'
- Default:
true
Code Example
<template>
<Datepicker v-model="date" :monthChangeOnScroll="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
v-model
modelValuev-model binding
- Type:
- Single picker:
Date | string
- In case of
multiDates
it will beDate[] | string[]
- In case of
- Month picker:
{ month: number | string; year: number | string }
- Time picker:
{ hours: number | string; minutes: number | string; seconds?: number | string }
- Week picker:
[Date, Date] | [string, string]
- Range picker:
[Date, Date] | [string | string]
- If you use time picker, it will be
{ hours: number | string; minutes: number | string; seconds?: number | string }[]
- If you use month picker, it will be
{ month: number | string; year: number | string }[]
- If you use time picker, it will be
- Year picker:
number | string
- Single picker:
- Default:
null
Code Example
<template>
<div>
<Datepicker id="manual" :modelValue="date" @update:modelValue="setDate" />
<Datepicker id="auto" v-model="date" />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
const setDate = (value) => {
date.value = value;
}
return {
date,
setDate,
}
}
}
</script>
clearable
Add a clear icon to the input field where you can set the value to null
- Type:
boolean
- Default:
true
Code Example
<template>
<Datepicker v-model="date" :clearable="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
closeOnScroll
Close datepicker menu on page scroll
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" closeOnScroll />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
autoApply
If set to true
, clicking on a date value will automatically select the value
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" autoApply />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
placeholder
Input placeholder
- Type:
string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" placeholder="Select Date" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
noToday
Hide today mark from the calendar
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" noToday />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
closeOnAutoApply
If set to false
, clicking on a date value will automatically select the value but will not close the datepicker menu. Closing will be available on a click-away or clicking on the input again
- Type:
boolean
- Default:
true
Code Example
<template>
<Datepicker v-model="date" autoApply :closeOnAutoApply="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
markers
Add markers to the specified dates with (optional) tooltips
- Type:
{
date: Date | string;
type?: 'dot' | 'line';
tooltip?: { text: string; color?: string }[];
color?: string;
}[]
- Default:
[]
Code Example
<template>
<Datepicker v-model="date" :markers="markers" />
</template>
<script>
import { ref } from 'vue';
import addDays from 'date-fns/addDays';
export default {
setup() {
const date = ref(new Date());
const markers = ref([
{
date: addDays(new Date(), 1),
type: 'dot',
tooltip: [{ text: 'Dot with tooltip', color: 'green' }],
},
{
date: addDays(new Date(), 2),
type: 'line',
tooltip: [
{ text: 'First tooltip', color: 'blue' },
{ text: 'Second tooltip', color: 'yellow' },
],
},
{
date: addDays(new Date(), 3),
type: 'dot',
color: 'yellow',
},
])
return {
date,
markers,
}
}
}
</script>
showNowButton
Enable button to select current date and time
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" showNowButton />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
disabled
Disables the input
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" disabled />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
readonly
Sets the input in readonly state
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" readonly />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
required
Add required
flag to the input field. Use with form tag for built-in validation
- Type:
boolean
- Default:
false
Code Example
<template>
<form @submit.prevent="submitForm">
<Datepicker v-model="date" required />
<button type="submit">Submit form</button>
</form>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
const submitForm = () => {
alert('Form submitted');
}
return {
date,
submitForm,
}
}
}
</script>
name
Sets the input name attribute
- Type:
string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" name="date-picker" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
autocomplete
Sets the input autocomplete attribute
- Type:
string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" autocomplete="off" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
keepActionRow
When enabled, it will keep the action row even if the autoApply
prop is enabled
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" autoApply keepActionRow :closeOnAutoApply="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
noSwipe
Disable touch events on the calendar
- Type:
Boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" noSwipe />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
Calendar configuration
Configure calendar options such as behavior or available dates
weekNumbers
Display week numbers in the calendar
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" weekNumbers />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
hideOffsetDates
Hide dates from the previous/next month in the calendar
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" hideOffsetDates />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
minDate
All dates before the given date will be disabled
- Type:
Date | string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" :minDate="new Date()" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
maxDate
All dates after the given date will be disabled
- Type:
Date | string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" :maxDate="new Date()" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
preventMinMaxNavigation
Prevent navigation after or before the minDate
or maxDate
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" :minDate="minDate" :maxDate="maxDate" preventMinMaxNavigation />
</template>
<script>
import { ref } from 'vue';
import { addMonths, getMonth, getYear, subMonths } from 'date-fns';
export default {
setup() {
const date = ref(new Date());
// 2 months before and after the current date
const minDate = computed(() => subMonths(new Date(getYear(new Date()), getMonth(new Date())), 2));
const maxDate = computed(() => addMonths(new Date(getYear(new Date()), getMonth(new Date())), 2));
return {
date,
minDate,
maxDate
}
}
}
</script>
startDate
Open the datepicker to some preselected month and year
- Type:
Date | string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" :startDate="startDate" placeholder="Select Date" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
const startDate = ref(new Date(2020, 1));
return {
date,
startDate,
}
}
}
</script>
weekStart
Day from which the week starts. 0-6, 0 is Sunday, 6 is Saturday
- Type:
number | string
- Default:
1
Code Example
<template>
<Datepicker v-model="date" weekStart="0" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
filters
Disable specific values from being selected in the month, year, and time picker overlays
- Type:
{
months?: number[]; // 0 = Jan, 11 - Dec
years?: number[]; // Array of years to disable
times?: {
hours?: number[]; // disable specific hours
minutes?: number[]; // disable sepcific minutes
seconds?: number[] // disable specific seconds
}
}
- Default:
null
Code Example
<template>
<Datepicker v-model="date" :filters="filters" />
</template>
<script>
import { ref } from 'vue';
import { getMonth, addMonths } from 'date-fns'
export default {
setup() {
const date = ref(new Date());
// For demo purposes, disable the next 3 months from the current month
const filters = computed(() => {
const currentDate = new Date()
return {
months: Array.from(Array(3).keys())
.map((item) => getMonth(addMonths(currentDate, item + 1)))
}
})
return {
filters,
date,
}
}
}
</script>
disableMonthYearSelect
Removes the month and year picker
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" disableMonthYearSelect />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
yearRange
Specify start and end year for years to generate
- Type:
[number, number]
- Default:
[1900, 2100]
Code Example
<template>
<Datepicker v-model="date" :yearRange="[2020, 2040]" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
reverseYears
Reverse the order of the years in years overlay
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" reverseYears :yearRange="[2020, 2040]" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
allowedDates
Allow only specific dates
- Type:
string[] | Date[]
- Default:
[]
Code Example
<template>
<Datepicker v-model="date" :allowedDates="allowedDates" />
</template>
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const date = ref();
// For demo purposes, enable only today and tomorrow
const allowedDates = computed(() => {
return [
new Date(),
new Date(new Date().setDate(new Date().getDate() + 1))
];
});
return {
date,
allowedDates,
}
}
}
</script>
disabledDates
Disable specific dates
- Type:
Date[] | string[] | (date: Date) => boolean
- Default:
[]
Note: If you use a custom function, make sure to return true
for a disabled date and false
for enabled
Code Example
<template>
<Datepicker v-model="date" :disabledDates="disabledDates" />
</template>
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const date = ref(new Date());
// For demo purposes disables the next 2 days from the current date
const disabledDates = computed(() => {
const today = new Date();
const tomorrow = new Date(today)
tomorrow.setDate(tomorrow.getDate() + 1)
const afterTomorrow = new Date(tomorrow);
afterTomorrow.setDate(tomorrow.getDate() + 1);
return [tomorrow, afterTomorrow]
})
return {
disabledDates,
date,
}
}
}
</script>
disabledWeekDays
Disable specific days from the week
- Type:
string[] | number[]
- 0-6, 0 is Sunday, 6 is Saturday - Default:
[]
Code Example
<template>
<Datepicker v-model="date" :disabledWeekDays="[6, 0]" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
Time picker configuration
Props to configure time picker, whether using it only as time picker or alongside the datepicker
enableTimePicker
Enable or disable time picker
- Type:
boolean
- Default:
true
Code Example
<template>
<Datepicker v-model="date" :enableTimePicker="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
is24
Whether to use 24H or 12H mode
- Type:
boolean
- Default:
true
Code Example
<template>
<Datepicker v-model="date" :is24="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
enableSeconds
Enable seconds in the time picker
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" enableSeconds />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
hoursIncrement
The value which is used to increment hours via arrows in the time picker
- Type:
number | string
- Default:
1
Code Example
<template>
<Datepicker v-model="date" hoursIncrement="2" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
minutesIncrement
The value which is used to increment minutes via arrows in the time picker
- Type:
number | string
- Default:
1
Code Example
<template>
<Datepicker v-model="date" minutesIncrement="5" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
secondsIncrement
The value which is used to increment seconds via arrows in the time picker
- Type:
number | string
- Default:
1
Code Example
<template>
<Datepicker v-model="date" enableSeconds secondsIncrement="5" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
hoursGridIncrement
The value which is used to increment hours when showing hours overlay
It will always start from 0 until it reaches 24 or 12 depending on the is24
prop
- Type:
number | string
- Default:
1
Code Example
<template>
<Datepicker v-model="date" hoursGridIncrement="2" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
minutesGridIncrement
The value which is used to increment minutes when showing minutes overlay
It will always start from 0 to 60 minutes
- Type:
number | string
- Default:
5
Code Example
<template>
<Datepicker v-model="date" minutesGridIncrement="2" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
secondsGridIncrement
The value which is used to increment seconds when showing seconds overlay
- Type:
number | string
- Default:
5
Code Example
<template>
<Datepicker v-model="date" enableSeconds secondsGridIncrement="2" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
noHoursOverlay
Disable overlay for the hours, only arrow selection will be available
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" noHoursOverlay />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
noMinutesOverlay
Disable overlay for the minutes, only arrow selection will be available
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" noMinutesOverlay />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
noSecondsOverlay
Disable overlay for the seconds, only arrow selection will be available
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" noSecondsOverlay enableSeconds />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
minTime
Sets the minimal available time to pick
- Type:
{ hours?: number | string; minutes?: number | string; seconds?: number | string }
- Default:
null
Code Example
<template>
<Datepicker v-model="date" :minTime="{ hours: 11, minutes: 30 }" placeholder="Select Date" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
maxTime
Sets the maximal available time to pick
- Type:
{ hours?: number | string; minutes?: number | string; seconds?: number | string }
- Default:
null
Code Example
<template>
<Datepicker v-model="date" :maxTime="{ hours: 11, minutes: 30 }" placeholder="Select Date" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
startTime
Set some default starting time
- Type:
- Single picker:
{ hours?: number | string; minutes?: number | string; seconds?: number | string }
- Range picker:
{ hours?: number | string; minutes?: number | string; seconds?: number | string }[]
- Single picker:
- Default:
null
Code Example
<template>
<Datepicker v-model="date" :startTime="startTime" placeholder="Select Date" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
const startTime = ref({ hours: 0, minutes: 0 });
return {
date,
startTime,
}
}
}
</script>
Positioning
Configure datepicker menu positioning
position
Datepicker menu position
- Type:
'left' | 'center' | 'right'
- Default:
'center'
Code Example
<template>
<Datepicker v-model="date" position="left" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
autoPosition
When enabled, based on viewport space available it will automatically position the menu above or bellow input field
- Type:
boolean
- Default:
true
Code Example
<template>
<Datepicker v-model="date" :autoPosition="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
altPosition
If you have issues with the menu being miss-placed, you can enable this prop to use an alternative positioning method. By default, if passed true
, datepicker will use an alternative function to recalculate position, but you can also pass a custom function that can position the menu to your liking.
- Type:
boolean | ((el: HTMLElement | undefined) => { top: string; left: string; transform: string })
- Default:
false
Code Example
<template>
<Datepicker v-model="date" altPosition />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
teleport
Set teleport target
- Type:
string | HTMLElement
- Default:
'body'
You can inspect the page and check the menu placement
Code Example
<template>
<Datepicker v-model="date" teleport="#app" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
Keyboard
Configure keyboard actions
Info
You can press tab
key in the menu, and it will autofocus elements, pressing enter
will do a click
action like open overlay or select a date.
All keyboard events are enabled by default
openMenuOnFocus
Pressing tab
in the form, datepicker menu will open
- Type:
boolean
- Default:
true
Code Example
<template>
<Datepicker v-model="date" :openMenuOnFocus="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
escClose
Esc
key closes the menu
- Type:
boolean
- Default:
true
Code Example
<template>
<Datepicker v-model="date" :escClose="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
spaceConfirm
space
key selects the date (like you pressed the select button)
- Type:
boolean
- Default:
true
Code Example
<template>
<Datepicker v-model="date" :spaceConfirm="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
monthChangeOnArrows
Change months via arrow keys
- Type:
boolean
- Default:
true
Code Example
<template>
<Datepicker v-model="date" :monthChangeOnArrows="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
arrowNavigation
By default, arrow keys will change the current month. When enabling this prop, you can navigate the menu via arrow keys instead of using tabs
Info
arrowNavigation
is not supported with the multiCalendars prop
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" arrowNavigation />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
Look and feel
Customization options
transitions
Control transitions inside the menu. You can define your own or disable them. Datepicker uses Vue built in transitions component for transitions control. To configure you own, please check the Vue documentation and provide a transition name in the prop
- Type:
boolean | {open?: string; close?: string; next?: string; previous?: string; menuAppear?: string; vNext?: string; vPrevious?: string; }
- Default:
true
menuAppear
is added on menu open
open
and close
are added on overlays show/hide
next
and previous
are added when switching months in the calendar
vNext
and vPrevious
are added when switching months in the calendar in the vertical
mode
Code Example
<template>
<Datepicker v-model="date" :transitions="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
dark
Theme switch between the dark and light mode
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" dark />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
hideInputIcon
Hide calendar icon in the input field
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" hideInputIcon />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
state
Validation state of the calendar value. Sets the green/red border depending on the value
- Type:
boolean
- Default:
null
Code Example
<template>
<Datepicker v-model="date" :state="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
inputClassName
Add a custom class to the input field
- Type:
string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" inputClassName="dp-custom-input" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
<style lang="scss">
.dp-custom-input {
box-shadow: 0 0 6px #1976d2;
color: #1976d2;
&:hover {
border-color: #1976d2;
}
}
</style>
menuClassName
Add a custom class to the datepicker menu wrapper
- Type:
string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" menuClassName="dp-custom-menu" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
<style lang="scss">
.dp-custom-menu {
box-shadow: 0 0 6px #1976d2;
}
</style>
calendarClassName
Add a custom class to the calendar wrapper
- Type:
string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" calendarClassName="dp-custom-calendar" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
<style lang="scss">
.dp-custom-calendar {
.dp__calendar_item {
border: 1px solid var(--dp-border-color-hover);
}
}
</style>
calendarCellClassName
Add a custom class to the calendar cell wrapper
- Type:
string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" calendarCellClassName="dp-custom-cell" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
<style lang="scss">
.dp-custom-cell {
border-radius: 50%;
}
</style>