Props

List of available props

Info

When checking the examples, for boolean prop types, the example will show the behavior opposite of what is set for the default value
If you use the component in the browser <script> tag, make sure to pass multi-word props with -, for example, is24 as is-24 and so on

Modes

Set the default mode for the datepicker

Info

Depending on the mode, v-model might be different, so make sure to use the proper configuration

range

Range picker mode

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" range />
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
    setup() {
        const date = ref();

        // For demo purposes assign range from the current date
        onMounted(() => {
            const startDate = new Date();
            const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
            date.value = [startDate, endDate];
        })
        
        return {
            date,
        }
    }
}
</script>

autoRange

Predefine range to select

Info

range prop must be enabled

Type: number | string
Default: null

Code Example

vue

<template>
    <Datepicker v-model="date" range auto-range="5" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
          date,
        }
    }
}
</script>

multiCalendars

Enabling this prop will show multiple calendars side by side (on mobile devices, they will be in a column layout) for range picker. You can also pass a number to show more calendars. If you pass true, 2 calendars will be shown automatically.

Info

range prop must be enabled

This mode is not supported with monthPicker, yearPicker and timePicker

Type: boolean | number | string
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" range multiCalendars />
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
    setup() {
        const date = ref();

        onMounted(() => {
          const startDate = new Date();
          const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
          date.value = [startDate, endDate];
        })
        
        return {
          date,
        }
    }
}
</script>

monthPicker

Change datepicker mode to select only month and year

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="month" monthPicker />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const month = ref({ 
            month: new Date().getMonth(),
            year: new Date().getFullYear()
        });
        
        return {
            month,
        }
    }
}
</script>

timePicker

Change datepicker mode to select only time

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="time" timePicker />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const time = ref({ 
            hours: new Date().getHours(),
            minutes: new Date().getMinutes()
        });
        
        return {
            time,
        }
    }
}
</script>

textInput

When enabled, will try to parse the date from the user input. You can also adjust the default behavior by providing text input options

Text input works with all picker modes.

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" placeholder="Start Typing ..." textInput />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
            date,
        }
    }
}
</script>

inline

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

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" inline autoApply />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

multiDates

Allow selecting multiple single dates. When changing time, the latest selected date is affected. To deselect the date, click on the selected value

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" multiDates />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
          date,
        }
    }
}
</script>

flow

Define the selecting order. Position in the array will specify the execution step. When you overwrite the execution step, the flow is reset

Type: ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds')[]
Default: []

Info

Flow is not supported with multiCalendars mode

Code Example

vue

<template>
    <Datepicker v-model="date" :flow="flow" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        const flow = ref(['month', 'year', 'calendar']);
        
        return {
          date,
          flow,
        }
    }
}
</script>

utc

Output date(s) will be in UTC timezone string. You can use this if you gather dates from different timezones and want to send the date directly to the server

Type: boolean | 'preserve'
Default: false

Info

preserve - The input date will be the same, meaning, that it will not convert the date in the local timezone, but preserve the original UTC time.
true - The input date will be converted to the local timezone. Output date will be in the UTC format. Meaning that what is the actual v-model and what is displayed in the picker will be in the timezone difference.

Code Example

vue

<template>
    <Datepicker v-model="date" utc />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
          date,
        }
    }
}
</script>

weekPicker

Select a specific week range

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" weekPicker />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        // On selection, it will be the first and the last day of the week
        const date = ref();
        
        return {
          date,
        }
    }
}
</script>

vertical

Sets the datepicker orientation in the vertical mode. This mode will change the arrow action from left/right to the top/bottom, transitions will also be vertical

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" vertical />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
          date,
        }
    }
}
</script>

yearPicker

Change datepicker mode to select only year

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="year" yearPicker />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const year = ref(new Date().getFullYear());
        
        return {
          year,
        }
    }
}
</script>

modelAuto

Automatically switch between range and single picker modes

Type: Boolean
Default: false

Note

Since this prop in the background uses a partialRange make sure that range prop is provided and keep partialRange to true

This is only compatible with date pickers, specific modes are not supported

Code Example

vue

<template>
    <Datepicker v-model="date" modelAuto range />
    <p v-if="date">Selected date: {{ date }}</p>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
            date,
        }
    }
}
</script>

Modes configuration

Props for configuring and extending the datepicker when using a specific mode

partialRange

