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 i,c as a,aj as n,o as h}from"./chunks/framework.C8IqNCju.js";const g=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"}'),k={name:"customization/theming/index.md"};function p(l,s,t,e,E,d){return h(),a("div",null,s[0]||(s[0]=[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.n7fcEp_w.lean.js b/docs/assets/customization_theming_index.md.J55SD4PY.lean.js
similarity index 99%
rename from docs/assets/customization_theming_index.md.n7fcEp_w.lean.js
rename to docs/assets/customization_theming_index.md.J55SD4PY.lean.js
index ae9a6a17..96bf3cb8 100644
--- a/docs/assets/customization_theming_index.md.n7fcEp_w.lean.js
+++ b/docs/assets/customization_theming_index.md.J55SD4PY.lean.js
@@ -1,4 +1,4 @@
-import{_ as i,c as a,al as n,o as h}from"./chunks/framework.DDyYGyON.js";const g=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"}'),k={name:"customization/theming/index.md"};function p(l,s,t,e,E,d){return h(),a("div",null,s[0]||(s[0]=[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 {
+import{_ as i,c as a,aj as n,o as h}from"./chunks/framework.C8IqNCju.js";const g=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"}'),k={name:"customization/theming/index.md"};function p(l,s,t,e,E,d){return h(),a("div",null,s[0]||(s[0]=[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/index.md.BJiPgZgU.js b/docs/assets/index.md.AEe3KBSA.js
similarity index 96%
rename from docs/assets/index.md.BJiPgZgU.js
rename to docs/assets/index.md.AEe3KBSA.js
index eb59da20..d737dd47 100644
--- a/docs/assets/index.md.BJiPgZgU.js
+++ b/docs/assets/index.md.AEe3KBSA.js
@@ -1 +1 @@
-import{_ as t,c as o,G as a,B as i,o as n}from"./chunks/framework.DDyYGyON.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=i("StarAndSponsor");return n(),o("div",null,[a(e)])}const f=t(r,[["render",s]]);export{k as __pageData,f as default};
+import{_ as t,c as o,G as a,B as i,o as n}from"./chunks/framework.C8IqNCju.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=i("StarAndSponsor");return n(),o("div",null,[a(e)])}const f=t(r,[["render",s]]);export{k as __pageData,f as default};
diff --git a/docs/assets/index.md.BJiPgZgU.lean.js b/docs/assets/index.md.AEe3KBSA.lean.js
similarity index 96%
rename from docs/assets/index.md.BJiPgZgU.lean.js
rename to docs/assets/index.md.AEe3KBSA.lean.js
index eb59da20..d737dd47 100644
--- a/docs/assets/index.md.BJiPgZgU.lean.js
+++ b/docs/assets/index.md.AEe3KBSA.lean.js
@@ -1 +1 @@
-import{_ as t,c as o,G as a,B as i,o as n}from"./chunks/framework.DDyYGyON.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=i("StarAndSponsor");return n(),o("div",null,[a(e)])}const f=t(r,[["render",s]]);export{k as __pageData,f as default};
+import{_ as t,c as o,G as a,B as i,o as n}from"./chunks/framework.C8IqNCju.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=i("StarAndSponsor");return n(),o("div",null,[a(e)])}const f=t(r,[["render",s]]);export{k as __pageData,f as default};
diff --git a/docs/assets/installation_index.md.CqYA7Cgq.js b/docs/assets/installation_index.md.DU4NbBGO.js
similarity index 96%
rename from docs/assets/installation_index.md.CqYA7Cgq.js
rename to docs/assets/installation_index.md.DU4NbBGO.js
index 9af74c08..aa7443d7 100644
--- a/docs/assets/installation_index.md.CqYA7Cgq.js
+++ b/docs/assets/installation_index.md.DU4NbBGO.js
@@ -1,4 +1,4 @@
-import{_ as i,c as a,al as t,o as n}from"./chunks/framework.DDyYGyON.js";const g=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"}'),p={name:"installation/index.md"};function l(e,s,h,k,d,E){return n(),a("div",null,s[0]||(s[0]=[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 i,c as a,aj as t,o as n}from"./chunks/framework.C8IqNCju.js";const g=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"}'),p={name:"installation/index.md"};function l(e,s,h,k,d,E){return n(),a("div",null,s[0]||(s[0]=[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 i,c as a,al as t,o as n}from"./chunks/framework.DDyYGyON.js";const g
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.CqYA7Cgq.lean.js b/docs/assets/installation_index.md.DU4NbBGO.lean.js
similarity index 96%
rename from docs/assets/installation_index.md.CqYA7Cgq.lean.js
rename to docs/assets/installation_index.md.DU4NbBGO.lean.js
index 9af74c08..aa7443d7 100644
--- a/docs/assets/installation_index.md.CqYA7Cgq.lean.js
+++ b/docs/assets/installation_index.md.DU4NbBGO.lean.js
@@ -1,4 +1,4 @@
-import{_ as i,c as a,al as t,o as n}from"./chunks/framework.DDyYGyON.js";const g=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"}'),p={name:"installation/index.md"};function l(e,s,h,k,d,E){return n(),a("div",null,s[0]||(s[0]=[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 i,c as a,aj as t,o as n}from"./chunks/framework.C8IqNCju.js";const g=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"}'),p={name:"installation/index.md"};function l(e,s,h,k,d,E){return n(),a("div",null,s[0]||(s[0]=[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 i,c as a,al as t,o as n}from"./chunks/framework.DDyYGyON.js";const g
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/methods-and-events_events_index.md.C-wBkQV8.js b/docs/assets/methods-and-events_events_index.md.XXQ9Y2Gs.js
similarity index 99%
rename from docs/assets/methods-and-events_events_index.md.C-wBkQV8.js
rename to docs/assets/methods-and-events_events_index.md.XXQ9Y2Gs.js
index a2c5332a..9d810136 100644
--- a/docs/assets/methods-and-events_events_index.md.C-wBkQV8.js
+++ b/docs/assets/methods-and-events_events_index.md.XXQ9Y2Gs.js
@@ -1,4 +1,4 @@
-import{_ as i,c as a,al as n,o as h}from"./chunks/framework.DDyYGyON.js";const g=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"}'),l={name:"methods-and-events/events/index.md"};function t(k,s,p,e,E,d){return h(),a("div",null,s[0]||(s[0]=[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 i,c as a,aj as n,o as h}from"./chunks/framework.C8IqNCju.js";const g=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"}'),l={name:"methods-and-events/events/index.md"};function t(k,s,p,e,E,d){return h(),a("div",null,s[0]||(s[0]=[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.C-wBkQV8.lean.js b/docs/assets/methods-and-events_events_index.md.XXQ9Y2Gs.lean.js
similarity index 99%
rename from docs/assets/methods-and-events_events_index.md.C-wBkQV8.lean.js
rename to docs/assets/methods-and-events_events_index.md.XXQ9Y2Gs.lean.js
index a2c5332a..9d810136 100644
--- a/docs/assets/methods-and-events_events_index.md.C-wBkQV8.lean.js
+++ b/docs/assets/methods-and-events_events_index.md.XXQ9Y2Gs.lean.js
@@ -1,4 +1,4 @@
-import{_ as i,c as a,al as n,o as h}from"./chunks/framework.DDyYGyON.js";const g=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"}'),l={name:"methods-and-events/events/index.md"};function t(k,s,p,e,E,d){return h(),a("div",null,s[0]||(s[0]=[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 i,c as a,aj as n,o as h}from"./chunks/framework.C8IqNCju.js";const g=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"}'),l={name:"methods-and-events/events/index.md"};function t(k,s,p,e,E,d){return h(),a("div",null,s[0]||(s[0]=[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_methods_index.md.BUAhxP5w.js b/docs/assets/methods-and-events_methods_index.md.DSPnQskQ.js
similarity index 98%
rename from docs/assets/methods-and-events_methods_index.md.BUAhxP5w.js
rename to docs/assets/methods-and-events_methods_index.md.DSPnQskQ.js
index 5844c947..d7104327 100644
--- a/docs/assets/methods-and-events_methods_index.md.BUAhxP5w.js
+++ b/docs/assets/methods-and-events_methods_index.md.DSPnQskQ.js
@@ -1,4 +1,4 @@
-import{_ as s,c as e,al as i,o as t}from"./chunks/framework.DDyYGyON.js";const c=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"}'),l={name:"methods-and-events/methods/index.md"};function n(h,a,p,r,o,d){return t(),e("div",null,a[0]||(a[0]=[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 s,c as e,aj as i,o as t}from"./chunks/framework.C8IqNCju.js";const c=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"}'),l={name:"methods-and-events/methods/index.md"};function n(h,a,p,r,o,d){return t(),e("div",null,a[0]||(a[0]=[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.BUAhxP5w.lean.js b/docs/assets/methods-and-events_methods_index.md.DSPnQskQ.lean.js
similarity index 98%
rename from docs/assets/methods-and-events_methods_index.md.BUAhxP5w.lean.js
rename to docs/assets/methods-and-events_methods_index.md.DSPnQskQ.lean.js
index 5844c947..d7104327 100644
--- a/docs/assets/methods-and-events_methods_index.md.BUAhxP5w.lean.js
+++ b/docs/assets/methods-and-events_methods_index.md.DSPnQskQ.lean.js
@@ -1,4 +1,4 @@
-import{_ as s,c as e,al as i,o as t}from"./chunks/framework.DDyYGyON.js";const c=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"}'),l={name:"methods-and-events/methods/index.md"};function n(h,a,p,r,o,d){return t(),e("div",null,a[0]||(a[0]=[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 s,c as e,aj as i,o as t}from"./chunks/framework.C8IqNCju.js";const c=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"}'),l={name:"methods-and-events/methods/index.md"};function n(h,a,p,r,o,d){return t(),e("div",null,a[0]||(a[0]=[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/migration_from-v10.md.cKOzBSoF.js b/docs/assets/migration_from-v10.md.CeyMK1B_.js
similarity index 98%
rename from docs/assets/migration_from-v10.md.cKOzBSoF.js
rename to docs/assets/migration_from-v10.md.CeyMK1B_.js
index 36cdd47e..692e31ff 100644
--- a/docs/assets/migration_from-v10.md.cKOzBSoF.js
+++ b/docs/assets/migration_from-v10.md.CeyMK1B_.js
@@ -1 +1 @@
-import{_ as s,c as a,al as e,o as t}from"./chunks/framework.DDyYGyON.js";const g=JSON.parse('{"title":"Migration from v10","description":"Migration guide for migrating from v10 to v11 and notifying of breaking changes","frontmatter":{"lang":"en-US","title":"Migration from v10","description":"Migration guide for migrating from v10 to v11 and notifying of breaking changes"},"headers":[],"relativePath":"migration/from-v10.md","filePath":"migration/from-v10.md"}'),n={name:"migration/from-v10.md"};function h(l,i,d,p,k,r){return t(),a("div",null,i[0]||(i[0]=[e('Migrating from v10
Breaking changes
- Library now requires
vue >= v3.3 - Calendar cells
id attribute is now prefixed with dp- - Calendar cells
data-test-id attribute now matches the id value - Ref
dpWrapMenuRef is now exposed via the getter function getDpWrapMenuRef instead of direct access
Calendar cell id update
jsimport { format } from 'date-fns';\nconst formatToken = `yyyy-MM-dd`;\n\ndocument.getElementById(format(new Date(), formatToken)) \ndocument.getElementById(`dp-${format(new Date(), formatToken)}`)
Calendar cell data-test-id update
jsimport { format } from 'date-fns';\nconst formatToken = `yyyy-MM-dd`;\n\ndocument.querySelector(`[data-test-id="${new Date()}"]`) \ndocument.querySelector(`[data-test-id="dp-${format(new Date(), formatToken)}"]`)
dpWrapMenuRef
Instead of directly accessing the ref, it is now wrapped in a function
jsdatePickerInstance.dpWrapMenuRef.value \ndatePickerInstance.getDpWrapMenuRef().value
',10)]))}const c=s(n,[["render",h]]);export{g as __pageData,c as default};
+import{_ as s,c as a,aj as e,o as t}from"./chunks/framework.C8IqNCju.js";const g=JSON.parse('{"title":"Migration from v10","description":"Migration guide for migrating from v10 to v11 and notifying of breaking changes","frontmatter":{"lang":"en-US","title":"Migration from v10","description":"Migration guide for migrating from v10 to v11 and notifying of breaking changes"},"headers":[],"relativePath":"migration/from-v10.md","filePath":"migration/from-v10.md"}'),n={name:"migration/from-v10.md"};function h(l,i,d,p,k,r){return t(),a("div",null,i[0]||(i[0]=[e('Migrating from v10
Breaking changes
- Library now requires
vue >= v3.3 - Calendar cells
id attribute is now prefixed with dp- - Calendar cells
data-test-id attribute now matches the id value - Ref
dpWrapMenuRef is now exposed via the getter function getDpWrapMenuRef instead of direct access
Calendar cell id update
jsimport { format } from 'date-fns';\nconst formatToken = `yyyy-MM-dd`;\n\ndocument.getElementById(format(new Date(), formatToken)) \ndocument.getElementById(`dp-${format(new Date(), formatToken)}`)
Calendar cell data-test-id update
jsimport { format } from 'date-fns';\nconst formatToken = `yyyy-MM-dd`;\n\ndocument.querySelector(`[data-test-id="${new Date()}"]`) \ndocument.querySelector(`[data-test-id="dp-${format(new Date(), formatToken)}"]`)
dpWrapMenuRef
Instead of directly accessing the ref, it is now wrapped in a function
jsdatePickerInstance.dpWrapMenuRef.value \ndatePickerInstance.getDpWrapMenuRef().value
',10)]))}const c=s(n,[["render",h]]);export{g as __pageData,c as default};
diff --git a/docs/assets/migration_from-v10.md.cKOzBSoF.lean.js b/docs/assets/migration_from-v10.md.CeyMK1B_.lean.js
similarity index 98%
rename from docs/assets/migration_from-v10.md.cKOzBSoF.lean.js
rename to docs/assets/migration_from-v10.md.CeyMK1B_.lean.js
index 36cdd47e..692e31ff 100644
--- a/docs/assets/migration_from-v10.md.cKOzBSoF.lean.js
+++ b/docs/assets/migration_from-v10.md.CeyMK1B_.lean.js
@@ -1 +1 @@
-import{_ as s,c as a,al as e,o as t}from"./chunks/framework.DDyYGyON.js";const g=JSON.parse('{"title":"Migration from v10","description":"Migration guide for migrating from v10 to v11 and notifying of breaking changes","frontmatter":{"lang":"en-US","title":"Migration from v10","description":"Migration guide for migrating from v10 to v11 and notifying of breaking changes"},"headers":[],"relativePath":"migration/from-v10.md","filePath":"migration/from-v10.md"}'),n={name:"migration/from-v10.md"};function h(l,i,d,p,k,r){return t(),a("div",null,i[0]||(i[0]=[e('Migrating from v10
Breaking changes
- Library now requires
vue >= v3.3 - Calendar cells
id attribute is now prefixed with dp- - Calendar cells
data-test-id attribute now matches the id value - Ref
dpWrapMenuRef is now exposed via the getter function getDpWrapMenuRef instead of direct access
Calendar cell id update
jsimport { format } from 'date-fns';\nconst formatToken = `yyyy-MM-dd`;\n\ndocument.getElementById(format(new Date(), formatToken)) \ndocument.getElementById(`dp-${format(new Date(), formatToken)}`)
Calendar cell data-test-id update
jsimport { format } from 'date-fns';\nconst formatToken = `yyyy-MM-dd`;\n\ndocument.querySelector(`[data-test-id="${new Date()}"]`) \ndocument.querySelector(`[data-test-id="dp-${format(new Date(), formatToken)}"]`)
dpWrapMenuRef
Instead of directly accessing the ref, it is now wrapped in a function
jsdatePickerInstance.dpWrapMenuRef.value \ndatePickerInstance.getDpWrapMenuRef().value
',10)]))}const c=s(n,[["render",h]]);export{g as __pageData,c as default};
+import{_ as s,c as a,aj as e,o as t}from"./chunks/framework.C8IqNCju.js";const g=JSON.parse('{"title":"Migration from v10","description":"Migration guide for migrating from v10 to v11 and notifying of breaking changes","frontmatter":{"lang":"en-US","title":"Migration from v10","description":"Migration guide for migrating from v10 to v11 and notifying of breaking changes"},"headers":[],"relativePath":"migration/from-v10.md","filePath":"migration/from-v10.md"}'),n={name:"migration/from-v10.md"};function h(l,i,d,p,k,r){return t(),a("div",null,i[0]||(i[0]=[e('Migrating from v10
Breaking changes
- Library now requires
vue >= v3.3 - Calendar cells
id attribute is now prefixed with dp- - Calendar cells
data-test-id attribute now matches the id value - Ref
dpWrapMenuRef is now exposed via the getter function getDpWrapMenuRef instead of direct access
Calendar cell id update
jsimport { format } from 'date-fns';\nconst formatToken = `yyyy-MM-dd`;\n\ndocument.getElementById(format(new Date(), formatToken)) \ndocument.getElementById(`dp-${format(new Date(), formatToken)}`)
Calendar cell data-test-id update
jsimport { format } from 'date-fns';\nconst formatToken = `yyyy-MM-dd`;\n\ndocument.querySelector(`[data-test-id="${new Date()}"]`) \ndocument.querySelector(`[data-test-id="dp-${format(new Date(), formatToken)}"]`)
dpWrapMenuRef
Instead of directly accessing the ref, it is now wrapped in a function
jsdatePickerInstance.dpWrapMenuRef.value \ndatePickerInstance.getDpWrapMenuRef().value
',10)]))}const c=s(n,[["render",h]]);export{g as __pageData,c as default};
diff --git a/docs/assets/migration_from-v5.md.Bmjm4GG1.js b/docs/assets/migration_from-v5.md.D_NRXSTe.js
similarity index 99%
rename from docs/assets/migration_from-v5.md.Bmjm4GG1.js
rename to docs/assets/migration_from-v5.md.D_NRXSTe.js
index 7692cd83..c4165419 100644
--- a/docs/assets/migration_from-v5.md.Bmjm4GG1.js
+++ b/docs/assets/migration_from-v5.md.D_NRXSTe.js
@@ -1,4 +1,4 @@
-import{_ as s,c as a,al as t,o as n}from"./chunks/framework.DDyYGyON.js";const c=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"}'),e={name:"migration/from-v5.md"};function l(p,i,h,o,k,r){return n(),a("div",null,i[0]||(i[0]=[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 s,c as a,aj as t,o as n}from"./chunks/framework.C8IqNCju.js";const c=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"}'),e={name:"migration/from-v5.md"};function l(p,i,h,o,k,r){return n(),a("div",null,i[0]||(i[0]=[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.Bmjm4GG1.lean.js b/docs/assets/migration_from-v5.md.D_NRXSTe.lean.js
similarity index 99%
rename from docs/assets/migration_from-v5.md.Bmjm4GG1.lean.js
rename to docs/assets/migration_from-v5.md.D_NRXSTe.lean.js
index 7692cd83..c4165419 100644
--- a/docs/assets/migration_from-v5.md.Bmjm4GG1.lean.js
+++ b/docs/assets/migration_from-v5.md.D_NRXSTe.lean.js
@@ -1,4 +1,4 @@
-import{_ as s,c as a,al as t,o as n}from"./chunks/framework.DDyYGyON.js";const c=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"}'),e={name:"migration/from-v5.md"};function l(p,i,h,o,k,r){return n(),a("div",null,i[0]||(i[0]=[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 s,c as a,aj as t,o as n}from"./chunks/framework.C8IqNCju.js";const c=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"}'),e={name:"migration/from-v5.md"};function l(p,i,h,o,k,r){return n(),a("div",null,i[0]||(i[0]=[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-v6.md.BGEZ6Qh1.js b/docs/assets/migration_from-v6.md.DSqGwAuD.js
similarity index 92%
rename from docs/assets/migration_from-v6.md.BGEZ6Qh1.js
rename to docs/assets/migration_from-v6.md.DSqGwAuD.js
index be322212..37b99707 100644
--- a/docs/assets/migration_from-v6.md.BGEZ6Qh1.js
+++ b/docs/assets/migration_from-v6.md.DSqGwAuD.js
@@ -1 +1 @@
-import{_ as o,c as i,al as a,o as r}from"./chunks/framework.DDyYGyON.js";const m=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"};function n(l,e,c,d,g,s){return r(),i("div",null,e[0]||(e[0]=[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)]))}const p=o(t,[["render",n]]);export{m as __pageData,p as default};
+import{_ as o,c as i,aj as a,o as r}from"./chunks/framework.C8IqNCju.js";const m=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"};function n(l,e,c,d,g,s){return r(),i("div",null,e[0]||(e[0]=[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)]))}const p=o(t,[["render",n]]);export{m as __pageData,p as default};
diff --git a/docs/assets/migration_from-v6.md.BGEZ6Qh1.lean.js b/docs/assets/migration_from-v6.md.DSqGwAuD.lean.js
similarity index 92%
rename from docs/assets/migration_from-v6.md.BGEZ6Qh1.lean.js
rename to docs/assets/migration_from-v6.md.DSqGwAuD.lean.js
index be322212..37b99707 100644
--- a/docs/assets/migration_from-v6.md.BGEZ6Qh1.lean.js
+++ b/docs/assets/migration_from-v6.md.DSqGwAuD.lean.js
@@ -1 +1 @@
-import{_ as o,c as i,al as a,o as r}from"./chunks/framework.DDyYGyON.js";const m=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"};function n(l,e,c,d,g,s){return r(),i("div",null,e[0]||(e[0]=[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)]))}const p=o(t,[["render",n]]);export{m as __pageData,p as default};
+import{_ as o,c as i,aj as a,o as r}from"./chunks/framework.C8IqNCju.js";const m=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"};function n(l,e,c,d,g,s){return r(),i("div",null,e[0]||(e[0]=[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)]))}const p=o(t,[["render",n]]);export{m as __pageData,p as default};
diff --git a/docs/assets/migration_from-v7.md.D7tfPsIU.js b/docs/assets/migration_from-v7.md.PNhq04aB.js
similarity index 99%
rename from docs/assets/migration_from-v7.md.D7tfPsIU.js
rename to docs/assets/migration_from-v7.md.PNhq04aB.js
index fab36389..38b8372e 100644
--- a/docs/assets/migration_from-v7.md.D7tfPsIU.js
+++ b/docs/assets/migration_from-v7.md.PNhq04aB.js
@@ -1,4 +1,4 @@
-import{_ as s,c as a,al as t,o as l}from"./chunks/framework.DDyYGyON.js";const g=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"}'),e={name:"migration/from-v7.md"};function h(n,i,k,p,d,o){return l(),a("div",null,i[0]||(i[0]=[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 s,c as a,aj as t,o as l}from"./chunks/framework.C8IqNCju.js";const g=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"}'),e={name:"migration/from-v7.md"};function h(n,i,k,p,d,o){return l(),a("div",null,i[0]||(i[0]=[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.D7tfPsIU.lean.js b/docs/assets/migration_from-v7.md.PNhq04aB.lean.js
similarity index 99%
rename from docs/assets/migration_from-v7.md.D7tfPsIU.lean.js
rename to docs/assets/migration_from-v7.md.PNhq04aB.lean.js
index fab36389..38b8372e 100644
--- a/docs/assets/migration_from-v7.md.D7tfPsIU.lean.js
+++ b/docs/assets/migration_from-v7.md.PNhq04aB.lean.js
@@ -1,4 +1,4 @@
-import{_ as s,c as a,al as t,o as l}from"./chunks/framework.DDyYGyON.js";const g=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"}'),e={name:"migration/from-v7.md"};function h(n,i,k,p,d,o){return l(),a("div",null,i[0]||(i[0]=[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 s,c as a,aj as t,o as l}from"./chunks/framework.C8IqNCju.js";const g=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"}'),e={name:"migration/from-v7.md"};function h(n,i,k,p,d,o){return l(),a("div",null,i[0]||(i[0]=[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-v8.md.GbP-eSYg.js b/docs/assets/migration_from-v8.md.DW58qp9B.js
similarity index 99%
rename from docs/assets/migration_from-v8.md.GbP-eSYg.js
rename to docs/assets/migration_from-v8.md.DW58qp9B.js
index 508c65f0..811cfbd3 100644
--- a/docs/assets/migration_from-v8.md.GbP-eSYg.js
+++ b/docs/assets/migration_from-v8.md.DW58qp9B.js
@@ -1,4 +1,4 @@
-import{_ as s,c as a,al as t,o as l}from"./chunks/framework.DDyYGyON.js";const c=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"}'),n={name:"migration/from-v8.md"};function e(h,i,k,p,d,o){return l(),a("div",null,i[0]||(i[0]=[t(`Migrating from v8
Breaking changes
- Removed deprecated props
- Removed