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, 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
    type: Boolean,
    default: false
}
1
2
3
4

monthPicker

Change datepicker mode to select only month and year

Notes:

  • When using this mode, range picker is not available
  • For format prop, only custom function is used
Code
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
    type: Boolean,
    default: false
}
1
2
3
4

timePicker

Change datepicker mode to select only time

Note: for format prop, only custom function is used

Code
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
    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:

Regular

  • Date
  • Date.toString()
  • [Date, Date]
  • [Date.toString(), Date.toString()]
  • null

monthPicker

  • null
  • { month: number | string, year: number | string }

timePicker

  • null
  • { hours: number | string, minutes: number | string }
{
    type: [String, Date, Array, Object],
    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(new Date());
        
        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 the 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(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

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(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: 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(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: 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(new Date());
        
        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(new Date());
        
        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(new Date());
        
        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(new Date());
        
        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(new Date());
        
        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(new Date());
        
        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(new Date());
        
        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(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: 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(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: 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(new Date());
        
        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(new Date());
        // 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(new Date());
        // 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(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: 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(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: 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(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

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(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: false
}
1
2
3
4

autoApply

If set to true, clicking on a date value will automatically select the value

Code
<template>
    <Datepicker v-model="date" autoApply />
</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: false
}
1
2
3
4

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

Code
<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>
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

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(new Date());
        
        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(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: 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(new Date());
        
        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>
    <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>
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
28
29
30
31

Accepted values:

  • Date[]
  • Date.toSting()[]
{
    type: Array,
    default: () => []
}
1
2
3
4

inline

Removes the input field and places the calendar in your parent component

Code
<template>
    <Datepicker v-model="date" inline autoApply />
</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: 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(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: '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(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: 'Cancel'
}
1
2
3
4
Last Updated: 9/4/2021, 4:48:12 PM