This prop is enabled by default, meaning, two dates are not required for range input. If no second date is selected, the value will be null

Type: boolean
Default: true

Code Example

vue

<template>
    <Datepicker v-model="date" range :partialRange="false" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
          date,
        }
    }
}
</script>

presetRanges

When configured, it will provide a sidebar with configured range that user can select

Info

range prop must be enabled

Type: { label: string; range: Date[] | string[]; style?: Record<string, string> }[]
Default: []

Code Example

vue

<template>
    <Datepicker v-model="date" range :presetRanges="presetRanges" />
</template>

<script>
import { ref } from 'vue';
import { endOfMonth, endOfYear, startOfMonth, startOfYear, subMonths } from 'date-fns';

export default {
    setup() {
        const date = ref();

        const presetRanges = ref([
          { label: 'Today', range: [new Date(), new Date()] },
          { label: 'This month', range: [startOfMonth(new Date()), endOfMonth(new Date())] },
          {
            label: 'Last month',
            range: [startOfMonth(subMonths(new Date(), 1)), endOfMonth(subMonths(new Date(), 1))],
          },
          { label: 'This year', range: [startOfYear(new Date()), endOfYear(new Date())] },
        ]);
        
        return {
          date,
          presetRanges,
        }
    }
}
</script>

Info

range prop must be enabled

minRange

Set minimal range available for selection. This is the number of days between the selected start and end date

Info

range prop must be enabled

Type: number | string
Default: null

Code Example

vue

<template>
    <Datepicker v-model="date" range minRange="3" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
          date,
        }
    }
}
</script>

maxRange

Set maximal range available for selection. This is the number of days between the selected start and end date

Info

range prop must be enabled

Type: number | string
Default: null

Code Example

vue

<template>
    <Datepicker v-model="date" range maxRange="7" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
          date,
        }
    }
}
</script>

fixedStart

Allows only adjustment of the second date in the defined range

Info

range prop must be enabled

WARNING

v-model must be provided with both dates.

Should not be used in combination with fixedEnd

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" range fixedStart :clearable="false" />
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
    setup() {
        const date = ref();

        // For demo purposes assign range from the current date
        onMounted(() => {
            const startDate = new Date();
            const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
            date.value = [startDate, endDate];
        })
        
        return {
            date,
        }
    }
}
</script>

fixedEnd

Allows only adjustment of the first date in the defined range

Info

range prop must be enabled

WARNING

v-model must be provided with both dates.

Should not be used in combination with fixedStart

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" range fixedEnd :clearable="false" />
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
    setup() {
        const date = ref();

        // For demo purposes assign range from the current date
        onMounted(() => {
            const startDate = new Date();
            const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
            date.value = [startDate, endDate];
        })
        
        return {
            date,
        }
    }
}
</script>

multiCalendarsSolo

When enabled, both calendars will be independent of each other

Info

range and multiCalendars props must be enabled

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" range multiCalendars multiCalendarsSolo />
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
    setup() {
        const date = ref();

        onMounted(() => {
          const startDate = new Date();
          const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
          date.value = [startDate, endDate];
        })
        
        return {
          date,
        }
    }
}
</script>

multiStatic

The default calendar view when using multiCalendars is to keep it on the month selected by the user. When this prop is disabled, it will auto-update the first calendar when the range starts and adjust the rest of them based on the first month

Info

range and multiCalendars props must be enabled

Type: boolean
Default: true

Code Example

vue

<template>
    <Datepicker v-model="date" range multiCalendars :multiStatic="false" />
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
    setup() {
        const date = ref();

        onMounted(() => {
          const startDate = new Date();
          const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
          date.value = [startDate, endDate];
        })
        
        return {
          date,
        }
    }
}
</script>

textInputOptions

Configuration for textInput prop

Type:

{ 
  enterSubmit?: boolean;
  tabSubmit?: boolean;
  openMenu?: boolean;
  format?: string | string[] | ((value: string) => Date | null);
  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. You can also pass multiple parser patterns or a custom parser function and parse the input yourself.
rangeSeparator: If you use range mode, the default separator is -, you can change it here

Code Example

vue

<template>
    <Datepicker 
      v-model="date"
      placeholder="Start Typing ..."
      textInput
      :textInputOptions="textInputOptions" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        const textInputOptions = ref({
          format: 'MM.dd.yyyy'
        })
        
        return {
            date,
            textInputOptions,
        }
    }
}
</script>

