Props
is24
Whether to use 24H or 12H mode.
Code
<template>
<Datepicker v-model="date" :is24="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
type: Boolean,
default: true
}
2
3
4
enableTimePicker
Enable or disable time picker.
Code
<template>
<Datepicker v-model="date" :enableTimePicker="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
type: Boolean,
default: true
}
2
3
4
locale
Set date picker locale. Datepicker will use built in javascript locale formatteropen in new window to format dates, extract month and weekday names.
Code
<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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
type: String,
default: 'en-US'
}
2
3
4
range
Range picker mode
Code
<template>
<Datepicker v-model="date" range />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
type: Boolean,
default: false
}
2
3
4
v-model
modelValuev-model binding
Code
<template>
<div>
<Datepicker uid="manual" :modelValue="date" @update:modelValue="setDate" />
<Datepicker uid="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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Accepted values:
Date
Date.toString()
[Date, Date]
[Date.toString(), Date.toString()]
null
{
type: [String, Date, Array],
default: null
}
2
3
4
position
Datepicker menu position
Code
<template>
<Datepicker v-model="date" position="left" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Accepted values:
'left'
'right'
'center'
{
type: String,
default: 'center'
}
2
3
4
autoPosition
When enabled, based on viewport space available it will automatically position menu on top or bellow input field
Code
<template>
<Datepicker v-model="date" :autoPosition="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
type: Boolean,
default: true
}
2
3
4
dark
Theme switch between dark and light mode
Code
<template>
<Datepicker v-model="date" dark />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
type: Boolean,
default: false
}
2
3
4
placeholder
Input placeholder
Code
<template>
<Datepicker v-model="date" placeholder="Select Date" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
type: String,
default: null
}
2
3
4
weekNumbers
Display week numbers in the calendar
Code
<template>
<Datepicker v-model="date" weekNumbers />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
type: Boolean,
default: false
}
2
3
4
hoursIncrement
Value which is used to increment hours via arrows in the time picker
Code
<template>
<Datepicker v-model="date" hoursIncrement="5" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
type: [String, Number],
default: 1
}
2
3
4
minutesIncrement
Value which is used to increment minutes via arrows in the time picker
Code
<template>
<Datepicker v-model="date" minutesIncrement="5" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
type: [String, Number],
default: 1
}
2
3
4
hoursGridIncrement
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
Code
<template>
<Datepicker v-model="date" hoursGridIncrement="2" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
type: [String, Number],
default: 1
}
2
3
4
minutesGridIncrement
Value which is used to increment minutes when showing minutes overlay
It will always start from 0 to 60 minutes.
Code
<template>
<Datepicker v-model="date" minutesGridIncrement="2" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
type: [String, Number],
default: 5
}
2
3
4
minDate
All dates before given date will be disabled
Code
<template>
<Datepicker v-model="date" :minDate="new Date()" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Allowed values:
String
Date.toString()
{
type: [String, Date],
default: null
}
2
3
4
maxDate
All dates after the given date will be disabled
Code
<template>
<Datepicker v-model="date" :maxDate="new Date()" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Allowed values:
String
Date.toString()
{
type: [String, Date],
default: null
}
2
3
4
minTime
Sets the minimal available time to pick
Code
<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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Accepted values
{ hours?: number | string, minutes?: number | string }
minTIme: {
type: Object,
default: () => ({})
}
2
3
4
maxTime
Code
<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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Accepted values
{ hours?: number | string, minutes?: number | string }
{
type: Object,
default: () => ({})
}
2
3
4
weekStart
Day from which the week starts
Code
<template>
<Datepicker v-model="date" weekStart="0" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Accepted values
0-6
0 is Sunday, 6 is Saturday
{
type: [String, Number],
default: 1 // monday
}
2
3
4
disabled
Disables the input
Code
<template>
<Datepicker v-model="date" disabled />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
type: Boolean,
default: false
}
2
3
4
readonly
Sets the input in readonly state
Code
<template>
<Datepicker v-model="date" readonly />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
type: Boolean,
default: false
}
2
3
4
weekNumName
Sets the label for week numbers column
Code
<template>
<Datepicker v-model="date" weekNumbers weekNumName="We" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
weekNumName: {
type: String,
default: 'W'
}
2
3
4
format
Format the value of the date(s) in the input field. Formatting is done automatically via the built-in javascript methods using the provided locale. However, you can override the default format by providing a custom formatter function
Accepted values:
Object
- These are constructor options for theIntl.DateTimeFormatOptions
, you can check all the accepted properties hereopen in new windowFunction
- You can provide a custom function that will do a formatting. The function has to return a string
Code
<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();
// In case of a range picker, you'll receive [Date, Date]
const format = (date) => {
const day = date.getDate();
const month = date.getMonth();
const year = date.getFullYear();
return `Selected date is ${day}/${month}/${year}`;
}
return {
date,
format,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
type: [Object, Function],
default: () => ({})
}
2
3
4
previewFormat
Format the value of the date(s) in the action row.
Same configuration as in format prop
Code
<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();
// In case of a range picker, you'll receive [Date, Date]
const format = (date) => {
const day = date.getDate();
const month = date.getMonth();
const year = date.getFullYear();
return `Selected date is ${day}/${month}/${year}`;
}
return {
date,
format,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
type: [Object, Function],
default: () => ({})
}
2
3
4
hideInputIcon
Hide calendar icon in the input field
Code
<template>
<Datepicker v-model="date" hideInputIcon />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
type: Boolean,
default: false
}
2
3
4
state
Validation state of the calendar value
Sets the green/red border depending on the value
Code
<template>
<Datepicker v-model="date" :state="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
type: Boolean,
default: null
}
2
3
4
clearable
Add clear icon to the input field where you can set the value to null
Code
<template>
<Datepicker v-model="date" :clearable="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
type: Boolean,
default: true
}
2
3
4
closeOnScroll
Close datepicker menu on page scroll
Code
<template>
<Datepicker v-model="date" closeOnScroll />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
type: Boolean,
default: true
}
2
3
4
autoApply
If sets to true, clicking on a date value will automatically select the value. You should not enable this if you are using time picker.
Code
<template>
<Datepicker v-model="date" autoApply :enableTimePicker="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
type: Boolean,
default: false
}
2
3
4
filters
Disable specific values from being selected in the month, year and time picker overlays
Code
<template>
<!-- Disable first 3 months -->
<Datepicker v-model="date" :filters="{ months: [0, 1, 2] }" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Accepted value:
Object
{
months?: number[]; // 0 = Jan, 11 - Dec
years?: number[]; // Array of years to disable
times?: {
hours?: number[] // disable specific hours
minutes?: number[] // disable sepcific minutes
}
}
2
3
4
5
6
7
8
{
type: Object,
default: () => ({})
}
2
3
4
disableMonthYearSelect
Removes the month and year picker
Code
<template>
<Datepicker v-model="date" disableMonthYearSelect />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
type: Boolean,
default: false
}
2
3
4
yearRange
Specify start and end year for years to generate
Code
<template>
<Datepicker v-model="date" :yearRange="[2020, 2040]" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Accepted value:
[number, number]
, e.g.[1900, 2100]
{
type: Array,
default: () => [1970, 2100]
}
2
3
4
disabledDates
Disable specific dates
Code
<template>
<!--Disable 6th of September 2021 and 11th of November 2021-->
<Datepicker v-model="date" :disabledDates="disabledDates" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
const disabledDates = ref([new Date(2021, 8, 6), new Date(2021, 10, 11)])
return {
disabledDates,
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Accepted values:
Date[]
Date.toSting()[]
{
type: Array,
default: () => []
}
2
3
4
inline
Remove the input field and places the calendar in your parent component
Code
<template>
<Datepicker v-model="date" inline />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
type: Boolean,
default: false
}
2
3
4
selectText
Select text label in the action row
Code
<template>
<Datepicker v-model="date" selectText="Pick" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
type: String,
default: 'Select'
}
2
3
4
cancelText
Cancel text label in the action row
Code
<template>
<Datepicker v-model="date" cancelText="Close" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
type: String,
default: 'Cancel'
}
2
3
4