Datepicker comes with the theme support with css variables. It provides two classes that are applied based on the chosen dark/light mode
To change variables, simply override the classes with your custom values.
Info
<style> tag, can be in global or scoped, depending on your needsdp__theme_dark, dark prop must be set to true.dp__theme_dark {
+import{_ as s,c as i,o as a,am as n}from"./chunks/framework.BKRot_tQ.js";const F=JSON.parse('{"title":"Customization - Theming","description":"Datepicker theme configuration for light and dark theme","frontmatter":{"title":"Customization - Theming","description":"Datepicker theme configuration for light and dark theme"},"headers":[],"relativePath":"customization/theming/index.md","filePath":"customization/theming/index.md"}'),h={name:"customization/theming/index.md"},k=n(`Theming
Datepicker comes with the theme support with css variables. It provides two classes that are applied based on the chosen dark/light mode
To change variables, simply override the classes with your custom values.
Info
- When changing the properties, you only need to declare the class in the
<style> tag, can be in global or scoped, depending on your needs - For the date picker to use
dp__theme_dark, dark prop must be set to true
Dark mode configuration
css.dp__theme_dark {
--dp-background-color: #212121;
--dp-text-color: #fff;
--dp-hover-color: #484848;
diff --git a/docs/assets/customization_theming_index.md.DkqYS7LC.lean.js b/docs/assets/customization_theming_index.md.BHtaDIzU.lean.js
similarity index 78%
rename from docs/assets/customization_theming_index.md.DkqYS7LC.lean.js
rename to docs/assets/customization_theming_index.md.BHtaDIzU.lean.js
index 42edc876..2d4704f5 100644
--- a/docs/assets/customization_theming_index.md.DkqYS7LC.lean.js
+++ b/docs/assets/customization_theming_index.md.BHtaDIzU.lean.js
@@ -1 +1 @@
-import{_ as s,c as i,o as a,am as n}from"./chunks/framework.IJS20kTW.js";const F=JSON.parse('{"title":"Customization - Theming","description":"Datepicker theme configuration for light and dark theme","frontmatter":{"title":"Customization - Theming","description":"Datepicker theme configuration for light and dark theme"},"headers":[],"relativePath":"customization/theming/index.md","filePath":"customization/theming/index.md"}'),h={name:"customization/theming/index.md"},k=n("",10),p=[k];function l(t,e,E,d,r,g){return a(),i("div",null,p)}const o=s(h,[["render",l]]);export{F as __pageData,o as default};
+import{_ as s,c as i,o as a,am as n}from"./chunks/framework.BKRot_tQ.js";const F=JSON.parse('{"title":"Customization - Theming","description":"Datepicker theme configuration for light and dark theme","frontmatter":{"title":"Customization - Theming","description":"Datepicker theme configuration for light and dark theme"},"headers":[],"relativePath":"customization/theming/index.md","filePath":"customization/theming/index.md"}'),h={name:"customization/theming/index.md"},k=n("",10),p=[k];function l(t,e,E,d,r,g){return a(),i("div",null,p)}const o=s(h,[["render",l]]);export{F as __pageData,o as default};
diff --git a/docs/assets/index.md.DcYGhi7H.js b/docs/assets/index.md.qJxocQGM.js
similarity index 96%
rename from docs/assets/index.md.DcYGhi7H.js
rename to docs/assets/index.md.qJxocQGM.js
index f55348fb..900a77d4 100644
--- a/docs/assets/index.md.DcYGhi7H.js
+++ b/docs/assets/index.md.qJxocQGM.js
@@ -1 +1 @@
-import{_ as t,D as o,c as a,I as i,o as n}from"./chunks/framework.IJS20kTW.js";const k=JSON.parse('{"title":"Vue Datepicker","description":"Vue 3 datepicker component. Lightweight and powerful with support for the timepicker, range picker, month-year picker, text input, week numbers and many more. Options to customize the datepicker from the ground up with props, slots and custom components. Dark and light mode available.","frontmatter":{"title":"Vue Datepicker","description":"Vue 3 datepicker component. Lightweight and powerful with support for the timepicker, range picker, month-year picker, text input, week numbers and many more. Options to customize the datepicker from the ground up with props, slots and custom components. Dark and light mode available.","layout":"home","hero":{"name":"Vue datepicker","text":"The most complete datepicker solution for Vue 3","tagline":"Powerful, lightweight, and reusable datepicker component to fit within any project","actions":[{"theme":"brand","text":"Get Started","link":"/installation/"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/Vuepic/vue-datepicker"},{"theme":"alt","text":"Playground","link":"https://stackblitz.com/edit/vuepic-vue-datepicker?file=src%2Fcomponents%2FPlayground.vue"}]},"features":[{"title":"Powerful","details":"Supports multiple modes such as range, various pickers, multiple calendars, custom components, and many more."},{"title":"Modular","details":"Offers a great range of features, slots and props, while providing a way to customize for specific needs."},{"title":"Customizable","details":"Fully accessible, mobile-friendly, with built-in dark and light mode, and customizable css variables."}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),r={name:"index.md"};function s(p,c,l,d,m,u){const e=o("StarAndSponsor");return n(),a("div",null,[i(e)])}const f=t(r,[["render",s]]);export{k as __pageData,f as default};
+import{_ as t,D as o,c as a,I as i,o as n}from"./chunks/framework.BKRot_tQ.js";const k=JSON.parse('{"title":"Vue Datepicker","description":"Vue 3 datepicker component. Lightweight and powerful with support for the timepicker, range picker, month-year picker, text input, week numbers and many more. Options to customize the datepicker from the ground up with props, slots and custom components. Dark and light mode available.","frontmatter":{"title":"Vue Datepicker","description":"Vue 3 datepicker component. Lightweight and powerful with support for the timepicker, range picker, month-year picker, text input, week numbers and many more. Options to customize the datepicker from the ground up with props, slots and custom components. Dark and light mode available.","layout":"home","hero":{"name":"Vue datepicker","text":"The most complete datepicker solution for Vue 3","tagline":"Powerful, lightweight, and reusable datepicker component to fit within any project","actions":[{"theme":"brand","text":"Get Started","link":"/installation/"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/Vuepic/vue-datepicker"},{"theme":"alt","text":"Playground","link":"https://stackblitz.com/edit/vuepic-vue-datepicker?file=src%2Fcomponents%2FPlayground.vue"}]},"features":[{"title":"Powerful","details":"Supports multiple modes such as range, various pickers, multiple calendars, custom components, and many more."},{"title":"Modular","details":"Offers a great range of features, slots and props, while providing a way to customize for specific needs."},{"title":"Customizable","details":"Fully accessible, mobile-friendly, with built-in dark and light mode, and customizable css variables."}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),r={name:"index.md"};function s(p,c,l,d,m,u){const e=o("StarAndSponsor");return n(),a("div",null,[i(e)])}const f=t(r,[["render",s]]);export{k as __pageData,f as default};
diff --git a/docs/assets/index.md.DcYGhi7H.lean.js b/docs/assets/index.md.qJxocQGM.lean.js
similarity index 96%
rename from docs/assets/index.md.DcYGhi7H.lean.js
rename to docs/assets/index.md.qJxocQGM.lean.js
index f55348fb..900a77d4 100644
--- a/docs/assets/index.md.DcYGhi7H.lean.js
+++ b/docs/assets/index.md.qJxocQGM.lean.js
@@ -1 +1 @@
-import{_ as t,D as o,c as a,I as i,o as n}from"./chunks/framework.IJS20kTW.js";const k=JSON.parse('{"title":"Vue Datepicker","description":"Vue 3 datepicker component. Lightweight and powerful with support for the timepicker, range picker, month-year picker, text input, week numbers and many more. Options to customize the datepicker from the ground up with props, slots and custom components. Dark and light mode available.","frontmatter":{"title":"Vue Datepicker","description":"Vue 3 datepicker component. Lightweight and powerful with support for the timepicker, range picker, month-year picker, text input, week numbers and many more. Options to customize the datepicker from the ground up with props, slots and custom components. Dark and light mode available.","layout":"home","hero":{"name":"Vue datepicker","text":"The most complete datepicker solution for Vue 3","tagline":"Powerful, lightweight, and reusable datepicker component to fit within any project","actions":[{"theme":"brand","text":"Get Started","link":"/installation/"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/Vuepic/vue-datepicker"},{"theme":"alt","text":"Playground","link":"https://stackblitz.com/edit/vuepic-vue-datepicker?file=src%2Fcomponents%2FPlayground.vue"}]},"features":[{"title":"Powerful","details":"Supports multiple modes such as range, various pickers, multiple calendars, custom components, and many more."},{"title":"Modular","details":"Offers a great range of features, slots and props, while providing a way to customize for specific needs."},{"title":"Customizable","details":"Fully accessible, mobile-friendly, with built-in dark and light mode, and customizable css variables."}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),r={name:"index.md"};function s(p,c,l,d,m,u){const e=o("StarAndSponsor");return n(),a("div",null,[i(e)])}const f=t(r,[["render",s]]);export{k as __pageData,f as default};
+import{_ as t,D as o,c as a,I as i,o as n}from"./chunks/framework.BKRot_tQ.js";const k=JSON.parse('{"title":"Vue Datepicker","description":"Vue 3 datepicker component. Lightweight and powerful with support for the timepicker, range picker, month-year picker, text input, week numbers and many more. Options to customize the datepicker from the ground up with props, slots and custom components. Dark and light mode available.","frontmatter":{"title":"Vue Datepicker","description":"Vue 3 datepicker component. Lightweight and powerful with support for the timepicker, range picker, month-year picker, text input, week numbers and many more. Options to customize the datepicker from the ground up with props, slots and custom components. Dark and light mode available.","layout":"home","hero":{"name":"Vue datepicker","text":"The most complete datepicker solution for Vue 3","tagline":"Powerful, lightweight, and reusable datepicker component to fit within any project","actions":[{"theme":"brand","text":"Get Started","link":"/installation/"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/Vuepic/vue-datepicker"},{"theme":"alt","text":"Playground","link":"https://stackblitz.com/edit/vuepic-vue-datepicker?file=src%2Fcomponents%2FPlayground.vue"}]},"features":[{"title":"Powerful","details":"Supports multiple modes such as range, various pickers, multiple calendars, custom components, and many more."},{"title":"Modular","details":"Offers a great range of features, slots and props, while providing a way to customize for specific needs."},{"title":"Customizable","details":"Fully accessible, mobile-friendly, with built-in dark and light mode, and customizable css variables."}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),r={name:"index.md"};function s(p,c,l,d,m,u){const e=o("StarAndSponsor");return n(),a("div",null,[i(e)])}const f=t(r,[["render",s]]);export{k as __pageData,f as default};
diff --git a/docs/assets/installation_index.md.BdZmYzE_.js b/docs/assets/installation_index.md.CzOQj94f.js
similarity index 96%
rename from docs/assets/installation_index.md.BdZmYzE_.js
rename to docs/assets/installation_index.md.CzOQj94f.js
index 28579536..28114510 100644
--- a/docs/assets/installation_index.md.BdZmYzE_.js
+++ b/docs/assets/installation_index.md.CzOQj94f.js
@@ -1,4 +1,4 @@
-import{_ as s,c as i,o as a,am as t}from"./chunks/framework.IJS20kTW.js";const o=JSON.parse('{"title":"Installation","description":"Install guide for @vuepic/vue-datepicker for global installation, Options and Composition API","frontmatter":{"title":"Installation","description":"Install guide for @vuepic/vue-datepicker for global installation, Options and Composition API"},"headers":[],"relativePath":"installation/index.md","filePath":"installation/index.md"}'),n={name:"installation/index.md"},p=t(`Installation
Install the component using the preferred package manager
shellnpm install @vuepic/vue-datepicker
shellyarn add @vuepic/vue-datepicker
shellpnpm add @vuepic/vue-datepicker
shellbun add @vuepic/vue-datepicker
Then import and register component
Note: css file is imported separately
jsimport VueDatePicker from '@vuepic/vue-datepicker';
+import{_ as s,c as i,o as a,am as t}from"./chunks/framework.BKRot_tQ.js";const o=JSON.parse('{"title":"Installation","description":"Install guide for @vuepic/vue-datepicker for global installation, Options and Composition API","frontmatter":{"title":"Installation","description":"Install guide for @vuepic/vue-datepicker for global installation, Options and Composition API"},"headers":[],"relativePath":"installation/index.md","filePath":"installation/index.md"}'),n={name:"installation/index.md"},p=t(`Installation
Install the component using the preferred package manager
shellnpm install @vuepic/vue-datepicker
shellyarn add @vuepic/vue-datepicker
shellpnpm add @vuepic/vue-datepicker
shellbun add @vuepic/vue-datepicker
Then import and register component
Note: css file is imported separately
jsimport VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'
Global
In the main file
jsimport { createApp } from "vue";
import App from './App.vue';
@@ -9,7 +9,7 @@ import{_ as s,c as i,o as a,am as t}from"./chunks/framework.IJS20kTW.js";const o
app.component('VueDatePicker', VueDatePicker);
-app.mount('#app');
Local
In the .vue files
vue<template>
+app.mount('#app');
Local
In the .vue files
vue<template>
<VueDatePicker v-model="date"></VueDatePicker>
</template>
diff --git a/docs/assets/installation_index.md.BdZmYzE_.lean.js b/docs/assets/installation_index.md.CzOQj94f.lean.js
similarity index 79%
rename from docs/assets/installation_index.md.BdZmYzE_.lean.js
rename to docs/assets/installation_index.md.CzOQj94f.lean.js
index 336c3a99..f980d187 100644
--- a/docs/assets/installation_index.md.BdZmYzE_.lean.js
+++ b/docs/assets/installation_index.md.CzOQj94f.lean.js
@@ -1 +1 @@
-import{_ as s,c as i,o as a,am as t}from"./chunks/framework.IJS20kTW.js";const o=JSON.parse('{"title":"Installation","description":"Install guide for @vuepic/vue-datepicker for global installation, Options and Composition API","frontmatter":{"title":"Installation","description":"Install guide for @vuepic/vue-datepicker for global installation, Options and Composition API"},"headers":[],"relativePath":"installation/index.md","filePath":"installation/index.md"}'),n={name:"installation/index.md"},p=t("",27),l=[p];function e(h,k,d,E,r,g){return a(),i("div",null,l)}const y=s(n,[["render",e]]);export{o as __pageData,y as default};
+import{_ as s,c as i,o as a,am as t}from"./chunks/framework.BKRot_tQ.js";const o=JSON.parse('{"title":"Installation","description":"Install guide for @vuepic/vue-datepicker for global installation, Options and Composition API","frontmatter":{"title":"Installation","description":"Install guide for @vuepic/vue-datepicker for global installation, Options and Composition API"},"headers":[],"relativePath":"installation/index.md","filePath":"installation/index.md"}'),n={name:"installation/index.md"},p=t("",27),l=[p];function e(h,k,d,E,r,g){return a(),i("div",null,l)}const y=s(n,[["render",e]]);export{o as __pageData,y as default};
diff --git a/docs/assets/methods-and-events_events_index.md.itNS5m-d.js b/docs/assets/methods-and-events_events_index.md.CLtD3nmd.js
similarity index 99%
rename from docs/assets/methods-and-events_events_index.md.itNS5m-d.js
rename to docs/assets/methods-and-events_events_index.md.CLtD3nmd.js
index d5ba2438..bb2496f9 100644
--- a/docs/assets/methods-and-events_events_index.md.itNS5m-d.js
+++ b/docs/assets/methods-and-events_events_index.md.CLtD3nmd.js
@@ -1,4 +1,4 @@
-import{_ as s,c as i,o as a,am as n}from"./chunks/framework.IJS20kTW.js";const F=JSON.parse('{"title":"Events","description":"List of emitted events from the datepicker","frontmatter":{"lang":"en-US","title":"Events","description":"List of emitted events from the datepicker"},"headers":[],"relativePath":"methods-and-events/events/index.md","filePath":"methods-and-events/events/index.md"}'),h={name:"methods-and-events/events/index.md"},t=n(`Events
List of available events that are emitted on some action
@update:model-value
This event is emitted when the value is selected. This is a v-model binding event
Code Example
vue<template>
+import{_ as s,c as i,o as a,am as n}from"./chunks/framework.BKRot_tQ.js";const F=JSON.parse('{"title":"Events","description":"List of emitted events from the datepicker","frontmatter":{"lang":"en-US","title":"Events","description":"List of emitted events from the datepicker"},"headers":[],"relativePath":"methods-and-events/events/index.md","filePath":"methods-and-events/events/index.md"}'),h={name:"methods-and-events/events/index.md"},t=n(`Events
List of available events that are emitted on some action
@update:model-value
This event is emitted when the value is selected. This is a v-model binding event
Code Example
vue<template>
<VueDatePicker :model-value="date" @update:model-value="handleDate" />
</template>
diff --git a/docs/assets/methods-and-events_events_index.md.itNS5m-d.lean.js b/docs/assets/methods-and-events_events_index.md.CLtD3nmd.lean.js
similarity index 77%
rename from docs/assets/methods-and-events_events_index.md.itNS5m-d.lean.js
rename to docs/assets/methods-and-events_events_index.md.CLtD3nmd.lean.js
index b4d68e02..5a1aaafe 100644
--- a/docs/assets/methods-and-events_events_index.md.itNS5m-d.lean.js
+++ b/docs/assets/methods-and-events_events_index.md.CLtD3nmd.lean.js
@@ -1 +1 @@
-import{_ as s,c as i,o as a,am as n}from"./chunks/framework.IJS20kTW.js";const F=JSON.parse('{"title":"Events","description":"List of emitted events from the datepicker","frontmatter":{"lang":"en-US","title":"Events","description":"List of emitted events from the datepicker"},"headers":[],"relativePath":"methods-and-events/events/index.md","filePath":"methods-and-events/events/index.md"}'),h={name:"methods-and-events/events/index.md"},t=n("",114),l=[t];function k(p,e,E,d,r,g){return a(),i("div",null,l)}const c=s(h,[["render",k]]);export{F as __pageData,c as default};
+import{_ as s,c as i,o as a,am as n}from"./chunks/framework.BKRot_tQ.js";const F=JSON.parse('{"title":"Events","description":"List of emitted events from the datepicker","frontmatter":{"lang":"en-US","title":"Events","description":"List of emitted events from the datepicker"},"headers":[],"relativePath":"methods-and-events/events/index.md","filePath":"methods-and-events/events/index.md"}'),h={name:"methods-and-events/events/index.md"},t=n("",114),l=[t];function k(p,e,E,d,r,g){return a(),i("div",null,l)}const c=s(h,[["render",k]]);export{F as __pageData,c as default};
diff --git a/docs/assets/methods-and-events_methods_index.md.DSpdWHb0.js b/docs/assets/methods-and-events_methods_index.md.sxka_nYL.js
similarity index 98%
rename from docs/assets/methods-and-events_methods_index.md.DSpdWHb0.js
rename to docs/assets/methods-and-events_methods_index.md.sxka_nYL.js
index 8694a88d..8ddb4547 100644
--- a/docs/assets/methods-and-events_methods_index.md.DSpdWHb0.js
+++ b/docs/assets/methods-and-events_methods_index.md.sxka_nYL.js
@@ -1,4 +1,4 @@
-import{_ as a,c as s,o as e,am as i}from"./chunks/framework.IJS20kTW.js";const E=JSON.parse('{"title":"Methods","description":"List of exposed datepicker methods","frontmatter":{"lang":"en-US","title":"Methods","description":"List of exposed datepicker methods"},"headers":[],"relativePath":"methods-and-events/methods/index.md","filePath":"methods-and-events/methods/index.md"}'),t={name:"methods-and-events/methods/index.md"},l=i(`Methods
List of available methods that you can call on the datepicker from the external code
Add a ref to the component, and call the method on that ref
Code Example
vue<template>
+import{_ as a,c as s,o as e,am as i}from"./chunks/framework.BKRot_tQ.js";const E=JSON.parse('{"title":"Methods","description":"List of exposed datepicker methods","frontmatter":{"lang":"en-US","title":"Methods","description":"List of exposed datepicker methods"},"headers":[],"relativePath":"methods-and-events/methods/index.md","filePath":"methods-and-events/methods/index.md"}'),t={name:"methods-and-events/methods/index.md"},l=i(`Methods
List of available methods that you can call on the datepicker from the external code
Add a ref to the component, and call the method on that ref
Code Example
vue<template>
<VueDatePicker v-model="date" ref="datepicker" />
</template>
diff --git a/docs/assets/methods-and-events_methods_index.md.DSpdWHb0.lean.js b/docs/assets/methods-and-events_methods_index.md.sxka_nYL.lean.js
similarity index 77%
rename from docs/assets/methods-and-events_methods_index.md.DSpdWHb0.lean.js
rename to docs/assets/methods-and-events_methods_index.md.sxka_nYL.lean.js
index b8aca091..fbb6341b 100644
--- a/docs/assets/methods-and-events_methods_index.md.DSpdWHb0.lean.js
+++ b/docs/assets/methods-and-events_methods_index.md.sxka_nYL.lean.js
@@ -1 +1 @@
-import{_ as a,c as s,o as e,am as i}from"./chunks/framework.IJS20kTW.js";const E=JSON.parse('{"title":"Methods","description":"List of exposed datepicker methods","frontmatter":{"lang":"en-US","title":"Methods","description":"List of exposed datepicker methods"},"headers":[],"relativePath":"methods-and-events/methods/index.md","filePath":"methods-and-events/methods/index.md"}'),t={name:"methods-and-events/methods/index.md"},l=i("",37),n=[l];function h(p,r,o,d,k,c){return e(),s("div",null,n)}const m=a(t,[["render",h]]);export{E as __pageData,m as default};
+import{_ as a,c as s,o as e,am as i}from"./chunks/framework.BKRot_tQ.js";const E=JSON.parse('{"title":"Methods","description":"List of exposed datepicker methods","frontmatter":{"lang":"en-US","title":"Methods","description":"List of exposed datepicker methods"},"headers":[],"relativePath":"methods-and-events/methods/index.md","filePath":"methods-and-events/methods/index.md"}'),t={name:"methods-and-events/methods/index.md"},l=i("",37),n=[l];function h(p,r,o,d,k,c){return e(),s("div",null,n)}const m=a(t,[["render",h]]);export{E as __pageData,m as default};
diff --git a/docs/assets/migration_from-v5.md.BI3LqLn8.js b/docs/assets/migration_from-v5.md.CHERqwZ1.js
similarity index 99%
rename from docs/assets/migration_from-v5.md.BI3LqLn8.js
rename to docs/assets/migration_from-v5.md.CHERqwZ1.js
index d3935883..00304b26 100644
--- a/docs/assets/migration_from-v5.md.BI3LqLn8.js
+++ b/docs/assets/migration_from-v5.md.CHERqwZ1.js
@@ -1,4 +1,4 @@
-import{_ as i,c as s,o as a,am as t}from"./chunks/framework.IJS20kTW.js";const g=JSON.parse('{"title":"Migration from v5","description":"Migration guide for migrating from v5 to v6 and notifying of breaking changes","frontmatter":{"lang":"en-US","title":"Migration from v5","description":"Migration guide for migrating from v5 to v6 and notifying of breaking changes"},"headers":[],"relativePath":"migration/from-v5.md","filePath":"migration/from-v5.md"}'),n={name:"migration/from-v5.md"},e=t(`Migrating from v5
Breaking changes
month-picker and year-picker no longer have predefined value if v-model is emptyaria-label for arrow buttons in month-picker mode is changed to Next/Previous yearauto-apply-month prop is removed (will work with auto-apply prop set)show-now-button prop is removedmonth-year slot will have different props depending on the used mode- Property
handleMonthYearChange is removed from sidebar-[left/right] slot props - Props changes (check props-reconfiguration)
- Removed:
multi-calendars-solomulti-statictext-input-optionsinline-with-inputpreset-ranges- Exposed method for the slot is renamed from
presetDateRange to presetDate
- Property
menuAppear in transitions
Props reconfiguration
Based on the list of removed props, and depending on your usage, you might need to do a slight adjustments to keep prior behaviour:
multi-calendars-solo and multi-static
These 2 props are now merged into a configuration object that can be passed
to multi-calendars prop
Info
For prop definition, check multi-calendars prop
js
+import{_ as i,c as s,o as a,am as t}from"./chunks/framework.BKRot_tQ.js";const g=JSON.parse('{"title":"Migration from v5","description":"Migration guide for migrating from v5 to v6 and notifying of breaking changes","frontmatter":{"lang":"en-US","title":"Migration from v5","description":"Migration guide for migrating from v5 to v6 and notifying of breaking changes"},"headers":[],"relativePath":"migration/from-v5.md","filePath":"migration/from-v5.md"}'),n={name:"migration/from-v5.md"},e=t(`Migrating from v5
Breaking changes
month-picker and year-picker no longer have predefined value if v-model is emptyaria-label for arrow buttons in month-picker mode is changed to Next/Previous yearauto-apply-month prop is removed (will work with auto-apply prop set)show-now-button prop is removedmonth-year slot will have different props depending on the used mode- Property
handleMonthYearChange is removed from sidebar-[left/right] slot props - Props changes (check props-reconfiguration)
- Removed:
multi-calendars-solomulti-statictext-input-optionsinline-with-inputpreset-ranges- Exposed method for the slot is renamed from
presetDateRange to presetDate
- Property
menuAppear in transitions
Props reconfiguration
Based on the list of removed props, and depending on your usage, you might need to do a slight adjustments to keep prior behaviour:
multi-calendars-solo and multi-static
These 2 props are now merged into a configuration object that can be passed
to multi-calendars prop
Info
For prop definition, check multi-calendars prop
js
<template>
<VueDatePicker
diff --git a/docs/assets/migration_from-v5.md.BI3LqLn8.lean.js b/docs/assets/migration_from-v5.md.CHERqwZ1.lean.js
similarity index 79%
rename from docs/assets/migration_from-v5.md.BI3LqLn8.lean.js
rename to docs/assets/migration_from-v5.md.CHERqwZ1.lean.js
index e2a955f6..035a643c 100644
--- a/docs/assets/migration_from-v5.md.BI3LqLn8.lean.js
+++ b/docs/assets/migration_from-v5.md.CHERqwZ1.lean.js
@@ -1 +1 @@
-import{_ as i,c as s,o as a,am as t}from"./chunks/framework.IJS20kTW.js";const g=JSON.parse('{"title":"Migration from v5","description":"Migration guide for migrating from v5 to v6 and notifying of breaking changes","frontmatter":{"lang":"en-US","title":"Migration from v5","description":"Migration guide for migrating from v5 to v6 and notifying of breaking changes"},"headers":[],"relativePath":"migration/from-v5.md","filePath":"migration/from-v5.md"}'),n={name:"migration/from-v5.md"},e=t("",26),l=[e];function p(h,o,k,r,d,c){return a(),s("div",null,l)}const y=i(n,[["render",p]]);export{g as __pageData,y as default};
+import{_ as i,c as s,o as a,am as t}from"./chunks/framework.BKRot_tQ.js";const g=JSON.parse('{"title":"Migration from v5","description":"Migration guide for migrating from v5 to v6 and notifying of breaking changes","frontmatter":{"lang":"en-US","title":"Migration from v5","description":"Migration guide for migrating from v5 to v6 and notifying of breaking changes"},"headers":[],"relativePath":"migration/from-v5.md","filePath":"migration/from-v5.md"}'),n={name:"migration/from-v5.md"},e=t("",26),l=[e];function p(h,o,k,r,d,c){return a(),s("div",null,l)}const y=i(n,[["render",p]]);export{g as __pageData,y as default};
diff --git a/docs/assets/migration_from-v6.md.RC2xdNpA.js b/docs/assets/migration_from-v6.md.Dpqy4PX4.js
similarity index 92%
rename from docs/assets/migration_from-v6.md.RC2xdNpA.js
rename to docs/assets/migration_from-v6.md.Dpqy4PX4.js
index eb0f368b..b92bb695 100644
--- a/docs/assets/migration_from-v6.md.RC2xdNpA.js
+++ b/docs/assets/migration_from-v6.md.Dpqy4PX4.js
@@ -1 +1 @@
-import{_ as e,c as o,o as i,am as a}from"./chunks/framework.IJS20kTW.js";const h=JSON.parse('{"title":"Migration from v6","description":"Migration guide for migrating from v6 to v7 and notifying of breaking changes","frontmatter":{"lang":"en-US","title":"Migration from v6","description":"Migration guide for migrating from v6 to v7 and notifying of breaking changes"},"headers":[],"relativePath":"migration/from-v6.md","filePath":"migration/from-v6.md"}'),t={name:"migration/from-v6.md"},r=a('Migrating from v6
Breaking changes
- Wrapper for preset-dates is changed from
<div> to <template>, which may cause potential styles break if you use a slot for the preset-dates item - Removed deprecated props
- Removed
closeOnScrollmodeHeightallowPreventDefaultcloseOnClearValuecloseOnAutoApplynoSwipekeepActionRowonClickOutside
All removed props are now part of the config prop
',4),n=[r];function l(c,d,s,g,m,f){return i(),o("div",null,n)}const _=e(t,[["render",l]]);export{h as __pageData,_ as default};
+import{_ as e,c as o,o as i,am as a}from"./chunks/framework.BKRot_tQ.js";const h=JSON.parse('{"title":"Migration from v6","description":"Migration guide for migrating from v6 to v7 and notifying of breaking changes","frontmatter":{"lang":"en-US","title":"Migration from v6","description":"Migration guide for migrating from v6 to v7 and notifying of breaking changes"},"headers":[],"relativePath":"migration/from-v6.md","filePath":"migration/from-v6.md"}'),t={name:"migration/from-v6.md"},r=a('Migrating from v6
Breaking changes
- Wrapper for preset-dates is changed from
<div> to <template>, which may cause potential styles break if you use a slot for the preset-dates item - Removed deprecated props
- Removed
closeOnScrollmodeHeightallowPreventDefaultcloseOnClearValuecloseOnAutoApplynoSwipekeepActionRowonClickOutside
All removed props are now part of the config prop
',4),n=[r];function l(c,d,s,g,m,f){return i(),o("div",null,n)}const _=e(t,[["render",l]]);export{h as __pageData,_ as default};
diff --git a/docs/assets/migration_from-v6.md.RC2xdNpA.lean.js b/docs/assets/migration_from-v6.md.Dpqy4PX4.lean.js
similarity index 79%
rename from docs/assets/migration_from-v6.md.RC2xdNpA.lean.js
rename to docs/assets/migration_from-v6.md.Dpqy4PX4.lean.js
index 212ce819..e99c4bfc 100644
--- a/docs/assets/migration_from-v6.md.RC2xdNpA.lean.js
+++ b/docs/assets/migration_from-v6.md.Dpqy4PX4.lean.js
@@ -1 +1 @@
-import{_ as e,c as o,o as i,am as a}from"./chunks/framework.IJS20kTW.js";const h=JSON.parse('{"title":"Migration from v6","description":"Migration guide for migrating from v6 to v7 and notifying of breaking changes","frontmatter":{"lang":"en-US","title":"Migration from v6","description":"Migration guide for migrating from v6 to v7 and notifying of breaking changes"},"headers":[],"relativePath":"migration/from-v6.md","filePath":"migration/from-v6.md"}'),t={name:"migration/from-v6.md"},r=a("",4),n=[r];function l(c,d,s,g,m,f){return i(),o("div",null,n)}const _=e(t,[["render",l]]);export{h as __pageData,_ as default};
+import{_ as e,c as o,o as i,am as a}from"./chunks/framework.BKRot_tQ.js";const h=JSON.parse('{"title":"Migration from v6","description":"Migration guide for migrating from v6 to v7 and notifying of breaking changes","frontmatter":{"lang":"en-US","title":"Migration from v6","description":"Migration guide for migrating from v6 to v7 and notifying of breaking changes"},"headers":[],"relativePath":"migration/from-v6.md","filePath":"migration/from-v6.md"}'),t={name:"migration/from-v6.md"},r=a("",4),n=[r];function l(c,d,s,g,m,f){return i(),o("div",null,n)}const _=e(t,[["render",l]]);export{h as __pageData,_ as default};
diff --git a/docs/assets/migration_from-v7.md.BiHzPJ31.js b/docs/assets/migration_from-v7.md.BKCSZk9W.js
similarity index 99%
rename from docs/assets/migration_from-v7.md.BiHzPJ31.js
rename to docs/assets/migration_from-v7.md.BKCSZk9W.js
index 14aa20f0..67f211d6 100644
--- a/docs/assets/migration_from-v7.md.BiHzPJ31.js
+++ b/docs/assets/migration_from-v7.md.BKCSZk9W.js
@@ -1,4 +1,4 @@
-import{_ as i,c as s,o as a,am as t}from"./chunks/framework.IJS20kTW.js";const y=JSON.parse('{"title":"Migration from v7","description":"Migration guide for migrating from v7 to v8 and notifying of breaking changes","frontmatter":{"lang":"en-US","title":"Migration from v7","description":"Migration guide for migrating from v7 to v8 and notifying of breaking changes"},"headers":[],"relativePath":"migration/from-v7.md","filePath":"migration/from-v7.md"}'),l={name:"migration/from-v7.md"},e=t(`Migrating from v7
Breaking changes
- Default week-picker format is changed to week numbers
- Tabbing out from the overlay will shift focus to the action row button if present
- Removed deprecated props
- Removed
highlight-week-dayshighlight-disabled-dayshighlight prop types Date[]string[]number[]
id for calendar days is changed to formatted value instead of ISO valuedate-fns-tz library is removeddate-fns library is updated to v3
highlight
Info
For prop definition, check highlight prop
js<template>
+import{_ as i,c as s,o as a,am as t}from"./chunks/framework.BKRot_tQ.js";const y=JSON.parse('{"title":"Migration from v7","description":"Migration guide for migrating from v7 to v8 and notifying of breaking changes","frontmatter":{"lang":"en-US","title":"Migration from v7","description":"Migration guide for migrating from v7 to v8 and notifying of breaking changes"},"headers":[],"relativePath":"migration/from-v7.md","filePath":"migration/from-v7.md"}'),l={name:"migration/from-v7.md"},e=t(`Migrating from v7
Breaking changes
- Default week-picker format is changed to week numbers
- Tabbing out from the overlay will shift focus to the action row button if present
- Removed deprecated props
- Removed
highlight-week-dayshighlight-disabled-dayshighlight prop types Date[]string[]number[]
id for calendar days is changed to formatted value instead of ISO valuedate-fns-tz library is removeddate-fns library is updated to v3
highlight
Info
For prop definition, check highlight prop
js<template>
<VueDatePicker
:highlight="[new Date()]"
:highlight="{ days: [ new Date() ] }"
diff --git a/docs/assets/migration_from-v7.md.BiHzPJ31.lean.js b/docs/assets/migration_from-v7.md.BKCSZk9W.lean.js
similarity index 79%
rename from docs/assets/migration_from-v7.md.BiHzPJ31.lean.js
rename to docs/assets/migration_from-v7.md.BKCSZk9W.lean.js
index b548bdf0..0858c0ac 100644
--- a/docs/assets/migration_from-v7.md.BiHzPJ31.lean.js
+++ b/docs/assets/migration_from-v7.md.BKCSZk9W.lean.js
@@ -1 +1 @@
-import{_ as i,c as s,o as a,am as t}from"./chunks/framework.IJS20kTW.js";const y=JSON.parse('{"title":"Migration from v7","description":"Migration guide for migrating from v7 to v8 and notifying of breaking changes","frontmatter":{"lang":"en-US","title":"Migration from v7","description":"Migration guide for migrating from v7 to v8 and notifying of breaking changes"},"headers":[],"relativePath":"migration/from-v7.md","filePath":"migration/from-v7.md"}'),l={name:"migration/from-v7.md"},e=t("",18),h=[e];function n(k,p,d,o,r,g){return a(),s("div",null,h)}const E=i(l,[["render",n]]);export{y as __pageData,E as default};
+import{_ as i,c as s,o as a,am as t}from"./chunks/framework.BKRot_tQ.js";const y=JSON.parse('{"title":"Migration from v7","description":"Migration guide for migrating from v7 to v8 and notifying of breaking changes","frontmatter":{"lang":"en-US","title":"Migration from v7","description":"Migration guide for migrating from v7 to v8 and notifying of breaking changes"},"headers":[],"relativePath":"migration/from-v7.md","filePath":"migration/from-v7.md"}'),l={name:"migration/from-v7.md"},e=t("",18),h=[e];function n(k,p,d,o,r,g){return a(),s("div",null,h)}const E=i(l,[["render",n]]);export{y as __pageData,E as default};
diff --git a/docs/assets/migration_from-v8.md.ue4YmvjS.js b/docs/assets/migration_from-v8.md.BaR1FjMQ.js
similarity index 99%
rename from docs/assets/migration_from-v8.md.ue4YmvjS.js
rename to docs/assets/migration_from-v8.md.BaR1FjMQ.js
index 20252da5..15d4c213 100644
--- a/docs/assets/migration_from-v8.md.ue4YmvjS.js
+++ b/docs/assets/migration_from-v8.md.BaR1FjMQ.js
@@ -1,4 +1,4 @@
-import{_ as i,c as s,o as a,am as t}from"./chunks/framework.IJS20kTW.js";const E=JSON.parse('{"title":"Migration from v8","description":"Migration guide for migrating from v8 to v9 and notifying of breaking changes","frontmatter":{"lang":"en-US","title":"Migration from v8","description":"Migration guide for migrating from v8 to v9 and notifying of breaking changes"},"headers":[],"relativePath":"migration/from-v8.md","filePath":"migration/from-v8.md"}'),l={name:"migration/from-v8.md"},n=t(`Migrating from v8
Breaking changes
- Removed deprecated props
- Removed
auto-rangeemit-timezonepartial-rangemin-rangemax-rangefixed-startfixed-endmulti-dates-limitshow-last-in-rangeno-disabled-rangedisable-time-range-validationinput-class-namemenu-class-namecalendar-class-namecalendar-cell-class-name
boolean value true in text-input configuration is replaced with string \`'open' | 'toggle'dp__clear_icon class is changed to dp--clear-btn and now wraps the icon- Removed
calendarWrap and calendarDays from aria-labels due to accessibility violations - When using the component with web components, it must be enabled explicitly via the
config.shadowDom property
range props
Following props are moved to the range configuration object
auto-range
js<template>
+import{_ as i,c as s,o as a,am as t}from"./chunks/framework.BKRot_tQ.js";const E=JSON.parse('{"title":"Migration from v8","description":"Migration guide for migrating from v8 to v9 and notifying of breaking changes","frontmatter":{"lang":"en-US","title":"Migration from v8","description":"Migration guide for migrating from v8 to v9 and notifying of breaking changes"},"headers":[],"relativePath":"migration/from-v8.md","filePath":"migration/from-v8.md"}'),l={name:"migration/from-v8.md"},n=t(`Migrating from v8
Breaking changes
- Removed deprecated props
- Removed
auto-rangeemit-timezonepartial-rangemin-rangemax-rangefixed-startfixed-endmulti-dates-limitshow-last-in-rangeno-disabled-rangedisable-time-range-validationinput-class-namemenu-class-namecalendar-class-namecalendar-cell-class-name
boolean value true in text-input configuration is replaced with string \`'open' | 'toggle'dp__clear_icon class is changed to dp--clear-btn and now wraps the icon- Removed
calendarWrap and calendarDays from aria-labels due to accessibility violations - When using the component with web components, it must be enabled explicitly via the
config.shadowDom property
range props
Following props are moved to the range configuration object
auto-range
js<template>
<VueDatePicker
range
:auto-range="5"
diff --git a/docs/assets/migration_from-v8.md.ue4YmvjS.lean.js b/docs/assets/migration_from-v8.md.BaR1FjMQ.lean.js
similarity index 79%
rename from docs/assets/migration_from-v8.md.ue4YmvjS.lean.js
rename to docs/assets/migration_from-v8.md.BaR1FjMQ.lean.js
index 908292d9..ea38f62f 100644
--- a/docs/assets/migration_from-v8.md.ue4YmvjS.lean.js
+++ b/docs/assets/migration_from-v8.md.BaR1FjMQ.lean.js
@@ -1 +1 @@
-import{_ as i,c as s,o as a,am as t}from"./chunks/framework.IJS20kTW.js";const E=JSON.parse('{"title":"Migration from v8","description":"Migration guide for migrating from v8 to v9 and notifying of breaking changes","frontmatter":{"lang":"en-US","title":"Migration from v8","description":"Migration guide for migrating from v8 to v9 and notifying of breaking changes"},"headers":[],"relativePath":"migration/from-v8.md","filePath":"migration/from-v8.md"}'),l={name:"migration/from-v8.md"},n=t("",45),e=[n];function h(k,p,d,o,r,c){return a(),s("div",null,e)}const y=i(l,[["render",h]]);export{E as __pageData,y as default};
+import{_ as i,c as s,o as a,am as t}from"./chunks/framework.BKRot_tQ.js";const E=JSON.parse('{"title":"Migration from v8","description":"Migration guide for migrating from v8 to v9 and notifying of breaking changes","frontmatter":{"lang":"en-US","title":"Migration from v8","description":"Migration guide for migrating from v8 to v9 and notifying of breaking changes"},"headers":[],"relativePath":"migration/from-v8.md","filePath":"migration/from-v8.md"}'),l={name:"migration/from-v8.md"},n=t("",45),e=[n];function h(k,p,d,o,r,c){return a(),s("div",null,e)}const y=i(l,[["render",h]]);export{E as __pageData,y as default};
diff --git a/docs/assets/props_calendar-configuration_index.md.BxXIyXWr.js b/docs/assets/props_calendar-configuration_index.md.CgmBjRMD.js
similarity index 99%
rename from docs/assets/props_calendar-configuration_index.md.BxXIyXWr.js
rename to docs/assets/props_calendar-configuration_index.md.CgmBjRMD.js
index 6cf218d0..002bd705 100644
--- a/docs/assets/props_calendar-configuration_index.md.BxXIyXWr.js
+++ b/docs/assets/props_calendar-configuration_index.md.CgmBjRMD.js
@@ -1,4 +1,4 @@
-import{_ as e,D as n,c as E,I as i,am as s,o as d}from"./chunks/framework.IJS20kTW.js";const W=JSON.parse('{"title":"Props - Calendar configuration","description":"Configuration for the calendar","frontmatter":{"lang":"en-US","title":"Props - Calendar configuration","description":"Configuration for the calendar"},"headers":[],"relativePath":"props/calendar-configuration/index.md","filePath":"props/calendar-configuration/index.md"}'),r={name:"props/calendar-configuration/index.md"},g=s(`Calendar configuration
Configure calendar options such as behavior or available dates
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, weekNumbers as week-numbers and so on
calendar
Customize the calendar view, filter out weeks, add or remove custom classes
Important
Do not modify date values
- Type:
(weeks: CalendarWeek[]) => CalendarWeek[]; - Default:
null
tsinterface CalendarWeek {
+import{_ as e,D as n,c as E,I as i,am as s,o as d}from"./chunks/framework.BKRot_tQ.js";const W=JSON.parse('{"title":"Props - Calendar configuration","description":"Configuration for the calendar","frontmatter":{"lang":"en-US","title":"Props - Calendar configuration","description":"Configuration for the calendar"},"headers":[],"relativePath":"props/calendar-configuration/index.md","filePath":"props/calendar-configuration/index.md"}'),r={name:"props/calendar-configuration/index.md"},g=s(`Calendar configuration
Configure calendar options such as behavior or available dates
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, weekNumbers as week-numbers and so on
calendar
Customize the calendar view, filter out weeks, add or remove custom classes
Important
Do not modify date values
- Type:
(weeks: CalendarWeek[]) => CalendarWeek[]; - Default:
null
tsinterface CalendarWeek {
days: {
text: number | string; // Value displayed in the calendar day box
value: Date; // Date that is going to be selected, do not modify
diff --git a/docs/assets/props_calendar-configuration_index.md.BxXIyXWr.lean.js b/docs/assets/props_calendar-configuration_index.md.CgmBjRMD.lean.js
similarity index 96%
rename from docs/assets/props_calendar-configuration_index.md.BxXIyXWr.lean.js
rename to docs/assets/props_calendar-configuration_index.md.CgmBjRMD.lean.js
index d7e93ab6..f64816af 100644
--- a/docs/assets/props_calendar-configuration_index.md.BxXIyXWr.lean.js
+++ b/docs/assets/props_calendar-configuration_index.md.CgmBjRMD.lean.js
@@ -1 +1 @@
-import{_ as e,D as n,c as E,I as i,am as s,o as d}from"./chunks/framework.IJS20kTW.js";const W=JSON.parse('{"title":"Props - Calendar configuration","description":"Configuration for the calendar","frontmatter":{"lang":"en-US","title":"Props - Calendar configuration","description":"Configuration for the calendar"},"headers":[],"relativePath":"props/calendar-configuration/index.md","filePath":"props/calendar-configuration/index.md"}'),r={name:"props/calendar-configuration/index.md"},g=s("",8),y=s("",5),F=s("",4),o=s("",4),c=s("",4),u=s("",4),C=s("",4),D=s("",4),m=s("",4),A=s("",4),B=s("",5),_=s("",4),b=s("",4),v=s("",4),f=s("",4),T=s("",5),w=s("",4),q=s("",1);function x(P,S,V,I,N,R){const h=n("CustomCalendarDemo"),a=n("GlobalDemo"),l=n("MinMaxDemo"),t=n("EmptyDemo"),k=n("FiltersDemo"),p=n("DisabledDatesDemo");return d(),E("div",null,[g,i(h),y,i(a,{"week-numbers":{type:"iso"}}),F,i(a,{"hide-offset-dates":!0}),o,i(a,{"min-date":new Date},null,8,["min-date"]),c,i(a,{"max-date":new Date},null,8,["max-date"]),u,i(l),C,i(t,{"ignore-time-validation":!0,"max-date":new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()),placeholder:"Select Date"},null,8,["max-date"]),D,i(t,{"start-date":new Date(2020,1),placeholder:"Select Date"},null,8,["start-date"]),m,i(a,{"start-date":new Date(2020,1),"focus-start-date":!0,placeholder:"Select Date"},null,8,["start-date"]),A,i(a,{"week-start":"0"}),B,i(k),_,i(a,{"disable-month-year-select":!0}),b,i(a,{"year-range":[2020,2040]}),v,i(a,{"reverse-years":!0,"year-range":[2020,2040]}),f,i(t,{"allowed-dates":[new Date],placeholder:"Select Date"},null,8,["allowed-dates"]),T,i(p),w,i(t,{"disabled-week-days":[6,0],placeholder:"Select Date"}),q])}const O=e(r,[["render",x]]);export{W as __pageData,O as default};
+import{_ as e,D as n,c as E,I as i,am as s,o as d}from"./chunks/framework.BKRot_tQ.js";const W=JSON.parse('{"title":"Props - Calendar configuration","description":"Configuration for the calendar","frontmatter":{"lang":"en-US","title":"Props - Calendar configuration","description":"Configuration for the calendar"},"headers":[],"relativePath":"props/calendar-configuration/index.md","filePath":"props/calendar-configuration/index.md"}'),r={name:"props/calendar-configuration/index.md"},g=s("",8),y=s("",5),F=s("",4),o=s("",4),c=s("",4),u=s("",4),C=s("",4),D=s("",4),m=s("",4),A=s("",4),B=s("",5),_=s("",4),b=s("",4),v=s("",4),f=s("",4),T=s("",5),w=s("",4),q=s("",1);function x(P,S,V,I,N,R){const h=n("CustomCalendarDemo"),a=n("GlobalDemo"),l=n("MinMaxDemo"),t=n("EmptyDemo"),k=n("FiltersDemo"),p=n("DisabledDatesDemo");return d(),E("div",null,[g,i(h),y,i(a,{"week-numbers":{type:"iso"}}),F,i(a,{"hide-offset-dates":!0}),o,i(a,{"min-date":new Date},null,8,["min-date"]),c,i(a,{"max-date":new Date},null,8,["max-date"]),u,i(l),C,i(t,{"ignore-time-validation":!0,"max-date":new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()),placeholder:"Select Date"},null,8,["max-date"]),D,i(t,{"start-date":new Date(2020,1),placeholder:"Select Date"},null,8,["start-date"]),m,i(a,{"start-date":new Date(2020,1),"focus-start-date":!0,placeholder:"Select Date"},null,8,["start-date"]),A,i(a,{"week-start":"0"}),B,i(k),_,i(a,{"disable-month-year-select":!0}),b,i(a,{"year-range":[2020,2040]}),v,i(a,{"reverse-years":!0,"year-range":[2020,2040]}),f,i(t,{"allowed-dates":[new Date],placeholder:"Select Date"},null,8,["allowed-dates"]),T,i(p),w,i(t,{"disabled-week-days":[6,0],placeholder:"Select Date"}),q])}const O=e(r,[["render",x]]);export{W as __pageData,O as default};
diff --git a/docs/assets/props_formatting_index.md.CXFddBvT.js b/docs/assets/props_formatting_index.md.yZ544n8V.js
similarity index 99%
rename from docs/assets/props_formatting_index.md.CXFddBvT.js
rename to docs/assets/props_formatting_index.md.yZ544n8V.js
index faafdd6c..acdf47a9 100644
--- a/docs/assets/props_formatting_index.md.CXFddBvT.js
+++ b/docs/assets/props_formatting_index.md.yZ544n8V.js
@@ -1,4 +1,4 @@
-import{_ as l,D as i,c as e,I as a,am as s,o as k}from"./chunks/framework.IJS20kTW.js";const C=JSON.parse('{"title":"Props - Formatting","description":"Customize the default formatting of the datepicker","frontmatter":{"lang":"en-US","title":"Props - Formatting","description":"Customize the default formatting of the datepicker"},"headers":[],"relativePath":"props/formatting/index.md","filePath":"props/formatting/index.md"}'),p={name:"props/formatting/index.md"},r=s('Formatting
Format options for the value displayed in the input or preview
Info
- If you use the component in the browser
<script> tag, make sure to pass multi-word props with -, for example, previewFormat as preview-format and so on
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 | ((date: Date) => string) | ((dates: 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' - Week picker
'RR-yyyy' | 'ww-yyyy' (depends on week numbering)
Info
If is-24 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
',8),E=s(`Code Example
vue<template>
+import{_ as l,D as i,c as e,I as a,am as s,o as k}from"./chunks/framework.BKRot_tQ.js";const C=JSON.parse('{"title":"Props - Formatting","description":"Customize the default formatting of the datepicker","frontmatter":{"lang":"en-US","title":"Props - Formatting","description":"Customize the default formatting of the datepicker"},"headers":[],"relativePath":"props/formatting/index.md","filePath":"props/formatting/index.md"}'),p={name:"props/formatting/index.md"},r=s('Formatting
Format options for the value displayed in the input or preview
Info
- If you use the component in the browser
<script> tag, make sure to pass multi-word props with -, for example, previewFormat as preview-format and so on
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 | ((date: Date) => string) | ((dates: 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' - Week picker
'RR-yyyy' | 'ww-yyyy' (depends on week numbering)
Info
If is-24 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
',8),E=s(`Code Example
vue<template>
<VueDatePicker v-model="date" :format="format" />
</template>
diff --git a/docs/assets/props_formatting_index.md.CXFddBvT.lean.js b/docs/assets/props_formatting_index.md.yZ544n8V.lean.js
similarity index 91%
rename from docs/assets/props_formatting_index.md.CXFddBvT.lean.js
rename to docs/assets/props_formatting_index.md.yZ544n8V.lean.js
index 8b4bae89..0c386441 100644
--- a/docs/assets/props_formatting_index.md.CXFddBvT.lean.js
+++ b/docs/assets/props_formatting_index.md.yZ544n8V.lean.js
@@ -1 +1 @@
-import{_ as l,D as i,c as e,I as a,am as s,o as k}from"./chunks/framework.IJS20kTW.js";const C=JSON.parse('{"title":"Props - Formatting","description":"Customize the default formatting of the datepicker","frontmatter":{"lang":"en-US","title":"Props - Formatting","description":"Customize the default formatting of the datepicker"},"headers":[],"relativePath":"props/formatting/index.md","filePath":"props/formatting/index.md"}'),p={name:"props/formatting/index.md"},r=s("",8),E=s("",6),d=s("",4),o=s("",1);function g(y,c,F,m,u,f){const t=i("FormatDemo"),n=i("PreviewFormatDemo"),h=i("GlobalDemo");return k(),e("div",null,[r,a(t),E,a(n),d,a(h,{"month-name-format":"long"}),o])}const A=l(p,[["render",g]]);export{C as __pageData,A as default};
+import{_ as l,D as i,c as e,I as a,am as s,o as k}from"./chunks/framework.BKRot_tQ.js";const C=JSON.parse('{"title":"Props - Formatting","description":"Customize the default formatting of the datepicker","frontmatter":{"lang":"en-US","title":"Props - Formatting","description":"Customize the default formatting of the datepicker"},"headers":[],"relativePath":"props/formatting/index.md","filePath":"props/formatting/index.md"}'),p={name:"props/formatting/index.md"},r=s("",8),E=s("",6),d=s("",4),o=s("",1);function g(y,c,F,m,u,f){const t=i("FormatDemo"),n=i("PreviewFormatDemo"),h=i("GlobalDemo");return k(),e("div",null,[r,a(t),E,a(n),d,a(h,{"month-name-format":"long"}),o])}const A=l(p,[["render",g]]);export{C as __pageData,A as default};
diff --git a/docs/assets/props_general-configuration_index.md.kdLulLhN.js b/docs/assets/props_general-configuration_index.md.DOYpbrWq.js
similarity index 99%
rename from docs/assets/props_general-configuration_index.md.kdLulLhN.js
rename to docs/assets/props_general-configuration_index.md.DOYpbrWq.js
index 5d37aa28..653eb179 100644
--- a/docs/assets/props_general-configuration_index.md.kdLulLhN.js
+++ b/docs/assets/props_general-configuration_index.md.DOYpbrWq.js
@@ -1,4 +1,4 @@
-import{_ as r,D as n,c as g,I as i,j as h,a as t,am as s,o}from"./chunks/framework.IJS20kTW.js";const j=JSON.parse('{"title":"Props - General configuration","description":"General behavior props configuration","frontmatter":{"lang":"en-US","title":"Props - General configuration","description":"General behavior props configuration"},"headers":[],"relativePath":"props/general-configuration/index.md","filePath":"props/general-configuration/index.md"}'),y={name:"props/general-configuration/index.md"},c=s('General configuration
General behavior props configuration
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, monthChangeOnScroll as month-change-on-scroll and so on
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
',6),F=s(`Code Example
vue<template>
+import{_ as r,D as n,c as g,I as i,j as h,a as t,am as s,o}from"./chunks/framework.BKRot_tQ.js";const j=JSON.parse('{"title":"Props - General configuration","description":"General behavior props configuration","frontmatter":{"lang":"en-US","title":"Props - General configuration","description":"General behavior props configuration"},"headers":[],"relativePath":"props/general-configuration/index.md","filePath":"props/general-configuration/index.md"}'),y={name:"props/general-configuration/index.md"},c=s('General configuration
General behavior props configuration
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, monthChangeOnScroll as month-change-on-scroll and so on
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
',6),F=s(`Code Example
vue<template>
<VueDatePicker v-model="date" uid="demo" />
</template>
diff --git a/docs/assets/props_general-configuration_index.md.kdLulLhN.lean.js b/docs/assets/props_general-configuration_index.md.DOYpbrWq.lean.js
similarity index 96%
rename from docs/assets/props_general-configuration_index.md.kdLulLhN.lean.js
rename to docs/assets/props_general-configuration_index.md.DOYpbrWq.lean.js
index f3d69a3d..12b7f259 100644
--- a/docs/assets/props_general-configuration_index.md.kdLulLhN.lean.js
+++ b/docs/assets/props_general-configuration_index.md.DOYpbrWq.lean.js
@@ -1 +1 @@
-import{_ as r,D as n,c as g,I as i,j as h,a as t,am as s,o}from"./chunks/framework.IJS20kTW.js";const j=JSON.parse('{"title":"Props - General configuration","description":"General behavior props configuration","frontmatter":{"lang":"en-US","title":"Props - General configuration","description":"General behavior props configuration"},"headers":[],"relativePath":"props/general-configuration/index.md","filePath":"props/general-configuration/index.md"}'),y={name:"props/general-configuration/index.md"},c=s("",6),F=s("",5),u=s("",1),C={id:"model-value",tabindex:"-1"},m=h("a",{class:"header-anchor",href:"#model-value","aria-label":'Permalink to "model-value Keyboard
Configure keyboard actions
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, escClose as esc-close and so on
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
esc-close
Esc key closes the menu
- Type:
boolean - Default:
true
',7),k=s(`Code Example
vue<template>
+import{_ as t,D as n,c as e,I as a,am as s,o as l}from"./chunks/framework.BKRot_tQ.js";const C=JSON.parse('{"title":"Props - Keyboard","description":"Datepicker keyboard actions configuration","frontmatter":{"lang":"en-US","title":"Props - Keyboard","description":"Datepicker keyboard actions configuration"},"headers":[],"relativePath":"props/keyboard/index.md","filePath":"props/keyboard/index.md"}'),h={name:"props/keyboard/index.md"},p=s('Keyboard
Configure keyboard actions
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, escClose as esc-close and so on
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
esc-close
Esc key closes the menu
- Type:
boolean - Default:
true
',7),k=s(`Code Example
vue<template>
<VueDatePicker v-model="date" :esc-close="false" />
</template>
diff --git a/docs/assets/props_keyboard_index.md.G0H1-SZ1.lean.js b/docs/assets/props_keyboard_index.md.8mfI-ATL.lean.js
similarity index 91%
rename from docs/assets/props_keyboard_index.md.G0H1-SZ1.lean.js
rename to docs/assets/props_keyboard_index.md.8mfI-ATL.lean.js
index 3b01ca46..81350419 100644
--- a/docs/assets/props_keyboard_index.md.G0H1-SZ1.lean.js
+++ b/docs/assets/props_keyboard_index.md.8mfI-ATL.lean.js
@@ -1 +1 @@
-import{_ as t,D as n,c as e,I as a,am as s,o as l}from"./chunks/framework.IJS20kTW.js";const C=JSON.parse('{"title":"Props - Keyboard","description":"Datepicker keyboard actions configuration","frontmatter":{"lang":"en-US","title":"Props - Keyboard","description":"Datepicker keyboard actions configuration"},"headers":[],"relativePath":"props/keyboard/index.md","filePath":"props/keyboard/index.md"}'),h={name:"props/keyboard/index.md"},p=s("",7),k=s("",4),r=s("",4),d=s("",5),E=s("",1);function o(c,g,y,u,F,m){const i=n("GlobalDemo");return l(),e("div",null,[p,a(i,{"esc-close":!1}),k,a(i,{"space-confirm":!1}),r,a(i,{"month-change-on-arrows":!1}),d,a(i,{"arrow-navigation":!0}),E])}const b=t(h,[["render",o]]);export{C as __pageData,b as default};
+import{_ as t,D as n,c as e,I as a,am as s,o as l}from"./chunks/framework.BKRot_tQ.js";const C=JSON.parse('{"title":"Props - Keyboard","description":"Datepicker keyboard actions configuration","frontmatter":{"lang":"en-US","title":"Props - Keyboard","description":"Datepicker keyboard actions configuration"},"headers":[],"relativePath":"props/keyboard/index.md","filePath":"props/keyboard/index.md"}'),h={name:"props/keyboard/index.md"},p=s("",7),k=s("",4),r=s("",4),d=s("",5),E=s("",1);function o(c,g,y,u,F,m){const i=n("GlobalDemo");return l(),e("div",null,[p,a(i,{"esc-close":!1}),k,a(i,{"space-confirm":!1}),r,a(i,{"month-change-on-arrows":!1}),d,a(i,{"arrow-navigation":!0}),E])}const b=t(h,[["render",o]]);export{C as __pageData,b as default};
diff --git a/docs/assets/props_localization_index.md.Deuw2KpT.js b/docs/assets/props_localization_index.md.DAA9qzr1.js
similarity index 99%
rename from docs/assets/props_localization_index.md.Deuw2KpT.js
rename to docs/assets/props_localization_index.md.DAA9qzr1.js
index a265ee88..69b67fee 100644
--- a/docs/assets/props_localization_index.md.Deuw2KpT.js
+++ b/docs/assets/props_localization_index.md.DAA9qzr1.js
@@ -1,4 +1,4 @@
-import{_ as h,D as t,c as k,I as i,am as s,o as p}from"./chunks/framework.IJS20kTW.js";const v=JSON.parse('{"title":"Props - Localization","description":"Customize the localization of the datepicker","frontmatter":{"lang":"en-US","title":"Props - Localization","description":"Customize the localization of the datepicker"},"headers":[],"relativePath":"props/localization/index.md","filePath":"props/localization/index.md"}'),e={name:"props/localization/index.md"},E=s('Localization
Localization options and label props
Info
- If you use the component in the browser
<script> tag, make sure to pass multi-word props with -, for example, formatLocale as format-locale and so on
locale
Set datepicker locale. Datepicker will use built in javascript locale formatter to extract month and weekday names
- Type:
string - Default:
'en-US'
',6),r=s(`Code Example
vue<template>
+import{_ as h,D as t,c as k,I as i,am as s,o as p}from"./chunks/framework.BKRot_tQ.js";const v=JSON.parse('{"title":"Props - Localization","description":"Customize the localization of the datepicker","frontmatter":{"lang":"en-US","title":"Props - Localization","description":"Customize the localization of the datepicker"},"headers":[],"relativePath":"props/localization/index.md","filePath":"props/localization/index.md"}'),e={name:"props/localization/index.md"},E=s('Localization
Localization options and label props
Info
- If you use the component in the browser
<script> tag, make sure to pass multi-word props with -, for example, formatLocale as format-locale and so on
locale
Set datepicker locale. Datepicker will use built in javascript locale formatter to extract month and weekday names
- Type:
string - Default:
'en-US'
',6),r=s(`Code Example
vue<template>
<VueDatePicker v-model="date" locale="de" cancelText="abbrechen" selectText="auswählen" />
</template>
diff --git a/docs/assets/props_localization_index.md.Deuw2KpT.lean.js b/docs/assets/props_localization_index.md.DAA9qzr1.lean.js
similarity index 93%
rename from docs/assets/props_localization_index.md.Deuw2KpT.lean.js
rename to docs/assets/props_localization_index.md.DAA9qzr1.lean.js
index ee52f7b9..a87ed157 100644
--- a/docs/assets/props_localization_index.md.Deuw2KpT.lean.js
+++ b/docs/assets/props_localization_index.md.DAA9qzr1.lean.js
@@ -1 +1 @@
-import{_ as h,D as t,c as k,I as i,am as s,o as p}from"./chunks/framework.IJS20kTW.js";const v=JSON.parse('{"title":"Props - Localization","description":"Customize the localization of the datepicker","frontmatter":{"lang":"en-US","title":"Props - Localization","description":"Customize the localization of the datepicker"},"headers":[],"relativePath":"props/localization/index.md","filePath":"props/localization/index.md"}'),e={name:"props/localization/index.md"},E=s("",6),r=s("",6),d=s("",4),g=s("",4),y=s("",4),o=s("",4),F=s("",11),c=s("",1);function u(C,m,A,B,D,_){const a=t("GlobalDemo"),n=t("LocalizedOutput"),l=t("EmptyDemo");return p(),k("div",null,[E,i(a,{locale:"de",cancelText:"abbrechen",selectText:"auswählen"}),r,i(n),d,i(a,{"select-text":"Pick"}),g,i(a,{"cancel-text":"Close"}),y,i(l,{"action-row":{showNow:!0},placeholder:"Select Date","now-button-label":"Current"}),o,i(a,{"week-numbers":"iso","week-num-name":"We"}),F,i(a,{"day-names":["1","2","3","4","5","6","7"]}),c])}const f=h(e,[["render",u]]);export{v as __pageData,f as default};
+import{_ as h,D as t,c as k,I as i,am as s,o as p}from"./chunks/framework.BKRot_tQ.js";const v=JSON.parse('{"title":"Props - Localization","description":"Customize the localization of the datepicker","frontmatter":{"lang":"en-US","title":"Props - Localization","description":"Customize the localization of the datepicker"},"headers":[],"relativePath":"props/localization/index.md","filePath":"props/localization/index.md"}'),e={name:"props/localization/index.md"},E=s("",6),r=s("",6),d=s("",4),g=s("",4),y=s("",4),o=s("",4),F=s("",11),c=s("",1);function u(C,m,A,B,D,_){const a=t("GlobalDemo"),n=t("LocalizedOutput"),l=t("EmptyDemo");return p(),k("div",null,[E,i(a,{locale:"de",cancelText:"abbrechen",selectText:"auswählen"}),r,i(n),d,i(a,{"select-text":"Pick"}),g,i(a,{"cancel-text":"Close"}),y,i(l,{"action-row":{showNow:!0},placeholder:"Select Date","now-button-label":"Current"}),o,i(a,{"week-numbers":"iso","week-num-name":"We"}),F,i(a,{"day-names":["1","2","3","4","5","6","7"]}),c])}const f=h(e,[["render",u]]);export{v as __pageData,f as default};
diff --git a/docs/assets/props_look-and-feel_index.md.CUxjRaCU.js b/docs/assets/props_look-and-feel_index.md.CkNbrHve.js
similarity index 99%
rename from docs/assets/props_look-and-feel_index.md.CUxjRaCU.js
rename to docs/assets/props_look-and-feel_index.md.CkNbrHve.js
index 2df2da48..04999f7c 100644
--- a/docs/assets/props_look-and-feel_index.md.CUxjRaCU.js
+++ b/docs/assets/props_look-and-feel_index.md.CkNbrHve.js
@@ -1,4 +1,4 @@
-import{_ as e,D as n,c as k,I as i,am as s,o as p}from"./chunks/framework.IJS20kTW.js";const b=JSON.parse('{"title":"Props - Look and feel","description":"Look and feel customization options","frontmatter":{"lang":"en-US","title":"Props - Look and feel","description":"Look and feel customization options"},"headers":[],"relativePath":"props/look-and-feel/index.md","filePath":"props/look-and-feel/index.md"}'),d={name:"props/look-and-feel/index.md"},E=s(`Look and feel
Customization options
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, sixWeeks as six-weeks and so on
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:
Transitions | boolean - Default:
true
tsinterface Transitions {
+import{_ as e,D as n,c as k,I as i,am as s,o as p}from"./chunks/framework.BKRot_tQ.js";const b=JSON.parse('{"title":"Props - Look and feel","description":"Look and feel customization options","frontmatter":{"lang":"en-US","title":"Props - Look and feel","description":"Look and feel customization options"},"headers":[],"relativePath":"props/look-and-feel/index.md","filePath":"props/look-and-feel/index.md"}'),d={name:"props/look-and-feel/index.md"},E=s(`Look and feel
Customization options
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, sixWeeks as six-weeks and so on
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:
Transitions | boolean - Default:
true
tsinterface Transitions {
open?: string;
close?: string;
next?: string;
diff --git a/docs/assets/props_look-and-feel_index.md.CUxjRaCU.lean.js b/docs/assets/props_look-and-feel_index.md.CkNbrHve.lean.js
similarity index 92%
rename from docs/assets/props_look-and-feel_index.md.CUxjRaCU.lean.js
rename to docs/assets/props_look-and-feel_index.md.CkNbrHve.lean.js
index af2f2244..e29c6e59 100644
--- a/docs/assets/props_look-and-feel_index.md.CUxjRaCU.lean.js
+++ b/docs/assets/props_look-and-feel_index.md.CkNbrHve.lean.js
@@ -1 +1 @@
-import{_ as e,D as n,c as k,I as i,am as s,o as p}from"./chunks/framework.IJS20kTW.js";const b=JSON.parse('{"title":"Props - Look and feel","description":"Look and feel customization options","frontmatter":{"lang":"en-US","title":"Props - Look and feel","description":"Look and feel customization options"},"headers":[],"relativePath":"props/look-and-feel/index.md","filePath":"props/look-and-feel/index.md"}'),d={name:"props/look-and-feel/index.md"},E=s("",8),r=s("",5),g=s("",4),o=s("",4),y=s("",4),c=s("",4),F=s("",10),u=s("",1);function C(m,A,D,B,_,f){const a=n("GlobalDemo"),t=n("SixWeeksDemo"),l=n("DarkDemo"),h=n("DemoDayClass");return p(),k("div",null,[E,i(a,{transitions:!1}),r,i(t),g,i(l),o,i(a,{offset:20}),y,i(a,{"hide-input-icon":!0}),c,i(a,{state:!1}),F,i(h),u])}const T=e(d,[["render",C]]);export{b as __pageData,T as default};
+import{_ as e,D as n,c as k,I as i,am as s,o as p}from"./chunks/framework.BKRot_tQ.js";const b=JSON.parse('{"title":"Props - Look and feel","description":"Look and feel customization options","frontmatter":{"lang":"en-US","title":"Props - Look and feel","description":"Look and feel customization options"},"headers":[],"relativePath":"props/look-and-feel/index.md","filePath":"props/look-and-feel/index.md"}'),d={name:"props/look-and-feel/index.md"},E=s("",8),r=s("",5),g=s("",4),o=s("",4),y=s("",4),c=s("",4),F=s("",10),u=s("",1);function C(m,A,D,B,_,f){const a=n("GlobalDemo"),t=n("SixWeeksDemo"),l=n("DarkDemo"),h=n("DemoDayClass");return p(),k("div",null,[E,i(a,{transitions:!1}),r,i(t),g,i(l),o,i(a,{offset:20}),y,i(a,{"hide-input-icon":!0}),c,i(a,{state:!1}),F,i(h),u])}const T=e(d,[["render",C]]);export{b as __pageData,T as default};
diff --git a/docs/assets/props_modes-configuration_index.md.DST_YaWQ.js b/docs/assets/props_modes-configuration_index.md.DZEhKzVk.js
similarity index 99%
rename from docs/assets/props_modes-configuration_index.md.DST_YaWQ.js
rename to docs/assets/props_modes-configuration_index.md.DZEhKzVk.js
index 4ad40964..98f75e21 100644
--- a/docs/assets/props_modes-configuration_index.md.DST_YaWQ.js
+++ b/docs/assets/props_modes-configuration_index.md.DZEhKzVk.js
@@ -1,4 +1,4 @@
-import{_ as E,D as n,c as d,I as i,am as s,o as r}from"./chunks/framework.IJS20kTW.js";const Y=JSON.parse('{"title":"Props - Modes configuration","description":"Configure behaviour of the specific datepicker mode","frontmatter":{"lang":"en-US","title":"Props - Modes configuration","description":"Configure behaviour of the specific datepicker mode"},"headers":[],"relativePath":"props/modes-configuration/index.md","filePath":"props/modes-configuration/index.md"}'),g={name:"props/modes-configuration/index.md"},y=s(`Modes configuration
Props for configuring and extending the datepicker when using a specific mode
Info
- If you use the component in the browser
<script> tag, make sure to pass multi-word props with -, for example, textInput as text-input and so on
range configuration
Providing configuration object will automatically enable range picker
tsinterface RangeConfig {
+import{_ as E,D as n,c as d,I as i,am as s,o as r}from"./chunks/framework.BKRot_tQ.js";const Y=JSON.parse('{"title":"Props - Modes configuration","description":"Configure behaviour of the specific datepicker mode","frontmatter":{"lang":"en-US","title":"Props - Modes configuration","description":"Configure behaviour of the specific datepicker mode"},"headers":[],"relativePath":"props/modes-configuration/index.md","filePath":"props/modes-configuration/index.md"}'),g={name:"props/modes-configuration/index.md"},y=s(`Modes configuration
Props for configuring and extending the datepicker when using a specific mode
Info
- If you use the component in the browser
<script> tag, make sure to pass multi-word props with -, for example, textInput as text-input and so on
range configuration
Providing configuration object will automatically enable range picker
tsinterface RangeConfig {
noDisabledRange?: boolean;
showLastInRange?: boolean;
minMaxRawRange?: boolean;
diff --git a/docs/assets/props_modes-configuration_index.md.DST_YaWQ.lean.js b/docs/assets/props_modes-configuration_index.md.DZEhKzVk.lean.js
similarity index 97%
rename from docs/assets/props_modes-configuration_index.md.DST_YaWQ.lean.js
rename to docs/assets/props_modes-configuration_index.md.DZEhKzVk.lean.js
index e434fc50..e26324a7 100644
--- a/docs/assets/props_modes-configuration_index.md.DST_YaWQ.lean.js
+++ b/docs/assets/props_modes-configuration_index.md.DZEhKzVk.lean.js
@@ -1 +1 @@
-import{_ as E,D as n,c as d,I as i,am as s,o as r}from"./chunks/framework.IJS20kTW.js";const Y=JSON.parse('{"title":"Props - Modes configuration","description":"Configure behaviour of the specific datepicker mode","frontmatter":{"lang":"en-US","title":"Props - Modes configuration","description":"Configure behaviour of the specific datepicker mode"},"headers":[],"relativePath":"props/modes-configuration/index.md","filePath":"props/modes-configuration/index.md"}'),g={name:"props/modes-configuration/index.md"},y=s("",9),F=s("",4),o=s("",4),c=s("",4),C=s("",5),u=s("",5),B=s("",4),D=s("",4),A=s("",4),m=s("",4),f=s("",6),v=s("",8),b=s("",3),_=s("",8),q=s("",6),T=s("",7),z=s("",4),x=s("",4),w=s("",7),P=s("",4),S=s("",4),V=s("",4),R=s("",4),I=s("",1);function M(N,O,U,W,$,j){const a=n("RangeDemo"),l=n("DisabledRangeDateDemo"),p=n("PresetRange"),e=n("TextInputDemo"),k=n("GlobalDemo"),t=n("EmptyDemo"),h=n("TimezoneNewDemo");return r(),d("div",null,[y,i(a,{range:{autoRange:5}}),F,i(a,{range:{partialRange:!1}}),o,i(a,{range:{minRange:3},placeholder:"At least 3 days in between"}),c,i(a,{range:{maxRange:7},placeholder:"Can't have more than 7 days in between"}),C,i(a,{range:{fixedStart:!0},clearable:!1}),u,i(a,{range:{fixedEnd:!0},clearable:!1}),B,i(a,{range:{showLastInRange:!1}}),D,i(l),A,i(a,{"time-picker":!0,range:{disableTimeRangeValidation:!0},placeholder:"Select Time"}),m,i(a,{range:{maxRange:14,minMaxRawRange:!0},"disabled-week-days":[1,2,3,4,5]}),f,i(p),v,i(a,{"multi-calendars":{solo:!0}}),b,i(a,{"multi-calendars":{static:!1}}),_,i(e,{"text-input":{format:"MM.dd.yyyy HH:mm"},placeholder:"Start Typing ..."}),q,i(k,{inline:{input:!0},"auto-apply":!0,"text-input":!0}),T,i(t,{"multi-dates":{limit:3},placeholder:"Select Multiple Dates","multi-dates-limit":3}),z,i(t,{"multi-dates":{dragSelect:!1},placeholder:"Select Multiple Dates"}),x,i(t,{"auto-apply":!0,"partial-flow":!0,placeholder:"Select Date",flow:["calendar","time"]}),w,i(h),P,i(h,{timezone:{exactMatch:!0}}),S,i(h,{timezone:{exactMatch:!0,dateInTz:"UTC"}}),V,i(h,{emitVal:!0}),R,i(k,{timezone:{convertModel:!1,timezone:"UTC"}}),I])}const G=E(g,[["render",M]]);export{Y as __pageData,G as default};
+import{_ as E,D as n,c as d,I as i,am as s,o as r}from"./chunks/framework.BKRot_tQ.js";const Y=JSON.parse('{"title":"Props - Modes configuration","description":"Configure behaviour of the specific datepicker mode","frontmatter":{"lang":"en-US","title":"Props - Modes configuration","description":"Configure behaviour of the specific datepicker mode"},"headers":[],"relativePath":"props/modes-configuration/index.md","filePath":"props/modes-configuration/index.md"}'),g={name:"props/modes-configuration/index.md"},y=s("",9),F=s("",4),o=s("",4),c=s("",4),C=s("",5),u=s("",5),B=s("",4),D=s("",4),A=s("",4),m=s("",4),f=s("",6),v=s("",8),b=s("",3),_=s("",8),q=s("",6),T=s("",7),z=s("",4),x=s("",4),w=s("",7),P=s("",4),S=s("",4),V=s("",4),R=s("",4),I=s("",1);function M(N,O,U,W,$,j){const a=n("RangeDemo"),l=n("DisabledRangeDateDemo"),p=n("PresetRange"),e=n("TextInputDemo"),k=n("GlobalDemo"),t=n("EmptyDemo"),h=n("TimezoneNewDemo");return r(),d("div",null,[y,i(a,{range:{autoRange:5}}),F,i(a,{range:{partialRange:!1}}),o,i(a,{range:{minRange:3},placeholder:"At least 3 days in between"}),c,i(a,{range:{maxRange:7},placeholder:"Can't have more than 7 days in between"}),C,i(a,{range:{fixedStart:!0},clearable:!1}),u,i(a,{range:{fixedEnd:!0},clearable:!1}),B,i(a,{range:{showLastInRange:!1}}),D,i(l),A,i(a,{"time-picker":!0,range:{disableTimeRangeValidation:!0},placeholder:"Select Time"}),m,i(a,{range:{maxRange:14,minMaxRawRange:!0},"disabled-week-days":[1,2,3,4,5]}),f,i(p),v,i(a,{"multi-calendars":{solo:!0}}),b,i(a,{"multi-calendars":{static:!1}}),_,i(e,{"text-input":{format:"MM.dd.yyyy HH:mm"},placeholder:"Start Typing ..."}),q,i(k,{inline:{input:!0},"auto-apply":!0,"text-input":!0}),T,i(t,{"multi-dates":{limit:3},placeholder:"Select Multiple Dates","multi-dates-limit":3}),z,i(t,{"multi-dates":{dragSelect:!1},placeholder:"Select Multiple Dates"}),x,i(t,{"auto-apply":!0,"partial-flow":!0,placeholder:"Select Date",flow:["calendar","time"]}),w,i(h),P,i(h,{timezone:{exactMatch:!0}}),S,i(h,{timezone:{exactMatch:!0,dateInTz:"UTC"}}),V,i(h,{emitVal:!0}),R,i(k,{timezone:{convertModel:!1,timezone:"UTC"}}),I])}const G=E(g,[["render",M]]);export{Y as __pageData,G as default};
diff --git a/docs/assets/props_modes_index.md.H-gBcZzP.js b/docs/assets/props_modes_index.md.DTsCdhjY.js
similarity index 99%
rename from docs/assets/props_modes_index.md.H-gBcZzP.js
rename to docs/assets/props_modes_index.md.DTsCdhjY.js
index 11c98d4d..f7c9e021 100644
--- a/docs/assets/props_modes_index.md.H-gBcZzP.js
+++ b/docs/assets/props_modes_index.md.DTsCdhjY.js
@@ -1,4 +1,4 @@
-import{_ as o,D as a,c as y,I as i,am as s,o as c}from"./chunks/framework.IJS20kTW.js";const j=JSON.parse('{"title":"Props - Modes","description":"Use datepicker in specific mode","frontmatter":{"lang":"en-US","title":"Props - Modes","description":"Use datepicker in specific mode"},"headers":[],"relativePath":"props/modes/index.md","filePath":"props/modes/index.md"}'),F={name:"props/modes/index.md"},u=s('Modes
Set the default mode for the datepicker
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, multiCalendars as multi-calendars and so on
Info
Depending on the mode, v-model might be different, so make sure to use the proper configuration
range
Range picker mode
- Type:
boolean | RangeConfig - Default:
false
Info
If the RangeConfig object is provided, range is auto enabled.
For more info about range configuration properties, please refer to range configuration section
',8),m=s(`Code Example
vue<template>
+import{_ as o,D as a,c as y,I as i,am as s,o as c}from"./chunks/framework.BKRot_tQ.js";const j=JSON.parse('{"title":"Props - Modes","description":"Use datepicker in specific mode","frontmatter":{"lang":"en-US","title":"Props - Modes","description":"Use datepicker in specific mode"},"headers":[],"relativePath":"props/modes/index.md","filePath":"props/modes/index.md"}'),F={name:"props/modes/index.md"},u=s('Modes
Set the default mode for the datepicker
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, multiCalendars as multi-calendars and so on
Info
Depending on the mode, v-model might be different, so make sure to use the proper configuration
range
Range picker mode
- Type:
boolean | RangeConfig - Default:
false
Info
If the RangeConfig object is provided, range is auto enabled.
For more info about range configuration properties, please refer to range configuration section
',8),m=s(`Code Example
vue<template>
<VueDatePicker v-model="date" range />
</template>
diff --git a/docs/assets/props_modes_index.md.H-gBcZzP.lean.js b/docs/assets/props_modes_index.md.DTsCdhjY.lean.js
similarity index 95%
rename from docs/assets/props_modes_index.md.H-gBcZzP.lean.js
rename to docs/assets/props_modes_index.md.DTsCdhjY.lean.js
index d7a340e2..47344dea 100644
--- a/docs/assets/props_modes_index.md.H-gBcZzP.lean.js
+++ b/docs/assets/props_modes_index.md.DTsCdhjY.lean.js
@@ -1 +1 @@
-import{_ as o,D as a,c as y,I as i,am as s,o as c}from"./chunks/framework.IJS20kTW.js";const j=JSON.parse('{"title":"Props - Modes","description":"Use datepicker in specific mode","frontmatter":{"lang":"en-US","title":"Props - Modes","description":"Use datepicker in specific mode"},"headers":[],"relativePath":"props/modes/index.md","filePath":"props/modes/index.md"}'),F={name:"props/modes/index.md"},u=s("",8),m=s("",5),C=s("",4),D=s("",4),A=s("",4),f=s("",4),B=s("",6),_=s("",5),v=s("",5),b=s("",5),T=s("",5),q=s("",5),w=s("",4),P=s("",5),x=s("",5),z=s("",1);function S(I,V,M,N,R,O){const n=a("RangeDemo"),h=a("MonthPickerDemo"),k=a("TimePickerDemo"),e=a("YearPickerDemo"),t=a("EmptyDemo"),p=a("QuarterPickerDemo"),E=a("TextInputDemo"),l=a("GlobalDemo"),d=a("TimezoneDemo"),r=a("DisplayModelDemo"),g=a("TimezoneNewDemo");return c(),y("div",null,[u,i(n),m,i(n,{"multi-calendars":!0}),C,i(h),D,i(k),A,i(e),f,i(t,{"week-picker":!0,placeholder:"Select week"}),B,i(p),_,i(E,{placeholder:"Start Typing ...","text-input":!0}),v,i(l,{inline:!0,"auto-apply":!0}),b,i(t,{"multi-dates":!0,placeholder:"Select Multiple Dates"}),T,i(t,{flow:["month","year","calendar"],placeholder:"Month > Year > Date"}),q,i(d),w,i(l,{vertical:!0}),P,i(r,{"model-auto":!0,range:!0}),x,i(g),z])}const W=o(F,[["render",S]]);export{j as __pageData,W as default};
+import{_ as o,D as a,c as y,I as i,am as s,o as c}from"./chunks/framework.BKRot_tQ.js";const j=JSON.parse('{"title":"Props - Modes","description":"Use datepicker in specific mode","frontmatter":{"lang":"en-US","title":"Props - Modes","description":"Use datepicker in specific mode"},"headers":[],"relativePath":"props/modes/index.md","filePath":"props/modes/index.md"}'),F={name:"props/modes/index.md"},u=s("",8),m=s("",5),C=s("",4),D=s("",4),A=s("",4),f=s("",4),B=s("",6),_=s("",5),v=s("",5),b=s("",5),T=s("",5),q=s("",5),w=s("",4),P=s("",5),x=s("",5),z=s("",1);function S(I,V,M,N,R,O){const n=a("RangeDemo"),h=a("MonthPickerDemo"),k=a("TimePickerDemo"),e=a("YearPickerDemo"),t=a("EmptyDemo"),p=a("QuarterPickerDemo"),E=a("TextInputDemo"),l=a("GlobalDemo"),d=a("TimezoneDemo"),r=a("DisplayModelDemo"),g=a("TimezoneNewDemo");return c(),y("div",null,[u,i(n),m,i(n,{"multi-calendars":!0}),C,i(h),D,i(k),A,i(e),f,i(t,{"week-picker":!0,placeholder:"Select week"}),B,i(p),_,i(E,{placeholder:"Start Typing ...","text-input":!0}),v,i(l,{inline:!0,"auto-apply":!0}),b,i(t,{"multi-dates":!0,placeholder:"Select Multiple Dates"}),T,i(t,{flow:["month","year","calendar"],placeholder:"Month > Year > Date"}),q,i(d),w,i(l,{vertical:!0}),P,i(r,{"model-auto":!0,range:!0}),x,i(g),z])}const W=o(F,[["render",S]]);export{j as __pageData,W as default};
diff --git a/docs/assets/props_positioning_index.md.YyAjrg37.js b/docs/assets/props_positioning_index.md.CRvumIlI.js
similarity index 99%
rename from docs/assets/props_positioning_index.md.YyAjrg37.js
rename to docs/assets/props_positioning_index.md.CRvumIlI.js
index 2a0b3792..da2e5017 100644
--- a/docs/assets/props_positioning_index.md.YyAjrg37.js
+++ b/docs/assets/props_positioning_index.md.CRvumIlI.js
@@ -1,4 +1,4 @@
-import{_ as t,D as n,c as l,I as a,am as s,o as e}from"./chunks/framework.IJS20kTW.js";const D=JSON.parse('{"title":"Props - Positioning","description":"Datepicker menu positioning configuration","frontmatter":{"lang":"en-US","title":"Props - Positioning","description":"Datepicker menu positioning configuration"},"headers":[],"relativePath":"props/positioning/index.md","filePath":"props/positioning/index.md"}'),h={name:"props/positioning/index.md"},p=s('Positioning
Configure datepicker menu positioning
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, autoPosition as auto-position and so on
position
Datepicker menu position
- Type:
'left' | 'center' | 'right' - Default:
'center'
',6),k=s(`Code Example
vue<template>
+import{_ as t,D as n,c as l,I as a,am as s,o as e}from"./chunks/framework.BKRot_tQ.js";const D=JSON.parse('{"title":"Props - Positioning","description":"Datepicker menu positioning configuration","frontmatter":{"lang":"en-US","title":"Props - Positioning","description":"Datepicker menu positioning configuration"},"headers":[],"relativePath":"props/positioning/index.md","filePath":"props/positioning/index.md"}'),h={name:"props/positioning/index.md"},p=s('Positioning
Configure datepicker menu positioning
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, autoPosition as auto-position and so on
position
Datepicker menu position
- Type:
'left' | 'center' | 'right' - Default:
'center'
',6),k=s(`Code Example
vue<template>
<VueDatePicker v-model="date" position="left" />
</template>
diff --git a/docs/assets/props_positioning_index.md.YyAjrg37.lean.js b/docs/assets/props_positioning_index.md.CRvumIlI.lean.js
similarity index 92%
rename from docs/assets/props_positioning_index.md.YyAjrg37.lean.js
rename to docs/assets/props_positioning_index.md.CRvumIlI.lean.js
index 7e52856b..c6ef3889 100644
--- a/docs/assets/props_positioning_index.md.YyAjrg37.lean.js
+++ b/docs/assets/props_positioning_index.md.CRvumIlI.lean.js
@@ -1 +1 @@
-import{_ as t,D as n,c as l,I as a,am as s,o as e}from"./chunks/framework.IJS20kTW.js";const D=JSON.parse('{"title":"Props - Positioning","description":"Datepicker menu positioning configuration","frontmatter":{"lang":"en-US","title":"Props - Positioning","description":"Datepicker menu positioning configuration"},"headers":[],"relativePath":"props/positioning/index.md","filePath":"props/positioning/index.md"}'),h={name:"props/positioning/index.md"},p=s("",6),k=s("",5),E=s("",4),o=s("",4),r=s("",4),d=s("",1);function g(c,y,u,F,m,_){const i=n("GlobalDemo");return e(),l("div",null,[p,a(i,{position:"left"}),k,a(i,{teleport:!0}),E,a(i,{"alt-position":()=>({top:0,left:0})}),o,a(i,{"auto-position":!1}),r,a(i,{teleportCenter:!0}),d])}const b=t(h,[["render",g]]);export{D as __pageData,b as default};
+import{_ as t,D as n,c as l,I as a,am as s,o as e}from"./chunks/framework.BKRot_tQ.js";const D=JSON.parse('{"title":"Props - Positioning","description":"Datepicker menu positioning configuration","frontmatter":{"lang":"en-US","title":"Props - Positioning","description":"Datepicker menu positioning configuration"},"headers":[],"relativePath":"props/positioning/index.md","filePath":"props/positioning/index.md"}'),h={name:"props/positioning/index.md"},p=s("",6),k=s("",5),E=s("",4),o=s("",4),r=s("",4),d=s("",1);function g(c,y,u,F,m,_){const i=n("GlobalDemo");return e(),l("div",null,[p,a(i,{position:"left"}),k,a(i,{teleport:!0}),E,a(i,{"alt-position":()=>({top:0,left:0})}),o,a(i,{"auto-position":!1}),r,a(i,{teleportCenter:!0}),d])}const b=t(h,[["render",g]]);export{D as __pageData,b as default};
diff --git a/docs/assets/props_time-picker-configuration_index.md.CCjnWvEv.js b/docs/assets/props_time-picker-configuration_index.md.D6BhtHUZ.js
similarity index 99%
rename from docs/assets/props_time-picker-configuration_index.md.CCjnWvEv.js
rename to docs/assets/props_time-picker-configuration_index.md.D6BhtHUZ.js
index 4c389c22..4ef03072 100644
--- a/docs/assets/props_time-picker-configuration_index.md.CCjnWvEv.js
+++ b/docs/assets/props_time-picker-configuration_index.md.D6BhtHUZ.js
@@ -1,4 +1,4 @@
-import{_ as h,D as t,c as e,I as i,am as s,o as k}from"./chunks/framework.IJS20kTW.js";const j=JSON.parse('{"title":"Props - Time picker configuration","description":"Configure time-picker behavior","frontmatter":{"lang":"en-US","title":"Props - Time picker configuration","description":"Configure time-picker behavior"},"headers":[],"relativePath":"props/time-picker-configuration/index.md","filePath":"props/time-picker-configuration/index.md"}'),p={name:"props/time-picker-configuration/index.md"},E=s('Time picker configuration
Configuration properties for the time picker, applicable whether it is used standalone or with the datepicker.
Info