modeHeight

If you use monthPicker and timePicker, set custom height of the picker in px

Type: number | string
Default: 255

Code Example

vue

<template>
    <Datepicker v-model="time" timePicker modeHeight="120" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const time = ref({ 
            hours: new Date().getHours(),
            minutes: new Date().getMinutes()
        });
        
        return {
            time,
        }
    }
}
</script>

inlineWithInput

Use input with the inline mode, useful if you enable textInput

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" inline textInput inlineWithInput autoApply />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

multiDatesLimit

Limit the number of dates to select when multiDates is enabled

Type: number | string
Default: null

Code Example

vue

<template>
  <Datepicker v-model="date" multiDates multiDatesLimit="3" />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const date = ref();

    return {
      date,
    }
  }
}
</script>

Formatting

Format options for the value displayed in the input or preview

format

Format the value of the date(s) in the input field. Formatting is done automatically via provided string format. However, you can override the default format by providing a custom formatter function

Type: string | (params: Date | Date[]) => string
Default:
- Single picker: 'MM/dd/yyyy HH:mm'
- Range picker: 'MM/dd/yyyy HH:mm - MM/dd/yyyy HH:mm'
- Month picker: 'MM/yyyy'
- Time picker: 'HH:mm'
- Time picker range: 'HH:mm - HH:mm'

Info

If is24 prop is set to false, hours format will be changed to 'hh:mm aa'

For additional information on how to pass custom string format you can check Unicode tokens

Code Example

vue

<template>
    <Datepicker v-model="date" :format="format" />
</template>

<script>
// Example using a custom format function
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        // In case of a range picker, you'll receive [Date, Date]
        const format = (date) => {
            const day = date.getDate();
            const month = date.getMonth() + 1;
            const year = date.getFullYear();

            return `Selected date is ${day}/${month}/${year}`;
        }
        
        return {
            date,
            format,
        }
    }
}
</script>

previewFormat

Format the value of the date(s) in the action row

Type: string | (params: Date | Date[]) => string
Default: null

Same configuration as in format prop

Note: If not provided, it will auto inherit data from the format prop

Code Example

vue

<template>
    <Datepicker v-model="date" :previewFormat="format" />
</template>

<script>
// Example using a custom format function
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        // In case of a range picker, you'll receive [Date, Date]
        const format = (date) => {
            const day = date.getDate();
            const month = date.getMonth() + 1;
            const year = date.getFullYear();

            return `Selected date is ${day}/${month}/${year}`;
        }

        return {
            date,
            format,
        }
    }
}
</script>

monthNameFormat

Set the month name format

Type: 'short' | 'long'
Default: 'short'

Code Example

vue

<template>
    <Datepicker v-model="date" monthNameFormat="long" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

Localization

Localization options and label props

locale

Set datepicker locale. Datepicker will use built in javascript locale formatter to extract month and weekday names

Type: string
Default: 'en-US'

Code Example

vue

<template>
    <Datepicker v-model="date" locale="de" cancelText="abbrechen" selectText="auswählen" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

formatLocale

Specify localized format output. This prop uses Locale object from date-fns library

For more info about supported locales or adding a custom locale object, please visit date-fns documentation

Type: Locale
Default: null

Code Example

vue

<template>
    <Datepicker v-model="date" :format-locale="ja" format="E" />
</template>

<script>
import { ref } from 'vue';
import { ja } from 'date-fns/locale';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
            ja,
        }
    }
}
</script>

selectText

Select text label in the action row

Type: string
Default: 'Select'

Code Example

vue

<template>
    <Datepicker v-model="date" selectText="Pick" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

cancelText

Cancel text label in the action row

Type: string
Default: 'Cancel'

Code Example

vue

<template>
    <Datepicker v-model="date" cancelText="Close" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

nowButtonLabel

Change the text for now button

Type: string
Default: 'Now'

Code Example

vue

<template>
    <Datepicker v-model="date" showNowButton nowButtonLabel="Current" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
            date,
        }
    }
}
</script>

weekNumName

Sets the label for the week numbers column

Type: string
Default: 'W'

Code Example

vue

<template>
    <Datepicker v-model="date" weekNumbers weekNumName="We" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

ariaLabels

Customize the language of the HTML aria-labels for localized accessibility

