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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: Boolean,
    default: true
}
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: Boolean,
    default: true
}
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: String,
    default: 'en-US'
}
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: Boolean,
    default: false
}
1
2
3
4

modelValue v-model

v-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>
1
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
}
1
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>
1
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'
}
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: Boolean,
    default: true
}
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: Boolean,
    default: false
}
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: String,
    default: null
}
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: Boolean,
    default: false
}
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: [String, Number],
    default: 1
}
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: [String, Number],
    default: 1
}
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: [String, Number],
    default: 1
}
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: [String, Number],
    default: 5
}
1
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>
1
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
}
1
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>
1
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
}
1
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>
1
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: () => ({})
}
1
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>
1
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: () => ({})
}
1
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>
1
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
}
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: Boolean,
    default: false
}
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: Boolean,
    default: false
}
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
weekNumName: {
    type: String,
    default: 'W'
}
1
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 the Intl.DateTimeFormatOptions, you can check all the accepted properties hereopen in new window
  • Function - 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>
1
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: () => ({})
}
1
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>
1
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: () => ({})
}
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: Boolean,
    default: false
}
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: Boolean,
    default: null
}
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: Boolean,
    default: true
}
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: Boolean,
    default: true
}
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: Boolean,
    default: false
}
1
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>
1
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
    }
}
1
2
3
4
5
6
7
8
{
    type: Object,
    default: () => ({})
}
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: Boolean,
    default: false
}
1
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>
1
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]
}
1
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>
1
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: () => []
}
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: Boolean,
    default: false
}
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: String,
    default: 'Select'
}
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: String,
    default: 'Cancel'
}
1
2
3
4
Last Updated: 9/2/2021, 6:38:53 PM