Props

List of available props

Info

  • When checking examples, for boolean prop types, the example will show opposite behavior than 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 as is-24 and so on

Modes

Set the default mode for the datepicker

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

autoRange

Predefine range to select

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

twoCalendars

Enabling this prop will show two calendars side by side for range picker

Note: range prop must be enabled

  • Type: boolean
  • Default: false
Code Example
<template>
    <Datepicker v-model="date" range twoCalendars />
</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

monthPicker

Change datepicker mode to select only month and year

  • Type: boolean
  • Default: false

Note: When using this mode, range picker is not available

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

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

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

Drawbacks:

  • Validation properties will not work in the text input
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

twoCalendarsSolo

When enabled, both calendars will be independent of each other

Note: range and twoCalendars props must be enabled

  • Type: boolean
  • Default: false
Code Example
<template>
    <Datepicker v-model="date" range twoCalendars twoCalendarsSolo />
</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

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 object
  • tabSubmit: When enabled, pressing tab will select a date if the input value is a valid date object
  • openMenu: When enabled, opens the menu when clicking on the input field
  • format: Override the default parsing format. Default is the string value from format
  • rangeSeparator: If you use range 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>
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

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

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'

Note: 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 tokensopen in new window

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

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

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

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

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

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

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

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

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

monthChangeOnScroll

Scrolling the mouse wheel over the calendar will change the month. Scroll up for next month and vice versa

You can also set the value to 'inverse', so that scroll up will go to the previous month and down 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

modelValue v-model

v-model binding

  • Type:
    • Single picker: Date | string
    • Month picker: { month: number | string; year: number | string }
    • Time picker: { hours: number | string; minutes: number | string; seconds?: number | string }
    • Range picker: [Date, Date] | [string | string]
  • 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>
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

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

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

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

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

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

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

markers

Add markers to the specified dates with (optional) tooltips

  • Type:
{ 
date: Date | string;
type?: 'dot' | 'line';
tooltip?: { text: string; color?: string }[];
color?: string;
}[]
1
2
3
4
5
6
  • 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>
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
32
33
34
35
36
37
38
39

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

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

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

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

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

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

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

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

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

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
  }
}
1
2
3
4
5
6
7
8
9
  • Default: null
Code Example
<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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 }[]
  • 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

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

altPosition

If you have issues with the menu being miss-placed, you can enable this prop to use an alternative positioning method

  • Type: boolean
  • 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

teleport

Set teleport target

  • Type: string
  • 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

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

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

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

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

Look and feel

Customization options

transitions

Control transitions inside the menu. You can define your own or disable them. Datepicker uses Vue built in transitionsopen in new window 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}
  • Default: true

open and close are added on overlays show/hide

next and previous are added when switching months in the calendar

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

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

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

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

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

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

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Last Updated: 12/6/2021, 9:06:27 PM