Type

interface AriaLabels {
  toggleOverlay?: string;
  menu?: string;
  input?: string;
  calendarWrap?: string;
  calendarDays?: string;
  openTimePicker?: string;
  closeTimePicker?: string;
  incrementValue?: (type: 'hours' | 'minutes' | 'seconds') => string;
  decrementValue?: (type: 'hours' | 'minutes' | 'seconds') => string;
  openTpOverlay?: (type: 'hours' | 'minutes' | 'seconds') => string;
  amPmButton?: string;
  openYearsOverlay?: string;
  openMonthsOverlay?: string;
  nextMonth?: string;
  prevMonth?: string;
}

Default: {}

Code Example

vue

<template>
    <Datepicker v-model="date" :ariaLabels="ariaLabels" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        const ariaLabels = ref({ menu: 'Some custom menu label' })
        
        return {
          date,
          ariaLabels,
        }
    }
}
</script>

dayNames

Provide custom labels for day names in the calendar header

Note

Make sure that provided array has a length of 7

Type: ((lang: string, weekStart: number) => string[]) | string[]
Default: null;

Code Example

vue

<template>
    <Datepicker v-model="date" :dayNames="['1', '2', '3', '4', '5', '6', '7']" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

General configuration

General behavior props configuration

uid

Pass an id to the input and menu elements. If provided, you can select menu id as dp-menu-${uid} and input id as dp-input-${uid}

Type: string
Default: null

Code Example

vue

<template>
    <Datepicker v-model="date" uid="demo" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

monthChangeOnScroll

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

You can also set the value to 'inverse', so that scrolling down will go to the previous month and up on the next

Type: boolean | 'inverse'
Default: true

Code Example

vue

<template>
    <Datepicker v-model="date" :monthChangeOnScroll="false" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

modelValue v-model

v-model binding

Type:
- Single picker: Date | string
  - In case of multiDates it will be Date[] | string[]
- Month picker: { month: number | string; year: number | string }
- Time picker: { hours: number | string; minutes: number | string; seconds?: number | string }
- Week picker: [Date, Date] | [string, string]
- Range picker: [Date, Date] | [string | string]
  - If you use time picker, it will be { hours: number | string; minutes: number | string; seconds?: number | string }[]
  - If you use month picker, it will be { month: number | string; year: number | string }[]
- Year picker: number | string
Default: null

Code Example

vue

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

modelType

Specify a custom format for v-model

Type: 'timestamp' | 'format' | string
Default: null

Note

timestamp - uses timestamp for binding
format - uses provided format or fallbacks to the default one. Must be a string
string - use custom format by providing a custom pattern with unicode tokens

This is only compatible with date pickers, specific modes are not supported

Code Example

vue

<template>
    <Datepicker v-model="date" modelType="dd.MM.yyyy" />
    <p v-if="date">Selected date: {{ date }}</p>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
            date,
        }
    }
}
</script>

clearable

Add a clear icon to the input field where you can set the value to null

Type: boolean
Default: true

Code Example

vue

<template>
    <Datepicker v-model="date" :clearable="false" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

closeOnScroll

Close datepicker menu on page scroll

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" closeOnScroll />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

autoApply

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

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" autoApply />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

placeholder

Input placeholder

Type: string
Default: null

Code Example

vue

<template>
    <Datepicker v-model="date" placeholder="Select Date" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
            date,
        }
    }
}
</script>

noToday

Hide today mark from the calendar

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" noToday />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

closeOnAutoApply

If set to false, clicking on a date value will automatically select the value but will not close the datepicker menu. Closing will be available on a click-away or clicking on the input again

Type: boolean
Default: true

Code Example

vue

<template>
    <Datepicker v-model="date" autoApply :closeOnAutoApply="false" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

markers

Add markers to the specified dates with (optional) tooltips

Type:

{ 
date: Date | string;
type?: 'dot' | 'line';
tooltip?: { text: string; color?: string }[];
color?: string;
}[]

Default: []

Code Example

vue

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

highlight

Specify highlighted dates

Type: Date[] | string[] | number[] | ((date: Date) => boolean)
Default: []

Code Example

vue

<template>
    <Datepicker v-model="date" :highlight="highlightedDates" />
</template>

<script>
import { ref } from 'vue';
import addDays from 'date-fns/addDays';

export default {
    setup() {
        const date = ref(new Date());
        const highlightedDates = ref([
          addDays(new Date(), 1),
          addDays(new Date(), 2),
          addDays(new Date(), 3),
        ])
        
        return {
            date,
            highlightedDates,
        }
    }
}
</script>

highlightWeekDays

Specify highlighted days of the week

Type: number[]
Default: null

Code Example

vue

<template>
    <Datepicker v-model="date" :highlightWeekDays="[0, 6]" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

showNowButton

Enable button to select current date and time

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" showNowButton />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
            date,
        }
    }
}
</script>

disabled

Disables the input

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" disabled />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

readonly

Sets the input in readonly state

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" readonly />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

required

Add required flag to the input field. Use with form tag for built-in validation

Type: boolean
Default: false

Code Example

vue

<template>
    <form @submit.prevent="submitForm">
      <Datepicker v-model="date" required />
      <button type="submit">Submit form</button>
    </form>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        const submitForm = () => {
          alert('Form submitted');
        }
        
        return {
            date,
            submitForm,
        }
    }
}
</script>

name

Sets the input name attribute

Type: string
Default: null

Code Example

vue

<template>
    <Datepicker v-model="date" name="date-picker" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

autocomplete

Sets the input autocomplete attribute

Type: string
Default: null

Code Example

vue

<template>
    <Datepicker v-model="date" autocomplete="off" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

keepActionRow

When enabled, it will keep the action row even if the autoApply prop is enabled

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" autoApply keepActionRow :closeOnAutoApply="false" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

noSwipe

Disable touch events on the calendar

Type: Boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" noSwipe />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

Calendar configuration

Configure calendar options such as behavior or available dates

weekNumbers

Display week numbers in the calendar. Datepicker uses ISO week numbering

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" weekNumbers />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

hideOffsetDates

Hide dates from the previous/next month in the calendar

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" hideOffsetDates />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

minDate

All dates before the given date will be disabled

Type: Date | string
Default: null

Code Example

vue

<template>
    <Datepicker v-model="date" :minDate="new Date()" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

maxDate

All dates after the given date will be disabled

Type: Date | string
Default: null

Code Example

vue

<template>
    <Datepicker v-model="date" :maxDate="new Date()" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

preventMinMaxNavigation

Prevent navigation after or before the minDate or maxDate

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" :minDate="minDate" :maxDate="maxDate" preventMinMaxNavigation />
</template>

<script>
import { ref } from 'vue';
import { addMonths, getMonth, getYear, subMonths } from 'date-fns';

export default {
    setup() {
        const date = ref(new Date());
        // 2 months before and after the current date
        const minDate = computed(() => subMonths(new Date(getYear(new Date()), getMonth(new Date())), 2));
        const maxDate = computed(() => addMonths(new Date(getYear(new Date()), getMonth(new Date())), 2));
        
        return {
            date,
            minDate,
            maxDate
        }
    }
}
</script>

ignoreTimeValidation

By default, when using maxDate or minDate the time set on those dates will be included in validation. If you want to just check dates, pass this option to disable time check

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker 
            v-model="date"
            :maxDate="maxDate"
            ignoreTimeValidation
            placeholder="Select Date" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        // Today with the time 00:00
        // Without ignoreTimeValidation, you will not be able to select the date
        const maxDate = ref(new Date(2022, (new Date()).getMonth(), (new Date()).getDate()));
        
        return {
            date,
            maxDate,
        }
    }
}
</script>

startDate

Open the datepicker to some preselected month and year

Type: Date | string
Default: null

Code Example

vue

<template>
    <Datepicker v-model="date" :startDate="startDate" placeholder="Select Date" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        const startDate = ref(new Date(2020, 1));
        
        return {
            date,
            startDate,
        }
    }
}
</script>

weekStart

Day from which the week starts. 0-6, 0 is Sunday, 6 is Saturday

Type: number | string
Default: 1

Code Example

vue

<template>
    <Datepicker v-model="date" weekStart="0" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

filters

Disable specific values from being selected in the month, year, and time picker overlays

Type:

{
  months?: number[]; // 0 = Jan, 11 - Dec
  years?: number[]; // Array of years to disable
  times?: {
    hours?: number[]; // disable specific hours
    minutes?: number[]; // disable sepcific minutes
    seconds?: number[] // disable specific seconds
  }
}

Default: null

Code Example

vue

<template>
    <Datepicker v-model="date" :filters="filters" />
</template>

<script>
import { ref } from 'vue';
import { getMonth, addMonths } from 'date-fns'

export default {
    setup() {
        const date = ref(new Date());

        // For demo purposes, disable the next 3 months from the current month
        const filters = computed(() => {
          const currentDate = new Date()
          return {
            months: Array.from(Array(3).keys())
                    .map((item) => getMonth(addMonths(currentDate, item + 1)))
          }
        })
        
        return {
            filters,
            date,
        }
    }
}
</script>

disableMonthYearSelect

Removes the month and year picker

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" disableMonthYearSelect />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

yearRange

Specify start and end year for years to generate

Type: [number, number]
Default: [1900, 2100]

Code Example

vue

<template>
    <Datepicker v-model="date" :yearRange="[2020, 2040]" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

reverseYears

Reverse the order of the years in years overlay

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" reverseYears :yearRange="[2020, 2040]" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

allowedDates

Allow only specific dates

Type: string[] | Date[]
Default: []

Code Example

vue

<template>
    <Datepicker v-model="date" :allowedDates="allowedDates" />
</template>

<script>
import { ref, computed } from 'vue';

export default {
    setup() {
        const date = ref();
        
        // For demo purposes, enable only today and tomorrow
        const allowedDates = computed(() => {
          return [
            new Date(),
            new Date(new Date().setDate(new Date().getDate() + 1))
          ];
        });
        
        return {
            date,
          allowedDates,
        }
    }
}
</script>

disabledDates

Disable specific dates

Type: Date[] | string[] | (date: Date) => boolean
Default: []

Note: If you use a custom function, make sure to return true for a disabled date and false for enabled

Code Example

vue

<template>
    <Datepicker v-model="date" :disabledDates="disabledDates" />
</template>

<script>
import { ref, computed } from 'vue';

export default {
    setup() {
        const date = ref(new Date());

        // For demo purposes disables the next 2 days from the current date
        const disabledDates = computed(() => {
            const today = new Date();
            
            const tomorrow = new Date(today)
            tomorrow.setDate(tomorrow.getDate() + 1)
            
            const afterTomorrow = new Date(tomorrow);
            afterTomorrow.setDate(tomorrow.getDate() + 1);
            
            return [tomorrow, afterTomorrow]
        })
        
        return {
            disabledDates,
            date,
        }
    }
}
</script>

disabledWeekDays

Disable specific days from the week

Type: string[] | number[] - 0-6, 0 is Sunday, 6 is Saturday
Default: []

Code Example

vue

<template>
    <Datepicker v-model="date" :disabledWeekDays="[6, 0]" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
            date,
        }
    }
}
</script>

Time picker configuration

Props to configure time picker, whether using it only as time picker or alongside the datepicker

enableTimePicker

Enable or disable time picker

Type: boolean
Default: true

Code Example

vue

<template>
    <Datepicker v-model="date" :enableTimePicker="false" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

is24

Whether to use 24H or 12H mode

Type: boolean
Default: true

Code Example

vue

<template>
    <Datepicker v-model="date" :is24="false" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

enableSeconds

Enable seconds in the time picker

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" enableSeconds />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

hoursIncrement

The value which is used to increment hours via arrows in the time picker

Type: number | string
Default: 1

Code Example

vue

<template>
    <Datepicker v-model="date" hoursIncrement="2" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

minutesIncrement

The value which is used to increment minutes via arrows in the time picker

Type: number | string
Default: 1

Code Example

vue

<template>
    <Datepicker v-model="date" minutesIncrement="5" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

secondsIncrement

The value which is used to increment seconds via arrows in the time picker

Type: number | string
Default: 1

Code Example

vue

<template>
    <Datepicker v-model="date" enableSeconds secondsIncrement="5" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

hoursGridIncrement

The value which is used to increment hours when showing hours overlay

It will always start from 0 until it reaches 24 or 12 depending on the is24 prop

Type: number | string
Default: 1

Code Example

vue

<template>
    <Datepicker v-model="date" hoursGridIncrement="2" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

minutesGridIncrement

The value which is used to increment minutes when showing minutes overlay

It will always start from 0 to 60 minutes

Type: number | string
Default: 5

Code Example

vue

<template>
    <Datepicker v-model="date" minutesGridIncrement="2" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

secondsGridIncrement

The value which is used to increment seconds when showing seconds overlay

Type: number | string
Default: 5

Code Example

vue

<template>
    <Datepicker v-model="date" enableSeconds secondsGridIncrement="2" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

noHoursOverlay

Disable overlay for the hours, only arrow selection will be available

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" noHoursOverlay />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

noMinutesOverlay

Disable overlay for the minutes, only arrow selection will be available

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" noMinutesOverlay />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

noSecondsOverlay

Disable overlay for the seconds, only arrow selection will be available

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" noSecondsOverlay enableSeconds />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

minTime

Sets the minimal available time to pick

Type: { hours?: number | string; minutes?: number | string; seconds?: number | string }
Default: null

Code Example

vue

<template>
    <Datepicker v-model="date" :minTime="{ hours: 11, minutes: 30 }" placeholder="Select Date" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
            date,
        }
    }
}
</script>

maxTime

Sets the maximal available time to pick

Type: { hours?: number | string; minutes?: number | string; seconds?: number | string }
Default: null

Code Example

vue

<template>
    <Datepicker v-model="date" :maxTime="{ hours: 11, minutes: 30 }" placeholder="Select Date" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
            date,
        }
    }
}
</script>

startTime

Set some default starting time

Type:
- Single picker: { hours?: number | string; minutes?: number | string; seconds?: number | string }
- Range picker: { hours?: number | string; minutes?: number | string; seconds?: number | string }[]
Default: null

Code Example

vue

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

disableTimeRangeValidation

Explicitly allow end time in range mode to be before the start time

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="time" timePicker disableTimeRangeValidation range placeholder="Select Time" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const time = ref();
        
        return {
            time,
        }
    }
}
</script>

Positioning

Configure datepicker menu positioning

position

Datepicker menu position

Type: 'left' | 'center' | 'right'
Default: 'center'

Code Example

vue

<template>
    <Datepicker v-model="date" position="left" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

autoPosition

When enabled, based on viewport space available it will automatically position the menu above or bellow input field

Type: boolean
Default: true

Code Example

vue

<template>
    <Datepicker v-model="date" :autoPosition="false" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

altPosition

If you have issues with the menu being miss-placed, you can enable this prop to use an alternative positioning method. By default, if passed true, datepicker will use an alternative function to recalculate position, but you can also pass a custom function that can position the menu to your liking.

Type: boolean | ((el: HTMLElement | undefined) => { top: string; left: string; transform: string })
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" altPosition />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

teleport

Set teleport target

Type: string | HTMLElement
Default: 'body'

You can inspect the page and check the menu placement

Code Example

vue

<template>
    <Datepicker v-model="date" teleport="#app" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
            date,
        }
    }
}
</script>

teleportCenter

Sets the menu position on the page center, useful for smaller screens where there is no space available above or bellow the input field

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" teleportCenter />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

Keyboard

Configure keyboard actions

Info

You can press tab key in the menu, and it will autofocus elements, pressing enter will do a click action like open overlay or select a date.

All keyboard events are enabled by default

escClose

Esc key closes the menu

Type: boolean
Default: true

Code Example

vue

<template>
    <Datepicker v-model="date" :escClose="false" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

spaceConfirm

space key selects the date (like you pressed the select button)

Type: boolean
Default: true

Code Example

vue

<template>
    <Datepicker v-model="date" :spaceConfirm="false" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

monthChangeOnArrows

Change months via arrow keys

Type: boolean
Default: true

Code Example

vue

<template>
    <Datepicker v-model="date" :monthChangeOnArrows="false" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

arrowNavigation

By default, arrow keys will change the current month. When enabling this prop, you can navigate the menu via arrow keys instead of using tabs

Info

arrowNavigation is not supported with the multiCalendars prop

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" arrowNavigation />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

Look and feel

Customization options

transitions

Control transitions inside the menu. You can define your own or disable them. Datepicker uses Vue built in transitions component for transitions control. To configure you own, please check the Vue documentation and provide a transition name in the prop

Type: boolean | {open?: string; close?: string; next?: string; previous?: string; menuAppear?: string; vNext?: string; vPrevious?: string; }
Default: true

menuAppear is added on menu open

open and close are added on overlays show/hide

next and previous are added when switching months in the calendar

vNext and vPrevious are added when switching months in the calendar in the vertical mode

Code Example

vue

<template>
    <Datepicker v-model="date" :transitions="false" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

dark

Theme switch between the dark and light mode

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" dark />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

offset

Number of pixels between the menu and input

Type: number | string
Default: 10

Code Example

vue

<template>
    <Datepicker v-model="date" :offset="20" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

hideInputIcon

Hide calendar icon in the input field

Type: boolean
Default: false

Code Example

vue

<template>
    <Datepicker v-model="date" hideInputIcon />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

state

Validation state of the calendar value. Sets the green/red border depending on the value

Type: boolean
Default: null

Code Example

vue

<template>
    <Datepicker v-model="date" :state="false" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

inputClassName

Add a custom class to the input field

Type: string
Default: null

Code Example

vue

<template>
    <Datepicker v-model="date" inputClassName="dp-custom-input" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

<style lang="scss">
.dp-custom-input {
  box-shadow: 0 0 6px #1976d2;
  color: #1976d2;

  &:hover {
    border-color: #1976d2;
  }
}
</style>

menuClassName

Add a custom class to the datepicker menu wrapper

Type: string
Default: null

Code Example

vue

<template>
    <Datepicker v-model="date" menuClassName="dp-custom-menu" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

<style lang="scss">
.dp-custom-menu {
  box-shadow: 0 0 6px #1976d2;
}
</style>

calendarClassName

Add a custom class to the calendar wrapper

Type: string
Default: null

Code Example

vue

<template>
    <Datepicker v-model="date" calendarClassName="dp-custom-calendar" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

<style lang="scss">
.dp-custom-calendar {
  .dp__calendar_item {
    border: 1px solid var(--dp-border-color-hover);
  }
}
</style>

calendarCellClassName

Add a custom class to the calendar cell wrapper

Type: string
Default: null

Code Example

vue

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

Props #

Modes #

range #

autoRange #

multiCalendars #

monthPicker #

timePicker #

textInput #

inline #

multiDates #

flow #

utc #

weekPicker #

vertical #

yearPicker #

modelAuto #

Modes configuration #

partialRange #

presetRanges #

minRange #

maxRange #

fixedStart #

fixedEnd #

multiCalendarsSolo #

multiStatic #

textInputOptions #

modeHeight #

inlineWithInput #

multiDatesLimit #

Formatting #

format #

previewFormat #

monthNameFormat #

Localization #

locale #

formatLocale #

selectText #

cancelText #

nowButtonLabel #

weekNumName #

ariaLabels #

dayNames #

General configuration #

uid #

monthChangeOnScroll #

modelValue v-model #

modelType #

clearable #

closeOnScroll #

autoApply #

placeholder #

noToday #

closeOnAutoApply #

markers #

highlight #

highlightWeekDays #

showNowButton #

disabled #

readonly #

required #

name #

autocomplete #

keepActionRow #

noSwipe #

Calendar configuration #

weekNumbers #

hideOffsetDates #

minDate #

maxDate #

preventMinMaxNavigation #

ignoreTimeValidation #

startDate #

weekStart #

filters #

disableMonthYearSelect #

yearRange #

reverseYears #

allowedDates #

disabledDates #

disabledWeekDays #

Props

Modes

range

autoRange

multiCalendars

monthPicker

timePicker

textInput

inline

multiDates

flow

utc

weekPicker

vertical

yearPicker

modelAuto

Modes configuration

partialRange

presetRanges

minRange

maxRange

fixedStart

fixedEnd

multiCalendarsSolo

multiStatic

textInputOptions

modeHeight

inlineWithInput

multiDatesLimit

Formatting

format

previewFormat

monthNameFormat

Localization

locale

formatLocale

selectText

cancelText

nowButtonLabel

weekNumName

ariaLabels

dayNames

General configuration

uid

monthChangeOnScroll

modelValue v-model

modelType

clearable

closeOnScroll

autoApply

placeholder

noToday

closeOnAutoApply

markers

highlight

highlightWeekDays

showNowButton

disabled

readonly

required

name

autocomplete

keepActionRow

noSwipe

Calendar configuration

weekNumbers

hideOffsetDates

minDate

maxDate

preventMinMaxNavigation

ignoreTimeValidation

startDate

weekStart

filters

disableMonthYearSelect

yearRange

reverseYears

allowedDates

disabledDates

disabledWeekDays