diff --git a/README.md b/README.md index 60b3135..e80e49b 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,7 @@ Import and register component import { createApp } from "vue"; import App from './App.vue'; -import Datepicker from "vue3-date-time-picker"; +import Datepicker from 'vue3-date-time-picker'; import 'vue3-date-time-picker/dist/main.css' const app = createApp(App); @@ -53,7 +53,7 @@ app.component("Datepicker", Datepicker); ```vue + diff --git a/docs/api/props/index.html b/docs/api/props/index.html index aecdbe5..2caf067 100644 --- a/docs/api/props/index.html +++ b/docs/api/props/index.html @@ -5,11 +5,11 @@ Props | vue3-date-time-picker - + -
vue3-date-time-picker

Props

is24

Whether to use 24H or 12H mode.

Code
<template>
+

Accepted values:

  • 'left'
  • 'right'
  • 'center'
{
     type: String,
     default: 'center'
 }
+
1
2
3
4

autoPosition

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

Code
<template>
+    <Datepicker v-model="date" :autoPosition="false" />
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+    setup() {
+        const date = ref();
+        
+        return {
+            date,
+        }
+    }
+}
+</script>
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
+    type: Boolean,
+    default: true
+}
1
2
3
4

dark

Theme switch between dark and light mode

Code
<template>
     <Datepicker v-model="date" dark />
 </template>
@@ -273,7 +290,7 @@
     type: [String, Number],
     default: 1
 }
-
1
2
3
4

minutesGridIncrement

Value which is used to increment hours when showing hours overlay

It will always start from 0 to 60 minutes.

Code
<template>
+
1
2
3
4

minutesGridIncrement

Value which is used to increment minutes when showing minutes overlay

It will always start from 0 to 60 minutes.

Code
<template>
     <Datepicker v-model="date" minutesGridIncrement="2" />
 </template>
 
@@ -336,8 +353,8 @@
     type: [String, Date],
     default: null
 }
-
1
2
3
4

minTime

Sets the minimal available time to pick

Code
<template>
-    <Datepicker v-model="date" :minTime="{ hours: 11, minutes: 30 }" />
+
1
2
3
4

minTime

Sets the minimal available time to pick

Code
<template>
+    <Datepicker v-model="date" :minTime="{ hours: 11, minutes: 30 }" placeholder="Select Date" />
 </template>
 
 <script>
@@ -357,8 +374,8 @@
     type: Object,
     default: () => ({})
 }
-
1
2
3
4

maxTime

Code
<template>
-    <Datepicker v-model="date" :maxTime="{ hours: 11, minutes: 30 }" />
+
1
2
3
4

maxTime

Code
<template>
+    <Datepicker v-model="date" :maxTime="{ hours: 11, minutes: 30 }" placeholder="Select Date" />
 </template>
 
 <script>
@@ -588,7 +605,7 @@
     default: true
 }
1
2
3
4

closeOnScroll

Close datepicker menu on page scroll

Code
<template>
-    <Datepicker v-model="date" :closeOnScroll="false" />
+    <Datepicker v-model="date" closeOnScroll />
 </template>
 
 <script>
@@ -788,7 +805,7 @@
     type: String,
     default: 'Cancel'
 }
-
1
2
3
4
Last Updated: 8/30/2021, 1:36:31 PM
- +
1
2
3
4
+ diff --git a/docs/api/slots/index.html b/docs/api/slots/index.html index b6013cb..f5f7eb4 100644 --- a/docs/api/slots/index.html +++ b/docs/api/slots/index.html @@ -5,7 +5,7 @@ Slots | vue3-date-time-picker - + @@ -96,6 +96,6 @@ } </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
- + diff --git a/docs/assets/css/888.styles.2dc38c1c.css b/docs/assets/css/348.styles.d8f3c2e1.css similarity index 100% rename from docs/assets/css/888.styles.2dc38c1c.css rename to docs/assets/css/348.styles.d8f3c2e1.css diff --git a/docs/assets/js/134.734a5fa4.js b/docs/assets/js/134.734a5fa4.js new file mode 100644 index 0000000..b7c2e8a --- /dev/null +++ b/docs/assets/js/134.734a5fa4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[134],{1134:(e,t,a)=>{a.r(t),a.d(t,{default:()=>l});var i=a(6252);const r={class:"demo-wrap"};var n=a(4855),s=a(2650);const l={components:{Datepicker:n.Z},props:["uid","is24","enableTimePicker","locale","cancelText","selectText","range","position","weekNumbers","placeholder","hoursIncrement","minutesIncrement","hoursGridIncrement","minutesGridIncrement","minDate","maxDate","minTime","maxTime","weekStart","disabled","readonly","inputClassName","menuClassName","hideInputIcon","state","clearable","closeOnScroll","autoApply","filters","disableMonthYearSelect","yearRange","disabledDates","inline","weekNumName","autoPosition"],data:()=>({date:null,dateReset:!1,dark:!0}),computed:{value:{get(){if(this.dateReset||this.maxTime||this.minTime)return null;if(this.date)return this.date;if(this.range){const e=new Date,t=new Date((new Date).setDate(e.getDate()+7));return[e,t]}return new Date},set(e){this.dateReset=!e,this.date=e}}},mounted(){this.dark=(0,s.vs)()},render:function(e,t,a,n,s,l){const c=(0,i.up)("Datepicker");return(0,i.wg)(),(0,i.iD)("div",r,[(0,i.Wm)(c,(0,i.dG)({uid:a.uid,modelValue:l.value,"onUpdate:modelValue":t[0]||(t[0]=e=>l.value=e)},e.$props,{dark:s.dark}),null,16,["uid","modelValue","dark"])])}}},2650:(e,t,a)=>{a.d(t,{vs:()=>i.vs});var i=a(4536);a(8639)},8639:(e,t,a)=>{a.d(t,{Fg:()=>s,c9:()=>r});var i=a(480);const r=e=>!(0,i.ak)(e)||/github\.com/.test(e)?"GitHub":/bitbucket\.org/.test(e)?"Bitbucket":/gitlab\.com/.test(e)?"GitLab":/gitee\.com/.test(e)?"Gitee":null,n={GitHub:":repo/edit/:branch/:path",GitLab:":repo/-/edit/:branch/:path",Gitee:":repo/edit/:branch/:path",Bitbucket:":repo/src/:branch/:path?mode=edit&spa=0&at=:branch&fileviewer=file-view-default"},s=({docsRepo:e,docsBranch:t,docsDir:a,filePathRelative:s,editLinkPattern:l})=>{const c=r(e);let d;return l?d=l:null!==c&&(d=n[c]),d?d.replace(/:repo/,(0,i.ak)(e)?e:`https://github.com/${e}`).replace(/:branch/,t).replace(/:path/,(0,i.FY)(`${(0,i.U1)(a)}/${s}`)):null}}}]); \ No newline at end of file diff --git a/docs/assets/js/330.4518e673.js b/docs/assets/js/330.4518e673.js deleted file mode 100644 index 0c32842..0000000 --- a/docs/assets/js/330.4518e673.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[330],{7330:(e,t,a)=>{a.r(t),a.d(t,{default:()=>l});var r=a(6252);const i={class:"demo-wrap"};var n=a(4855),s=a(2650);const l={components:{Datepicker:n.Z},props:["uid","is24","enableTimePicker","locale","cancelText","selectText","range","position","weekNumbers","hoursIncrement","minutesIncrement","hoursGridIncrement","minutesGridIncrement","minDate","maxDate","minTime","maxTime","weekStart","disabled","readonly","inputClassName","menuClassName","hideInputIcon","state","clearable","closeOnScroll","autoApply","filters","disableMonthYearSelect","yearRange","disabledDates","inline","weekNumName"],data:()=>({date:null,dateReset:!1,dark:!0}),computed:{value:{get(){if(this.dateReset)return null;if(this.date)return this.date;if(this.range){const e=new Date,t=new Date((new Date).setDate(e.getDate()+7));return[e,t]}return new Date},set(e){this.dateReset=!e,this.date=e}}},mounted(){this.dark=(0,s.vs)()},render:function(e,t,a,n,s,l){const c=(0,r.up)("Datepicker");return(0,r.wg)(),(0,r.iD)("div",i,[(0,r.Wm)(c,(0,r.dG)({uid:a.uid,modelValue:l.value,"onUpdate:modelValue":t[0]||(t[0]=e=>l.value=e)},e.$props,{dark:s.dark}),null,16,["uid","modelValue","dark"])])}}},2650:(e,t,a)=>{a.d(t,{vs:()=>r.vs});var r=a(4536);a(8639)},8639:(e,t,a)=>{a.d(t,{Fg:()=>s,c9:()=>i});var r=a(480);const i=e=>!(0,r.ak)(e)||/github\.com/.test(e)?"GitHub":/bitbucket\.org/.test(e)?"Bitbucket":/gitlab\.com/.test(e)?"GitLab":/gitee\.com/.test(e)?"Gitee":null,n={GitHub:":repo/edit/:branch/:path",GitLab:":repo/-/edit/:branch/:path",Gitee:":repo/edit/:branch/:path",Bitbucket:":repo/src/:branch/:path?mode=edit&spa=0&at=:branch&fileviewer=file-view-default"},s=({docsRepo:e,docsBranch:t,docsDir:a,filePathRelative:s,editLinkPattern:l})=>{const c=i(e);let d;return l?d=l:null!==c&&(d=n[c]),d?d.replace(/:repo/,(0,r.ak)(e)?e:`https://github.com/${e}`).replace(/:branch/,t).replace(/:path/,(0,r.FY)(`${(0,r.U1)(a)}/${s}`)):null}}}]); \ No newline at end of file diff --git a/docs/assets/js/855.ca53ca31.js b/docs/assets/js/855.ca53ca31.js deleted file mode 100644 index 546aa9e..0000000 --- a/docs/assets/js/855.ca53ca31.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[855],{4855:(e,t,n)=>{n.d(t,{Z:()=>ye});var a,l,i=n(6252),r=n(2262),u=n(3577),s=n(9963);(l=a||(a={})).center="center",l.left="left",l.right="right";var o=(0,i.aZ)({name:"CalendarIcon"});const d={version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32",class:"dp__icon"},c=[(0,i._)("path",{d:"M29.333 8c0-2.208-1.792-4-4-4h-18.667c-2.208 0-4 1.792-4 4v18.667c0 2.208 1.792 4 4 4h18.667c2.208 0 4-1.792 4-4v-18.667zM26.667 8v18.667c0 0.736-0.597 1.333-1.333 1.333 0 0-18.667 0-18.667 0-0.736 0-1.333-0.597-1.333-1.333 0 0 0-18.667 0-18.667 0-0.736 0.597-1.333 1.333-1.333 0 0 18.667 0 18.667 0 0.736 0 1.333 0.597 1.333 1.333z"},null,-1),(0,i._)("path",{d:"M20 2.667v5.333c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-5.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333z"},null,-1),(0,i._)("path",{d:"M9.333 2.667v5.333c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-5.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333z"},null,-1),(0,i._)("path",{d:"M4 14.667h24c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333h-24c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333z"},null,-1)];o.render=function(e,t,n,a,l,r){return(0,i.wg)(),(0,i.iD)("svg",d,c)};var m=(0,i.aZ)({name:"CancelIcon"});const p={version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32",class:"dp__icon"},g=[(0,i._)("path",{d:"M23.057 7.057l-16 16c-0.52 0.52-0.52 1.365 0 1.885s1.365 0.52 1.885 0l16-16c0.52-0.52 0.52-1.365 0-1.885s-1.365-0.52-1.885 0z"},null,-1),(0,i._)("path",{d:"M7.057 8.943l16 16c0.52 0.52 1.365 0.52 1.885 0s0.52-1.365 0-1.885l-16-16c-0.52-0.52-1.365-0.52-1.885 0s-0.52 1.365 0 1.885z"},null,-1)];m.render=function(e,t,n,a,l,r){return(0,i.wg)(),(0,i.iD)("svg",p,g)};var v=(0,i.aZ)({name:"ChevronLeftIcon"});const y={version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32",class:"dp__icon"},h=[(0,i._)("path",{d:"M20.943 23.057l-7.057-7.057c0 0 7.057-7.057 7.057-7.057 0.52-0.52 0.52-1.365 0-1.885s-1.365-0.52-1.885 0l-8 8c-0.521 0.521-0.521 1.365 0 1.885l8 8c0.52 0.52 1.365 0.52 1.885 0s0.52-1.365 0-1.885z"},null,-1)];v.render=function(e,t,n,a,l,r){return(0,i.wg)(),(0,i.iD)("svg",y,h)};var _=(0,i.aZ)({name:"ChevronRightIcon"});const f={version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32",class:"dp__icon"},w=[(0,i._)("path",{d:"M12.943 24.943l8-8c0.521-0.521 0.521-1.365 0-1.885l-8-8c-0.52-0.52-1.365-0.52-1.885 0s-0.52 1.365 0 1.885l7.057 7.057c0 0-7.057 7.057-7.057 7.057-0.52 0.52-0.52 1.365 0 1.885s1.365 0.52 1.885 0z"},null,-1)];_.render=function(e,t,n,a,l,r){return(0,i.wg)(),(0,i.iD)("svg",f,w)};var k=(0,i.aZ)({name:"ClockIcon"});const D={version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32",class:"dp__icon"},b=[(0,i._)("path",{d:"M16 1.333c-8.095 0-14.667 6.572-14.667 14.667s6.572 14.667 14.667 14.667c8.095 0 14.667-6.572 14.667-14.667s-6.572-14.667-14.667-14.667zM16 4c6.623 0 12 5.377 12 12s-5.377 12-12 12c-6.623 0-12-5.377-12-12s5.377-12 12-12z"},null,-1),(0,i._)("path",{d:"M14.667 8v8c0 0.505 0.285 0.967 0.737 1.193l5.333 2.667c0.658 0.329 1.46 0.062 1.789-0.596s0.062-1.46-0.596-1.789l-4.596-2.298c0 0 0-7.176 0-7.176 0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333z"},null,-1)];k.render=function(e,t,n,a,l,r){return(0,i.wg)(),(0,i.iD)("svg",D,b)};var S=(0,i.aZ)({name:"ChevronUpIcon"});const M={version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32",class:"dp__icon"},I=[(0,i._)("path",{d:"M24.943 19.057l-8-8c-0.521-0.521-1.365-0.521-1.885 0l-8 8c-0.52 0.52-0.52 1.365 0 1.885s1.365 0.52 1.885 0l7.057-7.057c0 0 7.057 7.057 7.057 7.057 0.52 0.52 1.365 0.52 1.885 0s0.52-1.365 0-1.885z"},null,-1)];S.render=function(e,t,n,a,l,r){return(0,i.wg)(),(0,i.iD)("svg",M,I)};var C=(0,i.aZ)({name:"ChevronDownIcon"});const V={version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32",class:"dp__icon"},x=[(0,i._)("path",{d:"M7.057 12.943l8 8c0.521 0.521 1.365 0.521 1.885 0l8-8c0.52-0.52 0.52-1.365 0-1.885s-1.365-0.52-1.885 0l-7.057 7.057c0 0-7.057-7.057-7.057-7.057-0.52-0.52-1.365-0.52-1.885 0s-0.52 1.365 0 1.885z"},null,-1)];C.render=function(e,t,n,a,l,r){return(0,i.wg)(),(0,i.iD)("svg",V,x)};var N=(0,i.aZ)({name:"DatepickerInput",emits:["clear","open"],components:{CalendarIcon:o,CancelIcon:m},props:{internalValue:{type:String,default:""},placeholder:{type:String,default:""},hideInputIcon:{type:Boolean,default:!1},disabled:{type:Boolean,default:!0},readonly:{type:Boolean,default:!0},clearable:{type:Boolean,default:!0},state:{type:Boolean,default:null},inputClassName:{type:String,default:null},inline:{type:Boolean,default:!1}},setup:e=>({datepickerInputClass:(0,r.Fl)((()=>({dp__pointer:!e.disabled&&!e.readonly,dp__disabled:e.disabled,dp__input:!0,dp__input_icon_pad:!e.hideInputIcon,dp__input_valid:e.state,dp__input_invalid:!1===e.state,[e.inputClassName]:!!e.inputClassName})))})});const T={key:1,class:"dp__input_wrap"},O=["placeholder","disabled","value"],P={key:0,class:"dp__input_icon"};N.render=function(e,t,n,a,l,r){const o=(0,i.up)("CalendarIcon"),d=(0,i.up)("CancelIcon");return(0,i.wg)(),(0,i.iD)("div",{onClick:t[2]||(t[2]=t=>e.$emit("open"))},[e.$slots.trigger&&!e.inline?(0,i.WI)(e.$slots,"trigger",{key:0}):(0,i.kq)("",!0),e.$slots.trigger||e.inline?(0,i.kq)("",!0):((0,i.wg)(),(0,i.iD)("div",T,[(0,i._)("input",{class:(0,u.C_)(e.datepickerInputClass),placeholder:e.placeholder,disabled:e.disabled,readonly:"",value:e.internalValue},null,10,O),e.$slots["input-icon"]&&!e.hideInputIcon?((0,i.wg)(),(0,i.iD)("span",P,[(0,i.WI)(e.$slots,"input-icon")])):(0,i.kq)("",!0),e.$slots["input-icon"]||e.hideInputIcon?(0,i.kq)("",!0):((0,i.wg)(),(0,i.j4)(o,{key:1,class:"dp__input_icon dp__input_icons"})),e.$slots["clear-icon"]&&e.clearable?((0,i.wg)(),(0,i.iD)("span",{key:2,class:"dp__clear_icon",onClick:t[0]||(t[0]=(0,s.iM)((t=>e.$emit("clear")),["stop","prevent"]))},[(0,i.WI)(e.$slots,"clear-icon")])):(0,i.kq)("",!0),e.clearable&&!e.$slots["clear-icon"]&&e.internalValue?((0,i.wg)(),(0,i.j4)(d,{key:3,class:"dp__clear_icon dp__input_icons",onClick:t[1]||(t[1]=(0,s.iM)((t=>e.$emit("clear")),["prevent"]))})):(0,i.kq)("",!0)]))])};const H=e=>{const t=new Date(JSON.parse(JSON.stringify(e)));return new Date(t.setDate(t.getDate()+7))},B=(e,t)=>{const n=new Date(JSON.parse(JSON.stringify(e))),a=[];for(let e=0;e<7;e++){const l=new Date(new Date(JSON.parse(JSON.stringify(n))).getTime());l.setDate(n.getDate()+e),a.push({text:l.getDate(),value:l,current:JSON.parse(JSON.stringify(l.getMonth()))===t})}return a},$=(e,t,n,a,l)=>{let i=n;return l&&(i=Object.assign(i,{hour:"numeric",minute:"numeric",hour12:!a})),e.toLocaleDateString(t,i)},R=(e,t,n,a,l,i)=>{let r=n;return l&&(r=Object.assign(r,{hour:"numeric",minute:"numeric",hour12:!a})),i?[e[0].toLocaleDateString(t,r),e[1].toLocaleDateString(t,r)]:`${e[0].toLocaleDateString(t,r)} - ${e[1].toLocaleDateString(t,r)}`},F=(e,t,n="modelValue")=>(0,r.Fl)({get:()=>e[n],set:e=>t(`update:${n}`,e)}),A=e=>function(t){let n="";const a="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",l=a.length;for(let e=0;e<5;e++)n+=a.charAt(Math.floor(Math.random()*l));return n+e}();var j=(0,i.aZ)({name:"SelectionGrid",emits:["update:modelValue","selected","toggle"],props:{items:{type:Array,default:()=>[]},modelValue:{type:[String,Number],default:null},id:{type:String,default:"dp__overlay"},disabledValues:{type:Array,default:()=>[]},minValue:{type:[Number,String],default:null},maxValue:{type:[Number,String],default:null}},setup(e,{emit:t}){const n=(0,r.iH)(!1);(0,i.bv)((()=>{((e,t)=>{const n=document.getElementById("selection-active");if(n){const t=document.getElementById(e);t&&(t.scrollTop=n.offsetTop-t.offsetTop-(t.getBoundingClientRect().height/2-n.getBoundingClientRect().height))}})(e.id);const t=document.getElementById(e.id);t&&(n.value=t.clientHeight{const n=!!e.maxValue&&+t>+e.maxValue,a=!!e.minValue&&+t<+e.minValue;return n||a},l=(0,r.Fl)((()=>e.items.map((t=>t.filter((e=>e)).map((t=>({...t,className:{dp__overlay_cell_active:t.value===e.modelValue,dp__overlay_cell:t.value!==e.modelValue,dp__overlay_cell_disabled:e.disabledValues.some((e=>e===t.value))||a(t.value)}}))))))),u=(0,r.Fl)((()=>({dp__button:!0,dp__overlay_action:!0,dp__over_action_scroll:n.value})));return{useKey:A,onClick:n=>{e.disabledValues.some((e=>e===n))||(t("update:modelValue",n),t("selected"))},actionButtonClass:u,mappedItems:l}}});const Y=["id"],U={class:"dp__overlay_container"},G=["onClick","id"];j.render=function(e,t,n,a,l,r){return(0,i.wg)(),(0,i.iD)("div",{class:"dp__overlay",id:e.id},[(0,i._)("div",U,[((0,i.wg)(!0),(0,i.iD)(i.HY,null,(0,i.Ko)(e.mappedItems,((t,n)=>((0,i.wg)(),(0,i.iD)("div",{class:"dp__overlay_row",key:e.useKey(n)},[((0,i.wg)(!0),(0,i.iD)(i.HY,null,(0,i.Ko)(t,(t=>((0,i.wg)(),(0,i.iD)("div",{class:"dp__overlay_col",key:t.value,onClick:n=>e.onClick(t.value),id:t.value===e.modelValue?"selection-active":null},[(0,i._)("div",{class:(0,u.C_)(t.className)},(0,u.zw)(t.text),3)],8,G)))),128))])))),128)),(0,i._)("div",{class:(0,u.C_)(e.actionButtonClass),onClick:t[0]||(t[0]=t=>e.$emit("toggle"))},[(0,i.WI)(e.$slots,"button-icon")],2)])],8,Y)};var z=(0,i.aZ)({name:"MonthYearPicker",emits:["update:month","update:year"],components:{CalendarIcon:o,ChevronLeftIcon:v,ChevronRightIcon:_,SelectionGrid:j},props:{months:{type:Array,default:()=>[]},years:{type:Array,default:()=>[]},year:{type:Number,default:0},month:{type:Number,default:0},filters:{type:Object,default:()=>({})}},setup(e,{emit:t}){const n=(0,r.iH)(!1),a=(0,r.iH)(!1),{onNext:l,onPrev:i}=((e,t)=>{const n=(e,n)=>{t("update:month",e),t("update:year",n)};return{onNext:()=>{let t=e.month,a=e.year;11===e.month?(t=0,a=e.year+1):t+=1,n(t,a)},onPrev:()=>{let t=e.month,a=e.year;0===e.month?(t=11,a=e.year-1):t-=1,n(t,a)}}})(e,t),u=e=>{const t=[];for(let n=0;n{const t=e.months.find((t=>t.value===e.month));return t?t.text:""})),o=(0,r.Fl)((()=>u(e.months))),d=(0,r.Fl)((()=>u(e.years))),c=()=>{n.value=!n.value},m=()=>{a.value=!a.value};return{toggleYearPicker:m,onNext:l,onPrev:i,onYearUpdate:e=>{t("update:year",e),m()},getMonthDisplayVal:s,showMonthPicker:n,showYearPicker:a,groupedMonths:o,toggleMonthPicker:c,onMonthUpdate:e=>{t("update:month",e),c()},groupedYears:d,useKey:A}}});const W={class:"dp__month_year_row"};z.render=function(e,t,n,a,l,r){const s=(0,i.up)("ChevronLeftIcon"),o=(0,i.up)("CalendarIcon"),d=(0,i.up)("SelectionGrid"),c=(0,i.up)("ChevronRightIcon");return(0,i.wg)(),(0,i.iD)("div",W,[(0,i._)("div",{class:"dp__month_year_col_nav",onClick:t[0]||(t[0]=(...t)=>e.onPrev&&e.onPrev(...t))},[(0,i.Wm)(s)]),(0,i._)("div",{class:"dp__month_year_select",onClick:t[1]||(t[1]=(...t)=>e.toggleMonthPicker&&e.toggleMonthPicker(...t))},(0,u.zw)(e.getMonthDisplayVal),1),(0,i._)("div",{class:"dp__month_year_select",onClick:t[2]||(t[2]=(...t)=>e.toggleYearPicker&&e.toggleYearPicker(...t))},(0,u.zw)(e.year),1),e.showMonthPicker?((0,i.wg)(),(0,i.j4)(d,{key:0,"model-value":e.month,items:e.groupedMonths,"onUpdate:modelValue":e.onMonthUpdate,onToggle:e.toggleMonthPicker,"disabled-values":e.filters.months},{"button-icon":(0,i.w5)((()=>[(0,i.Wm)(o)])),_:1},8,["model-value","items","onUpdate:modelValue","onToggle","disabled-values"])):(0,i.kq)("",!0),e.showYearPicker?((0,i.wg)(),(0,i.j4)(d,{key:1,"model-value":e.year,items:e.groupedYears,"onUpdate:modelValue":e.onYearUpdate,onToggle:e.toggleYearPicker,"disabled-values":e.filters.years},{"button-icon":(0,i.w5)((()=>[(0,i.Wm)(o)])),_:1},8,["model-value","items","onUpdate:modelValue","onToggle","disabled-values"])):(0,i.kq)("",!0),(0,i._)("div",{class:"dp__month_year_col_nav",onClick:t[3]||(t[3]=(...t)=>e.onNext&&e.onNext(...t))},[(0,i.Wm)(c)])])};var q=(0,i.aZ)({name:"TimeInput",emits:["setHours","setMinutes","update:hours","update:minutes"],components:{ChevronDownIcon:C,ChevronUpIcon:S,ClockIcon:k,SelectionGrid:j},props:{hours:{type:Number,default:0},minutes:{type:Number,default:0},hoursGridIncrement:{type:[String,Number],default:1},minutesGridIncrement:{type:[String,Number],default:5},hoursIncrement:{type:[Number,String],default:1},minutesIncrement:{type:[Number,String],default:1},is24:{type:Boolean,default:!0},filters:{type:Object,default:()=>({})},minTime:{type:Object,default:()=>({})},maxTime:{type:Object,default:()=>({})}},setup(e,{emit:t}){const n=(0,r.iH)(!1),a=(0,r.iH)(!1),l=(0,r.iH)(!1),i=(0,r.Vh)(e,"hours"),u=(0,r.Vh)(e,"minutes"),s=(0,r.iH)("AM"),o=(0,r.Fl)((()=>{const e=m(i.value);return e<10?`0${e}`:`${e}`})),d=(0,r.Fl)((()=>u.value<10?`0${u.value}`:`${u.value}`)),c=(e,t)=>{const n=[];for(let a=0;a{const n=[];for(let a=0;ae.is24?t:(s.value=t>=12?"PM":"AM",[12,1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,6,7,8,9,10,11][t]);return{showTimePicker:n,hourOverlay:a,minuteOverlay:l,hourDisplay:o,minuteDisplay:d,toggleHourOverlay:()=>{a.value=!a.value},toggleMinuteOverlay:()=>{l.value=!l.value},getHoursGridItems:()=>{const t=e.is24?24:12;return c(t,+e.hoursGridIncrement)},getMinutesGridItems:()=>c(60,+e.minutesGridIncrement),handleHours:n=>{if("increment"===n){if(e.maxTime.hours&&i.value+ +e.hoursIncrement>+e.maxTime.hours)return;e.is24&&i.value+ +e.hoursIncrement>=24||!e.is24&&i.value+ +e.hoursIncrement>=12?t("update:hours",0):t("update:hours",i.value+ +e.hoursIncrement)}else{if(e.minTime.hours&&i.value-+e.hoursIncrement<+e.minTime.hours)return;i.value-+e.hoursIncrement<0?t("update:hours",e.is24?23:11):t("update:hours",i.value-+e.hoursIncrement)}},handleMinutes:n=>{if("increment"===n){if(e.maxTime.minutes&&u.value+ +e.minutesIncrement>+e.maxTime.minutes)return;u.value+ +e.minutesIncrement>=60?t("update:minutes",0):t("update:minutes",u.value+ +e.minutesIncrement)}else{if(e.minTime.minutes&&u.value-+e.minutesIncrement<+e.minTime.minutes)return;u.value-+e.minutesIncrement<0?t("update:minutes",59):t("update:minutes",u.value-+e.minutesIncrement)}},setAmPm:()=>{"PM"===s.value?(s.value="AM",t("update:hours",i.value-12)):(s.value="PM",t("update:hours",i.value+12))},amPm:s}}});const J={class:"dp__time_input"},Z={class:"dp__time_col"},E=(0,i._)("div",{class:"dp__time_col"},":",-1),L={class:"dp__time_col"},K={key:0};q.render=function(e,t,n,a,l,r){const s=(0,i.up)("ChevronUpIcon"),o=(0,i.up)("ChevronDownIcon"),d=(0,i.up)("ClockIcon"),c=(0,i.up)("SelectionGrid");return(0,i.wg)(),(0,i.iD)("div",J,[(0,i._)("div",Z,[(0,i._)("div",{class:"dp__inc_dec_button",onClick:t[0]||(t[0]=t=>e.handleHours("increment"))},[(0,i.Wm)(s)]),(0,i._)("div",{class:"dp__time_display",onClick:t[1]||(t[1]=(...t)=>e.toggleHourOverlay&&e.toggleHourOverlay(...t))},(0,u.zw)(e.hourDisplay),1),(0,i._)("div",{class:"dp__inc_dec_button",onClick:t[2]||(t[2]=t=>e.handleHours("decrement"))},[(0,i.Wm)(o)])]),E,(0,i._)("div",L,[(0,i._)("div",{class:"dp__inc_dec_button",onClick:t[3]||(t[3]=t=>e.handleMinutes("increment"))},[(0,i.Wm)(s)]),(0,i._)("div",{class:"dp__time_display",onClick:t[4]||(t[4]=(...t)=>e.toggleMinuteOverlay&&e.toggleMinuteOverlay(...t))},(0,u.zw)(e.minuteDisplay),1),(0,i._)("div",{class:"dp__inc_dec_button",onClick:t[5]||(t[5]=t=>e.handleMinutes("decrement"))},[(0,i.Wm)(o)])]),e.is24?(0,i.kq)("",!0):((0,i.wg)(),(0,i.iD)("div",K,[(0,i._)("button",{class:"dp__pm_am_button",onClick:t[6]||(t[6]=(...t)=>e.setAmPm&&e.setAmPm(...t))},(0,u.zw)(e.amPm),1)])),e.hourOverlay?((0,i.wg)(),(0,i.j4)(c,{key:1,"onUpdate:modelValue":t[7]||(t[7]=t=>e.$emit("update:hours",t)),items:e.getHoursGridItems(),onSelected:e.toggleHourOverlay,onToggle:e.toggleHourOverlay,"disabled-values":e.filters.times.hours,"min-value":e.minTime.hours,"max-value":e.maxTime.hours},{"button-icon":(0,i.w5)((()=>[(0,i.Wm)(d)])),_:1},8,["items","onSelected","onToggle","disabled-values","min-value","max-value"])):(0,i.kq)("",!0),e.minuteOverlay?((0,i.wg)(),(0,i.j4)(c,{key:2,"onUpdate:modelValue":t[8]||(t[8]=t=>e.$emit("update:minutes",t)),items:e.getMinutesGridItems(),onSelected:e.toggleMinuteOverlay,onToggle:e.toggleMinuteOverlay,"disabled-values":e.filters.times.minutes,"min-value":e.minTime.minutes,"max-value":e.maxTime.minutes},{"button-icon":(0,i.w5)((()=>[(0,i.Wm)(d)])),_:1},8,["items","onSelected","onToggle","disabled-values","min-value","max-value"])):(0,i.kq)("",!0)])};var X=(0,i.aZ)({name:"TimePicker",emits:["update:hoursSingle","update:minutesSingle","update:hoursRange","update:minutesRange"],components:{CalendarIcon:o,ClockIcon:k,TimeInput:q},props:{hoursIncrement:{type:[Number,String],default:1},minutesIncrement:{type:[Number,String],default:1},is24:{type:Boolean,default:!0},hoursGridIncrement:{type:[String,Number],default:1},minutesGridIncrement:{type:[String,Number],default:5},hoursSingle:{type:Number,default:0},minutesSingle:{type:Number,default:0},hoursRange:{type:Array,default:()=>[0,0]},minutesRange:{type:Array,default:()=>[0,0]},range:{type:Boolean,default:!1},filters:{type:Object,default:()=>({})},minTime:{type:Object,default:()=>({})},maxTime:{type:Object,default:()=>({})}},setup(){const e=(0,r.iH)(!1);return{showTimePicker:e,toggleTimePicker:t=>{e.value=t}}}});const Q={key:0,class:"dp__overlay"},ee={class:"dp__overlay_container"},te={class:"dp__overlay_row"};X.render=function(e,t,n,a,l,r){const u=(0,i.up)("ClockIcon"),s=(0,i.up)("TimeInput"),o=(0,i.up)("CalendarIcon");return(0,i.wg)(),(0,i.iD)("div",null,[(0,i._)("div",{class:"dp__button",onClick:t[0]||(t[0]=t=>e.toggleTimePicker(!0))},[(0,i.Wm)(u)]),e.showTimePicker?((0,i.wg)(),(0,i.iD)("div",Q,[(0,i._)("div",ee,[(0,i._)("div",te,[e.range?(0,i.kq)("",!0):((0,i.wg)(),(0,i.j4)(s,{key:0,is24:e.is24,hours:e.hoursSingle,minutes:e.minutesSingle,"onUpdate:hours":t[1]||(t[1]=t=>e.$emit("update:hoursSingle",t)),"onUpdate:minutes":t[2]||(t[2]=t=>e.$emit("update:minutesSingle",t)),"hours-grid-increment":e.hoursGridIncrement,"minutes-grid-increment":e.minutesGridIncrement,"hours-increment":e.hoursIncrement,"minutes-increment":e.minutesIncrement,filters:e.filters,"max-time":e.maxTime,"min-time":e.minTime},null,8,["is24","hours","minutes","hours-grid-increment","minutes-grid-increment","hours-increment","minutes-increment","filters","max-time","min-time"])),e.range?((0,i.wg)(),(0,i.iD)(i.HY,{key:1},[(0,i.Wm)(s,{hours:e.hoursRange[0],minutes:e.minutesRange[0],"onUpdate:hours":t[3]||(t[3]=t=>e.$emit("update:hoursRange",[t,e.hoursRange[1]])),"onUpdate:minutes":t[4]||(t[4]=t=>e.$emit("update:minutesRange",[t,e.minutesRange[1]])),is24:e.is24,"hours-grid-increment":e.hoursGridIncrement,"minutes-grid-increment":e.minutesGridIncrement,"hours-increment":e.hoursIncrement,"minutes-increment":e.minutesIncrement,filters:e.filters,"max-time":e.maxTime,"min-time":e.minTime},null,8,["hours","minutes","is24","hours-grid-increment","minutes-grid-increment","hours-increment","minutes-increment","filters","max-time","min-time"]),(0,i.Wm)(s,{hours:e.hoursRange[1],minutes:e.minutesRange[1],"onUpdate:hours":t[5]||(t[5]=t=>e.$emit("update:hoursRange",[e.hoursRange[0],t])),"onUpdate:minutes":t[6]||(t[6]=t=>e.$emit("update:minutesRange",[e.hoursRange[0],t])),is24:e.is24,"hours-grid-increment":e.hoursGridIncrement,"minutes-grid-increment":e.minutesGridIncrement,"hours-increment":e.hoursIncrement,"minutes-increment":e.minutesIncrement,filters:e.filters,"max-time":e.maxTime,"min-time":e.minTime},null,8,["hours","minutes","is24","hours-grid-increment","minutes-grid-increment","hours-increment","minutes-increment","filters","max-time","min-time"])],64)):(0,i.kq)("",!0)]),(0,i._)("div",{class:"dp__button",onClick:t[7]||(t[7]=t=>e.toggleTimePicker(!1))},[(0,i.Wm)(o)])])])):(0,i.kq)("",!0)])};var ne=(0,i.aZ)({name:"ActionRow",emits:["closePicker","selectDate"],props:{selectText:{type:String,default:"Select"},cancelText:{type:String,default:"Cancel"},singleModelValue:{type:Date,default:null},range:{type:Boolean,default:!1},rangeModelValue:{type:Array,default:null},previewFormat:{type:[Object,Function],default:()=>({})},locale:{type:String,default:"en-US"},is24:{type:Boolean,default:!0},enableTimePicker:{type:Boolean,default:!0},inline:{type:Boolean,default:!1}},setup(e){const t=(0,r.iH)(""),n=(0,r.Vh)(e,"singleModelValue"),a=(0,r.Vh)(e,"rangeModelValue");(0,i.YP)(n,(()=>{u()})),(0,i.YP)(a,(()=>{s()})),(0,i.bv)((()=>{(e.singleModelValue||e.rangeModelValue)&&l()}));const l=()=>{e.range?s():u()},u=()=>{e.singleModelValue&&("object"==typeof e.previewFormat?t.value=$(e.singleModelValue,e.locale,e.previewFormat,e.is24,e.enableTimePicker):t.value=e.previewFormat(e.singleModelValue))},s=()=>{e.rangeModelValue&&2===e.rangeModelValue.length&&("object"==typeof e.previewFormat?t.value=R(e.rangeModelValue,e.locale,e.previewFormat,e.is24,e.enableTimePicker,!0):t.value=e.previewFormat(e.rangeModelValue))};return{previewValue:t}}});const ae={class:"dp__action_row"},le={class:"dp__selection_preview"},ie={class:"dp__action_buttons"};ne.render=function(e,t,n,a,l,r){return(0,i.wg)(),(0,i.iD)("div",ae,[(0,i._)("div",le,[Array.isArray(e.previewValue)?(0,i.kq)("",!0):((0,i.wg)(),(0,i.iD)(i.HY,{key:0},[(0,i.Uk)((0,u.zw)(e.previewValue),1)],64)),Array.isArray(e.previewValue)?((0,i.wg)(),(0,i.iD)(i.HY,{key:1},[(0,i._)("div",null,(0,u.zw)(e.previewValue[0]),1),(0,i._)("div",null,(0,u.zw)(e.previewValue[1]),1)],64)):(0,i.kq)("",!0)]),(0,i._)("div",ie,[e.inline?(0,i.kq)("",!0):((0,i.wg)(),(0,i.iD)("span",{key:0,class:"dp__action dp__cancel",onClick:t[0]||(t[0]=t=>e.$emit("closePicker"))},(0,u.zw)(e.cancelText),1)),(0,i._)("span",{class:"dp__action dp__select",onClick:t[1]||(t[1]=t=>e.$emit("selectDate"))},(0,u.zw)(e.selectText),1)])])};var re=(0,i.aZ)({name:"Calendar",components:{MonthYearInput:z,TimePicker:X,ActionRow:ne},emits:["update:rangeModelValue","update:singleModelValue","closePicker","selectDate"],props:{months:{type:Array,default:()=>[]},weekStart:{type:[Number,String],default:1},weekNumbers:{type:Boolean,default:!1},disableMonthYearSelect:{type:Boolean,default:!1},calendarClassName:{type:String,default:null},yearRange:{type:Array,default:()=>[]},startDate:{type:Date,default:null},calendarCellClassName:{type:String,default:null},enableTimePicker:{type:Boolean,default:!1},is24:{type:Boolean,default:!0},hoursIncrement:{type:[String,Number],default:1},minutesIncrement:{type:[String,Number],default:1},hoursGridIncrement:{type:[String,Number],default:1},minutesGridIncrement:{type:[String,Number],default:5},rangeModelValue:{type:Array,default:()=>[]},singleModelValue:{type:Date,default:null},range:{type:Boolean,default:!1},autoApply:{type:Boolean,default:!1},selectText:{type:String,default:"Select"},cancelText:{type:String,default:"Cancel"},previewFormat:{type:[Object,Function],default:null},locale:{type:String,default:"en-US"},weekNumName:{type:String,default:"W"},minDate:{type:[Date,String],default:null},maxDate:{type:[Date,String],default:null},disabledDates:{type:Array,default:()=>[]},filters:{type:Object,default:()=>({})},minTime:{type:Object,default:()=>({})},maxTime:{type:Object,default:()=>({})},inline:{type:Boolean,default:!1}},setup(e,{emit:t}){const n=(0,r.iH)(),a=(0,r.iH)(0),l=(0,r.iH)([0,0]),u=(0,r.iH)(0),s=(0,r.iH)([0,0]),o=(0,r.iH)(0),d=(0,r.iH)(0),c=(0,r.iH)(0),m=(0,r.iH)(new Date),p=(0,r.iH)(),g=(0,r.Vh)(e,"startDate"),v=(0,r.Vh)(e,"rangeModelValue"),y=(0,r.Vh)(e,"singleModelValue");(0,i.YP)(g,(()=>{g.value&&I(e.startDate)})),(0,i.YP)(a,(()=>{e.singleModelValue&&C()})),(0,i.YP)(u,(()=>{e.singleModelValue&&C()})),(0,i.YP)(l,(()=>{2===e.rangeModelValue.length&&V()})),(0,i.YP)(s,(()=>{2===e.rangeModelValue.length&&V()})),(0,i.bv)((()=>{e.startDate?I(e.startDate):I(new Date),n.value=((e,t)=>{const n=[1,2,3,4,5,6,7].map((t=>new Intl.DateTimeFormat(e,{weekday:"short",timeZone:"UTC"}).format(new Date(`2017-01-0${t}T00:00:00+00:00`)).slice(0,2))),a=n.slice(0,t),l=n.slice(t+1,n.length);return[n[t]].concat(...l).concat(...a)})(e.locale,+e.weekStart),y.value&&(a.value=y.value.getHours(),u.value=y.value.getMinutes()),v.value&&v.value[0]&&v.value[1]&&(l.value=[v.value[0].getHours(),v.value[1].getHours()],s.value=[v.value[0].getMinutes(),v.value[1].getMinutes()])}));const h=((e,t,n)=>(0,r.Fl)((()=>((e,t,n)=>{const a=[],l=new Date(t,e,1),i=new Date(t,e+1,0);let r=((e,t)=>{const n=new Date(JSON.parse(JSON.stringify(e))),a=n.getDay(),l=Math.abs(t-a);return 0!==l?new Date(n.setDate(n.getDate()-l)):n})(l,n);const u=((e,t)=>Math.ceil((e.getDay()+t.getDate()-1)/7))(l,i);for(let t=0;t{const t=[];for(let n=e.yearRange[0];n<=e.yearRange[1];n++)t.push({value:n,text:`${n}`});return t})),f=(0,r.Fl)((()=>({dp__calendar:!0,[e.calendarClassName]:!!e.calendarClassName}))),w=t=>{const n=!!e.maxDate&&S(t)>S(new Date(e.maxDate)),a=!!e.minDate&&S(t)S(new Date(e))===S(t)));return n||a||l},k=(0,r.Fl)((()=>h.value.map((t=>({...t,days:t.days.map((t=>{const n=w(t.value);return t.classData={dp__cell_offset:!t.current,dp__pointer:!n,dp__active_date:b(t),dp__date_hover:!n&&!b(t),dp__range_between:!(!e.range||n||b(t))&&M(t),dp__today:D(t.value,m.value),dp__cell_disabled:n,[e.calendarCellClassName]:!!e.calendarCellClassName},t}))}))))),D=(e,t)=>{if(e&&t){const[n,a]=[e.getDate(),t.getDate()],[l,i]=[e.getMonth(),t.getMonth()],[r,u]=[e.getFullYear(),t.getFullYear()];return n===a&&l===i&&r===u}return!1},b=t=>e.range?D(t.value,v.value&&v.value[0]?new Date(JSON.parse(JSON.stringify(v.value[0]))):null)||D(t.value,v.value&&v.value[1]?new Date(JSON.parse(JSON.stringify(v.value[1]))):null):D(t.value,y.value),S=e=>{const t=new Date(e);return t.setHours(0,0),t.getTime()},M=e=>v.value&&v.value[0]&&v.value[1]?S(e.value)>S(v.value[0])&&S(e.value)S(v.value[0])&&S(e.value)S(p.value)),I=e=>{o.value=e.getMonth(),d.value=e.getFullYear(),c.value=e.getDate()},C=()=>{const n=new Date(JSON.parse(JSON.stringify(e.singleModelValue)));n.setHours(a.value,u.value),t("update:singleModelValue",n)},V=()=>{const[e,n]=(()=>{const e=JSON.parse(JSON.stringify(v.value));return[new Date(e[0]),new Date(e[1])]})();e.setHours(l.value[0],s.value[0]),n.setHours(l.value[1],s.value[1]),t("update:rangeModelValue",[e,n])};return{mappedDates:k,years:_,calendarClass:f,weekDays:n,selectDate:n=>{if(!w(n.value))if(e.range){let e=v.value.slice();2===e.length&&(e=[]),e[0]?n.value.getTime(){const t=e.find((e=>e.current));if(t){const e=new Date(t.value),n=new Date(e.getFullYear(),0,1),a=(e.getTime()-n.getTime())/864e5;return Math.ceil((a+n.getDay()+1)/7)}return""},setHoverDate:e=>{p.value=e.value},dates:h,month:o,year:d,day:c,hoursSingle:a,minutesSingle:u,hoursRange:l,minutesRange:s}}});const ue={class:"dp__calendar_content_wrap"},se={class:"dp__calendar_tb"},oe={class:"dp__calendar_days"},de={key:0,class:"dp__calendar_header_cell"},ce={key:0,class:"dp__cell dp__week_num"},me=["onClick","onMouseover"];re.render=function(e,t,n,a,l,r){const s=(0,i.up)("MonthYearInput"),o=(0,i.up)("TimePicker"),d=(0,i.up)("ActionRow");return(0,i.wg)(),(0,i.iD)("div",{class:(0,u.C_)(e.calendarClass)},[(0,i._)("div",ue,[e.disableMonthYearSelect?(0,i.kq)("",!0):((0,i.wg)(),(0,i.j4)(s,{key:0,months:e.months,month:e.month,"onUpdate:month":t[0]||(t[0]=t=>e.month=t),year:e.year,"onUpdate:year":t[1]||(t[1]=t=>e.year=t),years:e.years,filters:e.filters},null,8,["months","month","year","years","filters"])),(0,i._)("table",se,[(0,i._)("thead",null,[(0,i._)("tr",oe,[e.weekNumbers?((0,i.wg)(),(0,i.iD)("th",de,(0,u.zw)(e.weekNumName),1)):(0,i.kq)("",!0),((0,i.wg)(!0),(0,i.iD)(i.HY,null,(0,i.Ko)(e.weekDays,((e,t)=>((0,i.wg)(),(0,i.iD)("th",{class:"dp__calendar_header_cell",key:t},(0,u.zw)(e),1)))),128))])]),(0,i._)("tbody",null,[((0,i.wg)(!0),(0,i.iD)(i.HY,null,(0,i.Ko)(e.mappedDates,((t,n)=>((0,i.wg)(),(0,i.iD)("tr",{key:n},[e.weekNumbers?((0,i.wg)(),(0,i.iD)("td",ce,(0,u.zw)(e.getWeekDay(t.days)),1)):(0,i.kq)("",!0),((0,i.wg)(!0),(0,i.iD)(i.HY,null,(0,i.Ko)(t.days,((t,a)=>((0,i.wg)(),(0,i.iD)("td",{class:"dp__cell",key:a+n,onClick:n=>e.selectDate(t),onMouseover:n=>e.setHoverDate(t)},[(0,i._)("div",{class:(0,u.C_)(["dp__cell_inner",t.classData])},(0,u.zw)(t.text),3)],40,me)))),128))])))),128))])]),e.enableTimePicker?((0,i.wg)(),(0,i.j4)(o,{key:1,is24:e.is24,"hours-increment":e.hoursIncrement,"minutes-increment":e.minutesIncrement,"hours-grid-increment":e.hoursGridIncrement,"minutes-grid-increment":e.minutesGridIncrement,range:e.range,filters:e.filters,"min-time":e.minTime,"max-time":e.maxTime,hoursSingle:e.hoursSingle,"onUpdate:hoursSingle":t[2]||(t[2]=t=>e.hoursSingle=t),minutesSingle:e.minutesSingle,"onUpdate:minutesSingle":t[3]||(t[3]=t=>e.minutesSingle=t),hoursRange:e.hoursRange,"onUpdate:hoursRange":t[4]||(t[4]=t=>e.hoursRange=t),minutesRange:e.minutesRange,"onUpdate:minutesRange":t[5]||(t[5]=t=>e.minutesRange=t)},null,8,["is24","hours-increment","minutes-increment","hours-grid-increment","minutes-grid-increment","range","filters","min-time","max-time","hoursSingle","minutesSingle","hoursRange","minutesRange"])):(0,i.kq)("",!0)]),e.autoApply?(0,i.kq)("",!0):((0,i.wg)(),(0,i.j4)(d,{key:0,"range-model-value":e.rangeModelValue,"single-model-value":e.singleModelValue,range:e.range,"select-text":e.selectText,"cancel-text":e.cancelText,"preview-format":e.previewFormat,locale:e.locale,is24:e.is24,"enable-time-picker":e.enableTimePicker,inline:e.inline,onClosePicker:t[6]||(t[6]=t=>e.$emit("closePicker")),onSelectDate:t[7]||(t[7]=t=>e.$emit("selectDate"))},null,8,["range-model-value","single-model-value","range","select-text","cancel-text","preview-format","locale","is24","enable-time-picker","inline"]))],2)};var pe=(0,i.aZ)({name:"DatepickerMenu",components:{Calendar:re},emits:["update:singleModelValue","update:rangeModelValue","closePicker","selectDate","openToTop"],props:{uid:{type:String,default:"dp"},weekNumbers:{type:Boolean,default:!1},weekStart:{type:[Number,String],default:1},disableMonthYearSelect:{type:Boolean,default:!1},menuClassName:{type:String,default:null},calendarClassName:{type:String,default:null},yearRange:{type:Array,default:()=>[]},singleModelValue:{type:[String,Date],default:null},rangeModelValue:{type:Array,default:()=>[]},range:{type:Boolean,default:!1},calendarCellClassName:{type:String,default:null},enableTimePicker:{type:Boolean,default:!1},is24:{type:Boolean,default:!0},hoursIncrement:{type:[String,Number],default:1},minutesIncrement:{type:[String,Number],default:1},hoursGridIncrement:{type:[String,Number],default:1},minutesGridIncrement:{type:[String,Number],default:5},minDate:{type:[Date,String],default:null},maxDate:{type:[Date,String],default:null},autoApply:{type:Boolean,default:!1},selectText:{type:String,default:"Select"},cancelText:{type:String,default:"Cancel"},previewFormat:{type:[Object,Function],default:null},locale:{type:String,default:"en-US"},weekNumName:{type:String,default:"W"},disabledDates:{type:Array,default:()=>[]},filters:{type:Object,default:()=>({})},minTime:{type:Object,default:()=>({})},maxTime:{type:Object,default:()=>({})},inline:{type:Boolean,default:!1}},setup(e,{emit:t}){const n=(0,r.iH)({}),a=(0,r.iH)(!1);(0,i.bv)((()=>{c(),n.value=Object.assign({months:[],years:[],times:{hours:[],minutes:[]}},e.filters)}));const l=(0,r.Fl)((()=>(e=>{const t=new Intl.DateTimeFormat(e,{month:"short",timeZone:"UTC"});return[1,2,3,4,5,6,7,8,9,10,11,12].map((e=>new Date(`2017-${e<10?`0${e}`:e}-01T00:00:00+00:00`))).map((e=>t.format(e).slice(0,3)))})(e.locale).map(((e,t)=>({text:e,value:t}))))),u=(0,r.Fl)((()=>({[e.menuClassName]:!!e.menuClassName,dp__flex_display:e.inline}))),s=(0,r.Fl)((()=>a.value?"dp__arrow_bottom":"dp__arrow_top")),o=F(e,t,"rangeModelValue"),d=F(e,t,"singleModelValue"),c=()=>{const n=document.getElementById(`dp__input_${e.uid}`);if(n){const{height:l}=n.getBoundingClientRect(),i=(()=>{const{documentElement:e,body:t}=document,n=e.offsetHeight?e:t;return Math.max(n.scrollHeight,n.offsetHeight)})()-n.offsetTop-l,r=document.getElementById(`dp__menu_${e.uid}`);if(r){const{height:e}=r.getBoundingClientRect(),n=e+l;n>i&&(t("openToTop",n),a.value=!0)}}},m=(0,r.Fl)((()=>e.range?e.rangeModelValue&&e.rangeModelValue[0]?new Date(e.rangeModelValue[0]):new Date:e.singleModelValue?new Date(e.singleModelValue):new Date));return{assignedFilter:n,firstDate:m,rangeDate:o,singleDate:d,dpMenuClass:u,mappedMonths:l,arrowClass:s}}});const ge=["id"];pe.render=function(e,t,n,a,l,r){const s=(0,i.up)("Calendar");return(0,i.wg)(),(0,i.iD)("div",{class:(0,u.C_)(["dp__menu",e.dpMenuClass]),id:`dp__menu_${e.uid}`},[e.inline?(0,i.kq)("",!0):((0,i.wg)(),(0,i.iD)("div",{key:0,class:(0,u.C_)(e.arrowClass)},null,2)),(0,i.Wm)(s,{months:e.mappedMonths,"week-numbers":e.weekNumbers,"week-start":e.weekStart,"disable-month-year-select":e.disableMonthYearSelect,"calendar-class-name":e.calendarClassName,is24:e.is24,range:e.range,"year-range":e.yearRange,"start-date":e.firstDate,"calendar-cell-class-name":e.calendarCellClassName,"enable-time-picker":e.enableTimePicker,"hours-increment":e.hoursIncrement,"minutes-increment":e.minutesIncrement,"hours-grid-increment":e.hoursGridIncrement,"minutes-grid-increment":e.minutesGridIncrement,"auto-apply":e.autoApply,locale:e.locale,"week-num-name":e.weekNumName,"preview-format":e.previewFormat,"min-date":e.minDate,"max-date":e.maxDate,"disabled-dates":e.disabledDates,filters:e.assignedFilter,"min-time":e.minTime,"max-time":e.maxTime,"select-text":e.selectText,"cancel-text":e.cancelText,inline:e.inline,onSelectRangeDate:t[0]||(t[0]=t=>e.$emit("update:rangeModelValue",t)),onClosePicker:t[1]||(t[1]=t=>e.$emit("closePicker")),onSelectDate:t[2]||(t[2]=t=>e.$emit("selectDate")),rangeModelValue:e.rangeDate,"onUpdate:rangeModelValue":t[3]||(t[3]=t=>e.rangeDate=t),singleModelValue:e.singleDate,"onUpdate:singleModelValue":t[4]||(t[4]=t=>e.singleDate=t)},null,8,["months","week-numbers","week-start","disable-month-year-select","calendar-class-name","is24","range","year-range","start-date","calendar-cell-class-name","enable-time-picker","hours-increment","minutes-increment","hours-grid-increment","minutes-grid-increment","auto-apply","locale","week-num-name","preview-format","min-date","max-date","disabled-dates","filters","min-time","max-time","select-text","cancel-text","inline","rangeModelValue","singleModelValue"])],10,ge)};var ve=(0,i.aZ)({name:"Vue3DatePicker",emits:["update:modelValue"],directives:{clickOutsideDirective:{beforeMount(e,t){const n=t.instance,a=Object.keys(t.modifiers);e.clickOutsideEvent=l=>{const i=l.composedPath?l.composedPath():void 0;n&&i&&!i.includes(n.$el)&&(a.length>0?a.some((e=>i.some((t=>{if(t.className&&"string"==typeof(null==t?void 0:t.className))return t.className.includes(e)}))))||t.value(l,e):n.$el.contains(l.target)||t.value(l,e))},document.body.addEventListener("click",e.clickOutsideEvent,!1)},unmounted(e){document.body.removeEventListener("click",e.clickOutsideEvent)}}},components:{DatepickerInput:N,DatepickerMenu:pe},props:{uid:{type:String,default:"dp"},is24:{type:Boolean,default:!0},enableTimePicker:{type:Boolean,default:!0},locale:{type:String,default:"en-US"},range:{type:Boolean,default:!1},modelValue:{type:[String,Date,Array],default:null},position:{type:String,default:a.center},placeholder:{type:String,default:null},weekNumbers:{type:Boolean,default:!1},dark:{type:Boolean,default:!1},hoursIncrement:{type:[String,Number],default:1},minutesIncrement:{type:[String,Number],default:1},hoursGridIncrement:{type:[String,Number],default:1},minutesGridIncrement:{type:[String,Number],default:5},minDate:{type:[Date,String],default:null},maxDate:{type:[Date,String],default:null},minTime:{type:Object,default:()=>({})},maxTime:{type:Object,default:()=>({})},weekStart:{type:[String,Number],default:1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},weekNumName:{type:String,default:"W"},format:{type:[Object,Function],default:()=>({})},previewFormat:{type:[Object,Function],default:()=>({})},inputClassName:{type:String,default:null},menuClassName:{type:String,default:null},calendarClassName:{type:String,default:null},calendarCellClassName:{type:String,default:null},hideInputIcon:{type:Boolean,default:!1},state:{type:Boolean,default:null},clearable:{type:Boolean,default:!0},closeOnScroll:{type:Boolean,default:!0},autoApply:{type:Boolean,default:!1},filters:{type:Object,default:()=>({})},disableMonthYearSelect:{type:Boolean,default:!1},yearRange:{type:Array,default:()=>[1970,2100]},disabledDates:{type:Array,default:()=>[]},inline:{type:Boolean,default:!1},selectText:{type:String,default:"Select"},cancelText:{type:String,default:"Cancel"}},setup(e,{emit:t}){const n=(0,r.iH)(!1),l=(0,r.iH)({top:"0",left:"0",transform:"none"}),u=(0,r.iH)(""),s=(0,r.iH)(),o=(0,r.iH)(),d=(0,r.iH)(!1),c=(0,r.Vh)(e,"modelValue");(0,i.YP)(s,(()=>{y(e.autoApply)})),(0,i.YP)(o,(()=>{h(e.autoApply)})),(0,i.YP)(c,(()=>{v.value&&_()})),(0,i.bv)((()=>{_(),e.closeOnScroll&&window.addEventListener("scroll",k),window.addEventListener("resize",f),e.inline&&(n.value=!0)})),(0,i.Ah)((()=>{e.closeOnScroll&&window.removeEventListener("scroll",k),window.removeEventListener("resize",f)}));const m=(0,r.Fl)((()=>({dp__main:!0,dp__theme_dark:e.dark,dp__theme_light:!e.dark,dp__flex_display:e.inline}))),p=(0,r.Fl)((()=>e.dark?"dp__theme_dark":"dp__theme_light")),g=(0,r.Fl)((()=>!e.range)),v=(0,r.Fl)((()=>{const t=e.range?JSON.stringify(o.value):JSON.stringify(s.value);return JSON.stringify(c.value)!==t})),y=(n=!1)=>{if(s.value&&n){const t=new Date(s.value);"object"==typeof e.format?u.value=$(t,e.locale,e.format,e.is24,e.enableTimePicker):u.value=e.format(t)}e.autoApply&&(t("update:modelValue",s.value),k())},h=(n=!1)=>{if(o.value&&2===o.value.length){const a=[new Date(o.value[0]),new Date(o.value[1])];n&&("object"==typeof e.format?u.value=R(a,e.locale,e.format,e.is24,e.enableTimePicker):u.value=e.format(a)),e.autoApply&&(t("update:modelValue",o.value),k())}},_=()=>{e.modelValue?e.range?Array.isArray(e.modelValue)?(o.value=JSON.parse(JSON.stringify(e.modelValue)).map((e=>new Date(e))),h(!0)):o.value=[]:(s.value=new Date(e.modelValue),y(!0)):(o.value=[],s.value=null)},f=()=>{const t=document.getElementById(`dp__input_${e.uid}`);if(t){const{left:n,width:i,height:r}=t.getBoundingClientRect(),u={top:`${r+t.offsetTop+10}px`,left:"",transform:"none"};e.position===a.left&&(u.left=`${n}px`),e.position===a.right&&(u.left=`${n+i}px`,u.transform="translateX(-100%)"),e.position===a.center&&(u.left=`${n+i/2}px`,u.transform="translateX(-50%)"),l.value=u}},w=()=>{s.value=null,o.value=[]},k=()=>{e.inline||(n.value&&(n.value=!1),w())};return{singleModelValue:s,rangeModelValue:o,menuPosition:l,internalValue:u,isOpen:n,isSingle:g,clearValue:()=>{d.value=!0,u.value="",w(),t("update:modelValue",null)},openMenu:()=>{e.disabled||e.readonly||(d.value||(f(),n.value=!n.value,n.value||w()),d.value=!1,_())},closeMenu:k,selectDate:()=>{e.range?(h(!0),t("update:modelValue",o.value)):(y(!0),t("update:modelValue",s.value)),k()},theme:p,wrapperClass:m,recalculatePosition:t=>{const n=document.getElementById(`dp__input_${e.uid}`);n&&(l.value.top=n.offsetTop-t-12+"px")}}}});ve.render=function(e,t,n,a,l,r){const s=(0,i.up)("DatepickerInput"),o=(0,i.up)("DatepickerMenu"),d=(0,i.Q2)("click-outside-directive");return(0,i.wg)(),(0,i.iD)("div",{class:(0,u.C_)(e.wrapperClass)},[(0,i.Wm)(s,{"internal-value":e.internalValue,placeholder:e.placeholder,"hide-input-icon":e.hideInputIcon,readonly:e.readonly,disabled:e.disabled,"input-class-name":e.inputClassName,clearable:e.clearable,state:e.state,inline:e.inline,onClear:e.clearValue,onOpen:e.openMenu,id:`dp__input_${e.uid}`},(0,i.Nv)({_:2},[e.$slots.trigger?{name:"trigger",fn:(0,i.w5)((()=>[(0,i.WI)(e.$slots,"trigger")]))}:void 0,e.$slots["input-icon"]?{name:"input-icon",fn:(0,i.w5)((()=>[(0,i.WI)(e.$slots,"input-icon")]))}:void 0,e.$slots["clear-icon"]?{name:"clear-icon",fn:(0,i.w5)((()=>[(0,i.WI)(e.$slots,"clear-icon")]))}:void 0]),1032,["internal-value","placeholder","hide-input-icon","readonly","disabled","input-class-name","clearable","state","inline","onClear","onOpen","id"]),((0,i.wg)(),(0,i.j4)(i.lR,{to:"body",disabled:e.inline},[e.isOpen?(0,i.wy)(((0,i.wg)(),(0,i.j4)(o,{key:0,class:(0,u.C_)(e.theme),uid:e.uid,"enable-time-picker":e.enableTimePicker,"week-numbers":e.weekNumbers,"week-start":e.weekStart,"disable-month-year-select":e.disableMonthYearSelect,"hours-increment":e.hoursIncrement,"minutes-increment":e.minutesIncrement,"menu-class-name":e.menuClassName,"year-range":e.yearRange,is24:e.is24,"calendar-cell-class-name":e.calendarCellClassName,"hours-grid-increment":e.hoursGridIncrement,"minutes-grid-increment":e.minutesGridIncrement,"min-date":e.minDate,"max-date":e.maxDate,style:(0,u.j5)(e.menuPosition),range:e.range,"auto-apply":e.autoApply,locale:e.locale,"week-num-name":e.weekNumName,"preview-format":e.previewFormat,"disabled-dates":e.disabledDates,filters:e.filters,"min-time":e.minTime,"max-time":e.maxTime,"select-text":e.selectText,"cancel-text":e.cancelText,inline:e.inline,singleModelValue:e.singleModelValue,"onUpdate:singleModelValue":t[0]||(t[0]=t=>e.singleModelValue=t),rangeModelValue:e.rangeModelValue,"onUpdate:rangeModelValue":t[1]||(t[1]=t=>e.rangeModelValue=t),onClosePicker:e.closeMenu,onSelectDate:e.selectDate,onOpenToTop:e.recalculatePosition},null,8,["class","uid","enable-time-picker","week-numbers","week-start","disable-month-year-select","hours-increment","minutes-increment","menu-class-name","year-range","is24","calendar-cell-class-name","hours-grid-increment","minutes-grid-increment","min-date","max-date","style","range","auto-apply","locale","week-num-name","preview-format","disabled-dates","filters","min-time","max-time","select-text","cancel-text","inline","singleModelValue","rangeModelValue","onClosePicker","onSelectDate","onOpenToTop"])),[[d,e.closeMenu,void 0,{dp__menu:!0}]]):(0,i.kq)("",!0)],8,["disabled"]))],2)};var ye=(()=>{const e=ve;return e.install=t=>{t.component("Vue3DatePicker",e)},e})()}}]); \ No newline at end of file diff --git a/docs/assets/js/855.e19bdb39.js b/docs/assets/js/855.e19bdb39.js new file mode 100644 index 0000000..f970420 --- /dev/null +++ b/docs/assets/js/855.e19bdb39.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[855],{4855:(e,t,n)=>{n.d(t,{Z:()=>he});var a,l,i=n(6252),r=n(2262),u=n(3577),s=n(9963);(l=a||(a={})).center="center",l.left="left",l.right="right";var o=(0,i.aZ)({name:"CalendarIcon"});const m={version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32",class:"dp__icon"},d=[(0,i._)("path",{d:"M29.333 8c0-2.208-1.792-4-4-4h-18.667c-2.208 0-4 1.792-4 4v18.667c0 2.208 1.792 4 4 4h18.667c2.208 0 4-1.792 4-4v-18.667zM26.667 8v18.667c0 0.736-0.597 1.333-1.333 1.333 0 0-18.667 0-18.667 0-0.736 0-1.333-0.597-1.333-1.333 0 0 0-18.667 0-18.667 0-0.736 0.597-1.333 1.333-1.333 0 0 18.667 0 18.667 0 0.736 0 1.333 0.597 1.333 1.333z"},null,-1),(0,i._)("path",{d:"M20 2.667v5.333c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-5.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333z"},null,-1),(0,i._)("path",{d:"M9.333 2.667v5.333c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-5.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333z"},null,-1),(0,i._)("path",{d:"M4 14.667h24c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333h-24c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333z"},null,-1)];o.render=function(e,t,n,a,l,r){return(0,i.wg)(),(0,i.iD)("svg",m,d)};var c=(0,i.aZ)({name:"CancelIcon"});const p={version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32",class:"dp__icon"},g=[(0,i._)("path",{d:"M23.057 7.057l-16 16c-0.52 0.52-0.52 1.365 0 1.885s1.365 0.52 1.885 0l16-16c0.52-0.52 0.52-1.365 0-1.885s-1.365-0.52-1.885 0z"},null,-1),(0,i._)("path",{d:"M7.057 8.943l16 16c0.52 0.52 1.365 0.52 1.885 0s0.52-1.365 0-1.885l-16-16c-0.52-0.52-1.365-0.52-1.885 0s-0.52 1.365 0 1.885z"},null,-1)];c.render=function(e,t,n,a,l,r){return(0,i.wg)(),(0,i.iD)("svg",p,g)};var v=(0,i.aZ)({name:"ChevronLeftIcon"});const y={version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32",class:"dp__icon"},h=[(0,i._)("path",{d:"M20.943 23.057l-7.057-7.057c0 0 7.057-7.057 7.057-7.057 0.52-0.52 0.52-1.365 0-1.885s-1.365-0.52-1.885 0l-8 8c-0.521 0.521-0.521 1.365 0 1.885l8 8c0.52 0.52 1.365 0.52 1.885 0s0.52-1.365 0-1.885z"},null,-1)];v.render=function(e,t,n,a,l,r){return(0,i.wg)(),(0,i.iD)("svg",y,h)};var _=(0,i.aZ)({name:"ChevronRightIcon"});const f={version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32",class:"dp__icon"},w=[(0,i._)("path",{d:"M12.943 24.943l8-8c0.521-0.521 0.521-1.365 0-1.885l-8-8c-0.52-0.52-1.365-0.52-1.885 0s-0.52 1.365 0 1.885l7.057 7.057c0 0-7.057 7.057-7.057 7.057-0.52 0.52-0.52 1.365 0 1.885s1.365 0.52 1.885 0z"},null,-1)];_.render=function(e,t,n,a,l,r){return(0,i.wg)(),(0,i.iD)("svg",f,w)};var k=(0,i.aZ)({name:"ClockIcon"});const D={version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32",class:"dp__icon"},b=[(0,i._)("path",{d:"M16 1.333c-8.095 0-14.667 6.572-14.667 14.667s6.572 14.667 14.667 14.667c8.095 0 14.667-6.572 14.667-14.667s-6.572-14.667-14.667-14.667zM16 4c6.623 0 12 5.377 12 12s-5.377 12-12 12c-6.623 0-12-5.377-12-12s5.377-12 12-12z"},null,-1),(0,i._)("path",{d:"M14.667 8v8c0 0.505 0.285 0.967 0.737 1.193l5.333 2.667c0.658 0.329 1.46 0.062 1.789-0.596s0.062-1.46-0.596-1.789l-4.596-2.298c0 0 0-7.176 0-7.176 0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333z"},null,-1)];k.render=function(e,t,n,a,l,r){return(0,i.wg)(),(0,i.iD)("svg",D,b)};var S=(0,i.aZ)({name:"ChevronUpIcon"});const M={version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32",class:"dp__icon"},I=[(0,i._)("path",{d:"M24.943 19.057l-8-8c-0.521-0.521-1.365-0.521-1.885 0l-8 8c-0.52 0.52-0.52 1.365 0 1.885s1.365 0.52 1.885 0l7.057-7.057c0 0 7.057 7.057 7.057 7.057 0.52 0.52 1.365 0.52 1.885 0s0.52-1.365 0-1.885z"},null,-1)];S.render=function(e,t,n,a,l,r){return(0,i.wg)(),(0,i.iD)("svg",M,I)};var C=(0,i.aZ)({name:"ChevronDownIcon"});const T={version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32",class:"dp__icon"},V=[(0,i._)("path",{d:"M7.057 12.943l8 8c0.521 0.521 1.365 0.521 1.885 0l8-8c0.52-0.52 0.52-1.365 0-1.885s-1.365-0.52-1.885 0l-7.057 7.057c0 0-7.057-7.057-7.057-7.057-0.52-0.52-1.365-0.52-1.885 0s-0.52 1.365 0 1.885z"},null,-1)];C.render=function(e,t,n,a,l,r){return(0,i.wg)(),(0,i.iD)("svg",T,V)};var x=(0,i.aZ)({name:"DatepickerInput",emits:["clear","open"],components:{CalendarIcon:o,CancelIcon:c},props:{internalValue:{type:String,default:""},placeholder:{type:String,default:""},hideInputIcon:{type:Boolean,default:!1},disabled:{type:Boolean,default:!0},readonly:{type:Boolean,default:!0},clearable:{type:Boolean,default:!0},state:{type:Boolean,default:null},inputClassName:{type:String,default:null},inline:{type:Boolean,default:!1}},setup:e=>({datepickerInputClass:(0,r.Fl)((()=>({dp__pointer:!e.disabled&&!e.readonly,dp__disabled:e.disabled,dp__input:!0,dp__input_icon_pad:!e.hideInputIcon,dp__input_valid:e.state,dp__input_invalid:!1===e.state,[e.inputClassName]:!!e.inputClassName})))})});const N={key:1,class:"dp__input_wrap"},O=["placeholder","disabled","value"],P={key:0,class:"dp__input_icon"};x.render=function(e,t,n,a,l,r){const o=(0,i.up)("CalendarIcon"),m=(0,i.up)("CancelIcon");return(0,i.wg)(),(0,i.iD)("div",{onClick:t[2]||(t[2]=t=>e.$emit("open"))},[e.$slots.trigger&&!e.inline?(0,i.WI)(e.$slots,"trigger",{key:0}):(0,i.kq)("",!0),e.$slots.trigger||e.inline?(0,i.kq)("",!0):((0,i.wg)(),(0,i.iD)("div",N,[(0,i._)("input",{class:(0,u.C_)(e.datepickerInputClass),placeholder:e.placeholder,disabled:e.disabled,readonly:"",value:e.internalValue},null,10,O),e.$slots["input-icon"]&&!e.hideInputIcon?((0,i.wg)(),(0,i.iD)("span",P,[(0,i.WI)(e.$slots,"input-icon")])):(0,i.kq)("",!0),e.$slots["input-icon"]||e.hideInputIcon?(0,i.kq)("",!0):((0,i.wg)(),(0,i.j4)(o,{key:1,class:"dp__input_icon dp__input_icons"})),e.$slots["clear-icon"]&&e.clearable&&!e.disabled&&!e.readonly?((0,i.wg)(),(0,i.iD)("span",{key:2,class:"dp__clear_icon",onClick:t[0]||(t[0]=(0,s.iM)((t=>e.$emit("clear")),["stop","prevent"]))},[(0,i.WI)(e.$slots,"clear-icon")])):(0,i.kq)("",!0),!e.clearable||e.$slots["clear-icon"]||!e.internalValue||e.disabled||e.readonly?(0,i.kq)("",!0):((0,i.wg)(),(0,i.j4)(m,{key:3,class:"dp__clear_icon dp__input_icons",onClick:t[1]||(t[1]=(0,s.iM)((t=>e.$emit("clear")),["prevent"]))}))]))])};const H=e=>{const t=new Date(JSON.parse(JSON.stringify(e)));return new Date(t.setDate(t.getDate()+7))},B=(e,t)=>{const n=new Date(JSON.parse(JSON.stringify(e))),a=[];for(let e=0;e<7;e++){const l=new Date(new Date(JSON.parse(JSON.stringify(n))).getTime());l.setDate(n.getDate()+e),a.push({text:l.getDate(),value:l,current:JSON.parse(JSON.stringify(l.getMonth()))===t})}return a},$=e=>e?{hourCycle:"h23"}:{hour12:!0},R=(e,t,n,a,l)=>{let i=n;return l&&(i=Object.assign(i,{hour:"numeric",minute:"numeric",hourCycle:"h23",...$(a)})),e.toLocaleDateString(t,i)},F=(e,t,n,a,l,i)=>{let r=n;return l&&(r=Object.assign(r,{hour:"numeric",minute:"numeric",...$(a)})),i?[e[0].toLocaleDateString(t,r),e[1].toLocaleDateString(t,r)]:`${e[0].toLocaleDateString(t,r)} - ${e[1].toLocaleDateString(t,r)}`},j=(e,t,n="modelValue")=>(0,r.Fl)({get:()=>e[n],set:e=>t(`update:${n}`,e)}),A=e=>function(t){let n="";const a="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",l=a.length;for(let e=0;e<5;e++)n+=a.charAt(Math.floor(Math.random()*l));return n+e}();var Y=(0,i.aZ)({name:"SelectionGrid",emits:["update:modelValue","selected","toggle"],props:{items:{type:Array,default:()=>[]},modelValue:{type:[String,Number],default:null},id:{type:String,default:"dp__overlay"},disabledValues:{type:Array,default:()=>[]},minValue:{type:[Number,String],default:null},maxValue:{type:[Number,String],default:null}},setup(e,{emit:t}){const n=(0,r.iH)(!1);(0,i.bv)((()=>{((e,t)=>{const n=document.getElementById("selection-active");if(n){const t=document.getElementById(e);t&&(t.scrollTop=n.offsetTop-t.offsetTop-(t.getBoundingClientRect().height/2-n.getBoundingClientRect().height))}})(e.id);const t=document.getElementById(e.id);t&&(n.value=t.clientHeight{const n=!!e.maxValue&&+t>+e.maxValue,a=!!e.minValue&&+t<+e.minValue;return n||a},l=(0,r.Fl)((()=>e.items.map((t=>t.filter((e=>e)).map((t=>({...t,className:{dp__overlay_cell_active:t.value===e.modelValue,dp__overlay_cell:t.value!==e.modelValue,dp__overlay_cell_disabled:e.disabledValues.some((e=>e===t.value))||a(t.value)}}))))))),u=(0,r.Fl)((()=>({dp__button:!0,dp__overlay_action:!0,dp__over_action_scroll:n.value})));return{useKey:A,onClick:n=>{e.disabledValues.some((e=>e===n))||e.minValue&&!(+e.minValuen)||(t("update:modelValue",n),t("selected"))},actionButtonClass:u,mappedItems:l}}});const U=["id"],G={class:"dp__overlay_container"},z=["onClick","id"];Y.render=function(e,t,n,a,l,r){return(0,i.wg)(),(0,i.iD)("div",{class:"dp__overlay",id:e.id},[(0,i._)("div",G,[((0,i.wg)(!0),(0,i.iD)(i.HY,null,(0,i.Ko)(e.mappedItems,((t,n)=>((0,i.wg)(),(0,i.iD)("div",{class:"dp__overlay_row",key:e.useKey(n)},[((0,i.wg)(!0),(0,i.iD)(i.HY,null,(0,i.Ko)(t,(t=>((0,i.wg)(),(0,i.iD)("div",{class:"dp__overlay_col",key:t.value,onClick:n=>e.onClick(t.value),id:t.value===e.modelValue?"selection-active":null},[(0,i._)("div",{class:(0,u.C_)(t.className)},(0,u.zw)(t.text),3)],8,z)))),128))])))),128)),(0,i._)("div",{class:(0,u.C_)(e.actionButtonClass),onClick:t[0]||(t[0]=t=>e.$emit("toggle"))},[(0,i.WI)(e.$slots,"button-icon")],2)])],8,U)};var W=(0,i.aZ)({name:"MonthYearPicker",emits:["update:month","update:year"],components:{CalendarIcon:o,ChevronLeftIcon:v,ChevronRightIcon:_,SelectionGrid:Y},props:{months:{type:Array,default:()=>[]},years:{type:Array,default:()=>[]},year:{type:Number,default:0},month:{type:Number,default:0},filters:{type:Object,default:()=>({})}},setup(e,{emit:t}){const n=(0,r.iH)(!1),a=(0,r.iH)(!1),{onNext:l,onPrev:i}=((e,t)=>{const n=(e,n)=>{t("update:month",e),t("update:year",n)};return{onNext:()=>{let t=e.month,a=e.year;11===e.month?(t=0,a=e.year+1):t+=1,n(t,a)},onPrev:()=>{let t=e.month,a=e.year;0===e.month?(t=11,a=e.year-1):t-=1,n(t,a)}}})(e,t),u=e=>{const t=[];for(let n=0;n{const t=e.months.find((t=>t.value===e.month));return t?t.text:""})),o=(0,r.Fl)((()=>u(e.months))),m=(0,r.Fl)((()=>u(e.years))),d=()=>{n.value=!n.value},c=()=>{a.value=!a.value};return{toggleYearPicker:c,onNext:l,onPrev:i,onYearUpdate:e=>{t("update:year",e),c()},getMonthDisplayVal:s,showMonthPicker:n,showYearPicker:a,groupedMonths:o,toggleMonthPicker:d,onMonthUpdate:e=>{t("update:month",e),d()},groupedYears:m,useKey:A}}});const q={class:"dp__month_year_row"};W.render=function(e,t,n,a,l,r){const s=(0,i.up)("ChevronLeftIcon"),o=(0,i.up)("CalendarIcon"),m=(0,i.up)("SelectionGrid"),d=(0,i.up)("ChevronRightIcon");return(0,i.wg)(),(0,i.iD)("div",q,[(0,i._)("div",{class:"dp__month_year_col_nav",onClick:t[0]||(t[0]=(...t)=>e.onPrev&&e.onPrev(...t))},[(0,i.Wm)(s)]),(0,i._)("div",{class:"dp__month_year_select",onClick:t[1]||(t[1]=(...t)=>e.toggleMonthPicker&&e.toggleMonthPicker(...t))},(0,u.zw)(e.getMonthDisplayVal),1),(0,i._)("div",{class:"dp__month_year_select",onClick:t[2]||(t[2]=(...t)=>e.toggleYearPicker&&e.toggleYearPicker(...t))},(0,u.zw)(e.year),1),e.showMonthPicker?((0,i.wg)(),(0,i.j4)(m,{key:0,"model-value":e.month,items:e.groupedMonths,"onUpdate:modelValue":e.onMonthUpdate,onToggle:e.toggleMonthPicker,"disabled-values":e.filters.months},{"button-icon":(0,i.w5)((()=>[(0,i.Wm)(o)])),_:1},8,["model-value","items","onUpdate:modelValue","onToggle","disabled-values"])):(0,i.kq)("",!0),e.showYearPicker?((0,i.wg)(),(0,i.j4)(m,{key:1,"model-value":e.year,items:e.groupedYears,"onUpdate:modelValue":e.onYearUpdate,onToggle:e.toggleYearPicker,"disabled-values":e.filters.years},{"button-icon":(0,i.w5)((()=>[(0,i.Wm)(o)])),_:1},8,["model-value","items","onUpdate:modelValue","onToggle","disabled-values"])):(0,i.kq)("",!0),(0,i._)("div",{class:"dp__month_year_col_nav",onClick:t[3]||(t[3]=(...t)=>e.onNext&&e.onNext(...t))},[(0,i.Wm)(d)])])};var J=(0,i.aZ)({name:"TimeInput",emits:["setHours","setMinutes","update:hours","update:minutes"],components:{ChevronDownIcon:C,ChevronUpIcon:S,ClockIcon:k,SelectionGrid:Y},props:{hours:{type:Number,default:0},minutes:{type:Number,default:0},hoursGridIncrement:{type:[String,Number],default:1},minutesGridIncrement:{type:[String,Number],default:5},hoursIncrement:{type:[Number,String],default:1},minutesIncrement:{type:[Number,String],default:1},is24:{type:Boolean,default:!0},filters:{type:Object,default:()=>({})},minTime:{type:Object,default:()=>({})},maxTime:{type:Object,default:()=>({})}},setup(e,{emit:t}){const n=(0,r.iH)(!1),a=(0,r.iH)(!1),l=(0,r.iH)(!1),u=(0,r.Vh)(e,"hours"),s=(0,r.Vh)(e,"minutes"),o=(0,r.iH)("AM");(0,i.bv)((()=>{p()}));const m=(0,r.Fl)((()=>{const e=g(u.value);return e<10?`0${e}`:`${e}`})),d=(0,r.Fl)((()=>s.value<10?`0${s.value}`:`${s.value}`)),c=(e,t)=>{const n=[];for(let a=0;a{const n=[];for(let a=0;a{Object.keys(e.maxTime).length&&(e.maxTime.hours&&u.value>e.maxTime.hours&&t("update:hours",+e.maxTime.hours),e.maxTime.minutes&&s.value>e.maxTime.minutes&&t("update:minutes",+e.maxTime.minutes)),Object.keys(e.minTime).length&&(e.minTime.hours&&u.valuee.is24?t:(o.value=t>=12?"PM":"AM",[12,1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,6,7,8,9,10,11][t]);return{showTimePicker:n,hourOverlay:a,minuteOverlay:l,hourDisplay:m,minuteDisplay:d,toggleHourOverlay:()=>{a.value=!a.value},toggleMinuteOverlay:()=>{l.value=!l.value},getHoursGridItems:()=>{const t=e.is24?24:12;return c(t,+e.hoursGridIncrement)},getMinutesGridItems:()=>c(60,+e.minutesGridIncrement),handleHours:n=>{if("increment"===n){if(e.maxTime.hours&&u.value+ +e.hoursIncrement>+e.maxTime.hours)return;if(e.minTime.hours&&u.value+ +e.hoursIncrement<+e.minTime.hours)return;e.is24&&u.value+ +e.hoursIncrement>=24||!e.is24&&u.value+ +e.hoursIncrement>=12?t("update:hours",0):t("update:hours",u.value+ +e.hoursIncrement)}else{if(e.minTime.hours&&u.value-+e.hoursIncrement<+e.minTime.hours)return;if(e.maxTime.hours&&u.value-+e.hoursIncrement>+e.maxTime.hours)return;u.value-+e.hoursIncrement<0?t("update:hours",e.is24?24-+e.hoursIncrement:12- -+e.hoursIncrement):t("update:hours",u.value-+e.hoursIncrement)}},handleMinutes:n=>{if("increment"===n){if(e.maxTime.minutes&&s.value+ +e.minutesIncrement>+e.maxTime.minutes)return;if(e.minTime.minutes&&s.value+ +e.minutesIncrement<+e.minTime.minutes)return;s.value+ +e.minutesIncrement>=60?t("update:minutes",0):t("update:minutes",s.value+ +e.minutesIncrement)}else{if(e.minTime.minutes&&s.value-+e.minutesIncrement<+e.minTime.minutes)return;if(e.maxTime.minutes&&s.value+ +e.minutesIncrement>+e.maxTime.minutes)return;s.value-+e.minutesIncrement<0?t("update:minutes",60-+e.minutesIncrement):t("update:minutes",s.value-+e.minutesIncrement)}},setAmPm:()=>{"PM"===o.value?(o.value="AM",t("update:hours",u.value-12)):(o.value="PM",t("update:hours",u.value+12))},amPm:o}}});const Z={class:"dp__time_input"},E={class:"dp__time_col"},L=(0,i._)("div",{class:"dp__time_col"},":",-1),K={class:"dp__time_col"},X={key:0};J.render=function(e,t,n,a,l,r){const s=(0,i.up)("ChevronUpIcon"),o=(0,i.up)("ChevronDownIcon"),m=(0,i.up)("ClockIcon"),d=(0,i.up)("SelectionGrid");return(0,i.wg)(),(0,i.iD)("div",Z,[(0,i._)("div",E,[(0,i._)("div",{class:"dp__inc_dec_button",onClick:t[0]||(t[0]=t=>e.handleHours("increment"))},[(0,i.Wm)(s)]),(0,i._)("div",{class:"dp__time_display",onClick:t[1]||(t[1]=(...t)=>e.toggleHourOverlay&&e.toggleHourOverlay(...t))},(0,u.zw)(e.hourDisplay),1),(0,i._)("div",{class:"dp__inc_dec_button",onClick:t[2]||(t[2]=t=>e.handleHours("decrement"))},[(0,i.Wm)(o)])]),L,(0,i._)("div",K,[(0,i._)("div",{class:"dp__inc_dec_button",onClick:t[3]||(t[3]=t=>e.handleMinutes("increment"))},[(0,i.Wm)(s)]),(0,i._)("div",{class:"dp__time_display",onClick:t[4]||(t[4]=(...t)=>e.toggleMinuteOverlay&&e.toggleMinuteOverlay(...t))},(0,u.zw)(e.minuteDisplay),1),(0,i._)("div",{class:"dp__inc_dec_button",onClick:t[5]||(t[5]=t=>e.handleMinutes("decrement"))},[(0,i.Wm)(o)])]),e.is24?(0,i.kq)("",!0):((0,i.wg)(),(0,i.iD)("div",X,[(0,i._)("button",{class:"dp__pm_am_button",onClick:t[6]||(t[6]=(...t)=>e.setAmPm&&e.setAmPm(...t))},(0,u.zw)(e.amPm),1)])),e.hourOverlay?((0,i.wg)(),(0,i.j4)(d,{key:1,"onUpdate:modelValue":t[7]||(t[7]=t=>e.$emit("update:hours",t)),items:e.getHoursGridItems(),onSelected:e.toggleHourOverlay,onToggle:e.toggleHourOverlay,"disabled-values":e.filters.times.hours,"min-value":e.minTime.hours,"max-value":e.maxTime.hours},{"button-icon":(0,i.w5)((()=>[(0,i.Wm)(m)])),_:1},8,["items","onSelected","onToggle","disabled-values","min-value","max-value"])):(0,i.kq)("",!0),e.minuteOverlay?((0,i.wg)(),(0,i.j4)(d,{key:2,"onUpdate:modelValue":t[8]||(t[8]=t=>e.$emit("update:minutes",t)),items:e.getMinutesGridItems(),onSelected:e.toggleMinuteOverlay,onToggle:e.toggleMinuteOverlay,"disabled-values":e.filters.times.minutes,"min-value":e.minTime.minutes,"max-value":e.maxTime.minutes},{"button-icon":(0,i.w5)((()=>[(0,i.Wm)(m)])),_:1},8,["items","onSelected","onToggle","disabled-values","min-value","max-value"])):(0,i.kq)("",!0)])};var Q=(0,i.aZ)({name:"TimePicker",emits:["update:hoursSingle","update:minutesSingle","update:hoursRange","update:minutesRange"],components:{CalendarIcon:o,ClockIcon:k,TimeInput:J},props:{hoursIncrement:{type:[Number,String],default:1},minutesIncrement:{type:[Number,String],default:1},is24:{type:Boolean,default:!0},hoursGridIncrement:{type:[String,Number],default:1},minutesGridIncrement:{type:[String,Number],default:5},hoursSingle:{type:Number,default:0},minutesSingle:{type:Number,default:0},hoursRange:{type:Array,default:()=>[0,0]},minutesRange:{type:Array,default:()=>[0,0]},range:{type:Boolean,default:!1},filters:{type:Object,default:()=>({})},minTime:{type:Object,default:()=>({})},maxTime:{type:Object,default:()=>({})}},setup(){const e=(0,r.iH)(!1);return{showTimePicker:e,toggleTimePicker:t=>{e.value=t}}}});const ee={key:0,class:"dp__overlay"},te={class:"dp__overlay_container"},ne={class:"dp__overlay_row"};Q.render=function(e,t,n,a,l,r){const u=(0,i.up)("ClockIcon"),s=(0,i.up)("TimeInput"),o=(0,i.up)("CalendarIcon");return(0,i.wg)(),(0,i.iD)("div",null,[(0,i._)("div",{class:"dp__button",onClick:t[0]||(t[0]=t=>e.toggleTimePicker(!0))},[(0,i.Wm)(u)]),e.showTimePicker?((0,i.wg)(),(0,i.iD)("div",ee,[(0,i._)("div",te,[(0,i._)("div",ne,[e.range?(0,i.kq)("",!0):((0,i.wg)(),(0,i.j4)(s,{key:0,is24:e.is24,hours:e.hoursSingle,minutes:e.minutesSingle,"onUpdate:hours":t[1]||(t[1]=t=>e.$emit("update:hoursSingle",t)),"onUpdate:minutes":t[2]||(t[2]=t=>e.$emit("update:minutesSingle",t)),"hours-grid-increment":e.hoursGridIncrement,"minutes-grid-increment":e.minutesGridIncrement,"hours-increment":e.hoursIncrement,"minutes-increment":e.minutesIncrement,filters:e.filters,"max-time":e.maxTime,"min-time":e.minTime},null,8,["is24","hours","minutes","hours-grid-increment","minutes-grid-increment","hours-increment","minutes-increment","filters","max-time","min-time"])),e.range?((0,i.wg)(),(0,i.iD)(i.HY,{key:1},[(0,i.Wm)(s,{hours:e.hoursRange[0],minutes:e.minutesRange[0],"onUpdate:hours":t[3]||(t[3]=t=>e.$emit("update:hoursRange",[t,e.hoursRange[1]])),"onUpdate:minutes":t[4]||(t[4]=t=>e.$emit("update:minutesRange",[t,e.minutesRange[1]])),is24:e.is24,"hours-grid-increment":e.hoursGridIncrement,"minutes-grid-increment":e.minutesGridIncrement,"hours-increment":e.hoursIncrement,"minutes-increment":e.minutesIncrement,filters:e.filters,"max-time":e.maxTime,"min-time":e.minTime},null,8,["hours","minutes","is24","hours-grid-increment","minutes-grid-increment","hours-increment","minutes-increment","filters","max-time","min-time"]),(0,i.Wm)(s,{hours:e.hoursRange[1],minutes:e.minutesRange[1],"onUpdate:hours":t[5]||(t[5]=t=>e.$emit("update:hoursRange",[e.hoursRange[0],t])),"onUpdate:minutes":t[6]||(t[6]=t=>e.$emit("update:minutesRange",[e.hoursRange[0],t])),is24:e.is24,"hours-grid-increment":e.hoursGridIncrement,"minutes-grid-increment":e.minutesGridIncrement,"hours-increment":e.hoursIncrement,"minutes-increment":e.minutesIncrement,filters:e.filters,"max-time":e.maxTime,"min-time":e.minTime},null,8,["hours","minutes","is24","hours-grid-increment","minutes-grid-increment","hours-increment","minutes-increment","filters","max-time","min-time"])],64)):(0,i.kq)("",!0)]),(0,i._)("div",{class:"dp__button",onClick:t[7]||(t[7]=t=>e.toggleTimePicker(!1))},[(0,i.Wm)(o)])])])):(0,i.kq)("",!0)])};var ae=(0,i.aZ)({name:"ActionRow",emits:["closePicker","selectDate"],props:{selectText:{type:String,default:"Select"},cancelText:{type:String,default:"Cancel"},singleModelValue:{type:Date,default:null},range:{type:Boolean,default:!1},rangeModelValue:{type:Array,default:null},previewFormat:{type:[Object,Function],default:()=>({})},locale:{type:String,default:"en-US"},is24:{type:Boolean,default:!0},enableTimePicker:{type:Boolean,default:!0},inline:{type:Boolean,default:!1}},setup(e){const t=(0,r.iH)(""),n=(0,r.Vh)(e,"singleModelValue"),a=(0,r.Vh)(e,"rangeModelValue");(0,i.YP)(n,(()=>{u()})),(0,i.YP)(a,(()=>{s()})),(0,i.bv)((()=>{(e.singleModelValue||e.rangeModelValue)&&l()}));const l=()=>{e.range?s():u()},u=()=>{e.singleModelValue&&("object"==typeof e.previewFormat?t.value=R(e.singleModelValue,e.locale,e.previewFormat,e.is24,e.enableTimePicker):t.value=e.previewFormat(e.singleModelValue))},s=()=>{e.rangeModelValue&&2===e.rangeModelValue.length&&("object"==typeof e.previewFormat?t.value=F(e.rangeModelValue,e.locale,e.previewFormat,e.is24,e.enableTimePicker,!0):t.value=e.previewFormat(e.rangeModelValue))};return{previewValue:t}}});const le={class:"dp__action_row"},ie={class:"dp__selection_preview"},re={class:"dp__action_buttons"};ae.render=function(e,t,n,a,l,r){return(0,i.wg)(),(0,i.iD)("div",le,[(0,i._)("div",ie,[Array.isArray(e.previewValue)?(0,i.kq)("",!0):((0,i.wg)(),(0,i.iD)(i.HY,{key:0},[(0,i.Uk)((0,u.zw)(e.previewValue),1)],64)),Array.isArray(e.previewValue)?((0,i.wg)(),(0,i.iD)(i.HY,{key:1},[(0,i._)("div",null,(0,u.zw)(e.previewValue[0]),1),(0,i._)("div",null,(0,u.zw)(e.previewValue[1]),1)],64)):(0,i.kq)("",!0)]),(0,i._)("div",re,[e.inline?(0,i.kq)("",!0):((0,i.wg)(),(0,i.iD)("span",{key:0,class:"dp__action dp__cancel",onClick:t[0]||(t[0]=t=>e.$emit("closePicker"))},(0,u.zw)(e.cancelText),1)),(0,i._)("span",{class:"dp__action dp__select",onClick:t[1]||(t[1]=t=>e.$emit("selectDate"))},(0,u.zw)(e.selectText),1)])])};var ue=(0,i.aZ)({name:"Calendar",components:{MonthYearInput:W,TimePicker:Q,ActionRow:ae},emits:["update:rangeModelValue","update:singleModelValue","closePicker","selectDate"],props:{months:{type:Array,default:()=>[]},weekStart:{type:[Number,String],default:1},weekNumbers:{type:Boolean,default:!1},disableMonthYearSelect:{type:Boolean,default:!1},calendarClassName:{type:String,default:null},yearRange:{type:Array,default:()=>[]},startDate:{type:Date,default:null},calendarCellClassName:{type:String,default:null},enableTimePicker:{type:Boolean,default:!1},is24:{type:Boolean,default:!0},hoursIncrement:{type:[String,Number],default:1},minutesIncrement:{type:[String,Number],default:1},hoursGridIncrement:{type:[String,Number],default:1},minutesGridIncrement:{type:[String,Number],default:5},rangeModelValue:{type:Array,default:()=>[]},singleModelValue:{type:Date,default:null},range:{type:Boolean,default:!1},autoApply:{type:Boolean,default:!1},selectText:{type:String,default:"Select"},cancelText:{type:String,default:"Cancel"},previewFormat:{type:[Object,Function],default:null},locale:{type:String,default:"en-US"},weekNumName:{type:String,default:"W"},minDate:{type:[Date,String],default:null},maxDate:{type:[Date,String],default:null},disabledDates:{type:Array,default:()=>[]},filters:{type:Object,default:()=>({})},minTime:{type:Object,default:()=>({})},maxTime:{type:Object,default:()=>({})},inline:{type:Boolean,default:!1}},setup(e,{emit:t}){const n=(0,r.iH)(),a=(0,r.iH)(0),l=(0,r.iH)([0,0]),u=(0,r.iH)(0),s=(0,r.iH)([0,0]),o=(0,r.iH)(0),m=(0,r.iH)(0),d=(0,r.iH)(0),c=(0,r.iH)(new Date),p=(0,r.iH)(),g=(0,r.Vh)(e,"startDate"),v=(0,r.Vh)(e,"rangeModelValue"),y=(0,r.Vh)(e,"singleModelValue");(0,i.YP)(g,(()=>{g.value&&I(e.startDate)})),(0,i.YP)(a,(()=>{e.singleModelValue&&C()})),(0,i.YP)(u,(()=>{e.singleModelValue&&C()})),(0,i.YP)(l,(()=>{2===e.rangeModelValue.length&&T()})),(0,i.YP)(s,(()=>{2===e.rangeModelValue.length&&T()})),(0,i.bv)((()=>{e.startDate?I(e.startDate):I(new Date),n.value=((e,t)=>{const n=[1,2,3,4,5,6,7].map((t=>new Intl.DateTimeFormat(e,{weekday:"short",timeZone:"UTC"}).format(new Date(`2017-01-0${t}T00:00:00+00:00`)).slice(0,2))),a=n.slice(0,t),l=n.slice(t+1,n.length);return[n[t]].concat(...l).concat(...a)})(e.locale,+e.weekStart);const t=new Date;y.value?(a.value=y.value.getHours(),u.value=y.value.getMinutes()):(a.value=t.getHours(),u.value=t.getMinutes()),v.value&&v.value[0]&&v.value[1]?(l.value=[v.value[0].getHours(),v.value[1].getHours()],s.value=[v.value[0].getMinutes(),v.value[1].getMinutes()]):(l.value=[t.getHours(),t.getHours()],s.value=[t.getMinutes(),t.getMinutes()])}));const h=((e,t,n)=>(0,r.Fl)((()=>((e,t,n)=>{const a=[],l=new Date(t,e,1),i=new Date(t,e+1,0);let r=((e,t)=>{const n=new Date(JSON.parse(JSON.stringify(e))),a=n.getDay(),l=Math.abs(t-a);return 0!==l?new Date(n.setDate(n.getDate()-l)):n})(l,n);const u=((e,t)=>Math.ceil((e.getDay()+t.getDate()-1)/7))(l,i);for(let t=0;t{const t=[];for(let n=e.yearRange[0];n<=e.yearRange[1];n++)t.push({value:n,text:`${n}`});return t})),f=(0,r.Fl)((()=>({dp__calendar:!0,[e.calendarClassName]:!!e.calendarClassName}))),w=t=>{const n=!!e.maxDate&&S(t)>S(new Date(e.maxDate)),a=!!e.minDate&&S(t)S(new Date(e))===S(t)));return n||a||l},k=(0,r.Fl)((()=>h.value.map((t=>({...t,days:t.days.map((t=>{const n=w(t.value);return t.classData={dp__cell_offset:!t.current,dp__pointer:!n,dp__active_date:b(t),dp__date_hover:!n&&!b(t),dp__range_between:!(!e.range||n||b(t))&&M(t),dp__today:D(t.value,c.value),dp__cell_disabled:n,[e.calendarCellClassName]:!!e.calendarCellClassName},t}))}))))),D=(e,t)=>{if(e&&t){const[n,a]=[e.getDate(),t.getDate()],[l,i]=[e.getMonth(),t.getMonth()],[r,u]=[e.getFullYear(),t.getFullYear()];return n===a&&l===i&&r===u}return!1},b=t=>e.range?D(t.value,v.value&&v.value[0]?new Date(JSON.parse(JSON.stringify(v.value[0]))):null)||D(t.value,v.value&&v.value[1]?new Date(JSON.parse(JSON.stringify(v.value[1]))):null):D(t.value,y.value),S=e=>{const t=new Date(e);return t.setHours(0,0),t.getTime()},M=e=>v.value&&v.value[0]&&v.value[1]?S(e.value)>S(v.value[0])&&S(e.value)S(v.value[0])&&S(e.value)S(p.value)),I=e=>{o.value=e.getMonth(),m.value=e.getFullYear(),d.value=e.getDate()},C=()=>{const n=new Date(JSON.parse(JSON.stringify(e.singleModelValue)));n.setHours(a.value,u.value),t("update:singleModelValue",n)},T=()=>{const[e,n]=(()=>{const e=JSON.parse(JSON.stringify(v.value));return[new Date(e[0]),new Date(e[1])]})();e.setHours(l.value[0],s.value[0]),n.setHours(l.value[1],s.value[1]),t("update:rangeModelValue",[e,n])};return{mappedDates:k,years:_,calendarClass:f,weekDays:n,selectDate:n=>{if(!w(n.value))if(e.range){let e=v.value.slice();2===e.length&&(e=[]),e[0]?n.value.getTime(){const t=e.find((e=>e.current));if(t){const e=new Date(t.value),n=new Date(e.getFullYear(),0,1),a=(e.getTime()-n.getTime())/864e5;return Math.ceil((a+n.getDay()+1)/7)}return""},setHoverDate:e=>{p.value=e.value},dates:h,month:o,year:m,day:d,hoursSingle:a,minutesSingle:u,hoursRange:l,minutesRange:s}}});const se={class:"dp__calendar_content_wrap"},oe={class:"dp__calendar_tb"},me={class:"dp__calendar_days"},de={key:0,class:"dp__calendar_header_cell"},ce={key:0,class:"dp__cell dp__week_num"},pe=["onClick","onMouseover"];ue.render=function(e,t,n,a,l,r){const s=(0,i.up)("MonthYearInput"),o=(0,i.up)("TimePicker"),m=(0,i.up)("ActionRow");return(0,i.wg)(),(0,i.iD)("div",{class:(0,u.C_)(e.calendarClass)},[(0,i._)("div",se,[e.disableMonthYearSelect?(0,i.kq)("",!0):((0,i.wg)(),(0,i.j4)(s,{key:0,months:e.months,month:e.month,"onUpdate:month":t[0]||(t[0]=t=>e.month=t),year:e.year,"onUpdate:year":t[1]||(t[1]=t=>e.year=t),years:e.years,filters:e.filters},null,8,["months","month","year","years","filters"])),(0,i._)("table",oe,[(0,i._)("thead",null,[(0,i._)("tr",me,[e.weekNumbers?((0,i.wg)(),(0,i.iD)("th",de,(0,u.zw)(e.weekNumName),1)):(0,i.kq)("",!0),((0,i.wg)(!0),(0,i.iD)(i.HY,null,(0,i.Ko)(e.weekDays,((e,t)=>((0,i.wg)(),(0,i.iD)("th",{class:"dp__calendar_header_cell",key:t},(0,u.zw)(e),1)))),128))])]),(0,i._)("tbody",null,[((0,i.wg)(!0),(0,i.iD)(i.HY,null,(0,i.Ko)(e.mappedDates,((t,n)=>((0,i.wg)(),(0,i.iD)("tr",{key:n},[e.weekNumbers?((0,i.wg)(),(0,i.iD)("td",ce,(0,u.zw)(e.getWeekDay(t.days)),1)):(0,i.kq)("",!0),((0,i.wg)(!0),(0,i.iD)(i.HY,null,(0,i.Ko)(t.days,((t,a)=>((0,i.wg)(),(0,i.iD)("td",{class:"dp__cell",key:a+n,onClick:n=>e.selectDate(t),onMouseover:n=>e.setHoverDate(t)},[(0,i._)("div",{class:(0,u.C_)(["dp__cell_inner",t.classData])},(0,u.zw)(t.text),3)],40,pe)))),128))])))),128))])]),e.enableTimePicker?((0,i.wg)(),(0,i.j4)(o,{key:1,is24:e.is24,"hours-increment":e.hoursIncrement,"minutes-increment":e.minutesIncrement,"hours-grid-increment":e.hoursGridIncrement,"minutes-grid-increment":e.minutesGridIncrement,range:e.range,filters:e.filters,"min-time":e.minTime,"max-time":e.maxTime,hoursSingle:e.hoursSingle,"onUpdate:hoursSingle":t[2]||(t[2]=t=>e.hoursSingle=t),minutesSingle:e.minutesSingle,"onUpdate:minutesSingle":t[3]||(t[3]=t=>e.minutesSingle=t),hoursRange:e.hoursRange,"onUpdate:hoursRange":t[4]||(t[4]=t=>e.hoursRange=t),minutesRange:e.minutesRange,"onUpdate:minutesRange":t[5]||(t[5]=t=>e.minutesRange=t)},null,8,["is24","hours-increment","minutes-increment","hours-grid-increment","minutes-grid-increment","range","filters","min-time","max-time","hoursSingle","minutesSingle","hoursRange","minutesRange"])):(0,i.kq)("",!0)]),e.autoApply?(0,i.kq)("",!0):((0,i.wg)(),(0,i.j4)(m,{key:0,"range-model-value":e.rangeModelValue,"single-model-value":e.singleModelValue,range:e.range,"select-text":e.selectText,"cancel-text":e.cancelText,"preview-format":e.previewFormat,locale:e.locale,is24:e.is24,"enable-time-picker":e.enableTimePicker,inline:e.inline,onClosePicker:t[6]||(t[6]=t=>e.$emit("closePicker")),onSelectDate:t[7]||(t[7]=t=>e.$emit("selectDate"))},null,8,["range-model-value","single-model-value","range","select-text","cancel-text","preview-format","locale","is24","enable-time-picker","inline"]))],2)};var ge=(0,i.aZ)({name:"DatepickerMenu",components:{Calendar:ue},emits:["update:singleModelValue","update:rangeModelValue","closePicker","selectDate","dpOpen"],props:{uid:{type:String,default:"dp"},weekNumbers:{type:Boolean,default:!1},weekStart:{type:[Number,String],default:1},disableMonthYearSelect:{type:Boolean,default:!1},menuClassName:{type:String,default:null},calendarClassName:{type:String,default:null},yearRange:{type:Array,default:()=>[]},singleModelValue:{type:[String,Date],default:null},rangeModelValue:{type:Array,default:()=>[]},range:{type:Boolean,default:!1},calendarCellClassName:{type:String,default:null},enableTimePicker:{type:Boolean,default:!1},is24:{type:Boolean,default:!0},hoursIncrement:{type:[String,Number],default:1},minutesIncrement:{type:[String,Number],default:1},hoursGridIncrement:{type:[String,Number],default:1},minutesGridIncrement:{type:[String,Number],default:5},minDate:{type:[Date,String],default:null},maxDate:{type:[Date,String],default:null},autoApply:{type:Boolean,default:!1},selectText:{type:String,default:"Select"},cancelText:{type:String,default:"Cancel"},previewFormat:{type:[Object,Function],default:null},locale:{type:String,default:"en-US"},weekNumName:{type:String,default:"W"},disabledDates:{type:Array,default:()=>[]},filters:{type:Object,default:()=>({})},minTime:{type:Object,default:()=>({})},maxTime:{type:Object,default:()=>({})},inline:{type:Boolean,default:!1},openOnTop:{type:Boolean,default:!1}},setup(e,{emit:t}){const n=(0,r.iH)({});(0,i.bv)((()=>{n.value=Object.assign({months:[],years:[],times:{hours:[],minutes:[]}},e.filters),(0,i.Y3)((()=>t("dpOpen")))}));const a=(0,r.Fl)((()=>(e=>{const t=new Intl.DateTimeFormat(e,{month:"short",timeZone:"UTC"});return[1,2,3,4,5,6,7,8,9,10,11,12].map((e=>new Date(`2017-${e<10?`0${e}`:e}-01T00:00:00+00:00`))).map((e=>t.format(e).slice(0,3)))})(e.locale).map(((e,t)=>({text:e,value:t}))))),l=(0,r.Fl)((()=>({[e.menuClassName]:!!e.menuClassName,dp__flex_display:e.inline}))),u=(0,r.Fl)((()=>e.openOnTop?"dp__arrow_bottom":"dp__arrow_top")),s=j(e,t,"rangeModelValue"),o=j(e,t,"singleModelValue"),m=(0,r.Fl)((()=>e.range?e.rangeModelValue&&e.rangeModelValue[0]?new Date(e.rangeModelValue[0]):new Date:e.singleModelValue?new Date(e.singleModelValue):new Date));return{assignedFilter:n,firstDate:m,rangeDate:s,singleDate:o,dpMenuClass:l,mappedMonths:a,arrowClass:u}}});const ve=["id"];ge.render=function(e,t,n,a,l,r){const s=(0,i.up)("Calendar");return(0,i.wg)(),(0,i.iD)("div",{class:(0,u.C_)(["dp__menu",e.dpMenuClass]),id:`dp__menu_${e.uid}`},[e.inline?(0,i.kq)("",!0):((0,i.wg)(),(0,i.iD)("div",{key:0,class:(0,u.C_)(e.arrowClass)},null,2)),(0,i.Wm)(s,{months:e.mappedMonths,"week-numbers":e.weekNumbers,"week-start":e.weekStart,"disable-month-year-select":e.disableMonthYearSelect,"calendar-class-name":e.calendarClassName,is24:e.is24,range:e.range,"year-range":e.yearRange,"start-date":e.firstDate,"calendar-cell-class-name":e.calendarCellClassName,"enable-time-picker":e.enableTimePicker,"hours-increment":e.hoursIncrement,"minutes-increment":e.minutesIncrement,"hours-grid-increment":e.hoursGridIncrement,"minutes-grid-increment":e.minutesGridIncrement,"auto-apply":e.autoApply,locale:e.locale,"week-num-name":e.weekNumName,"preview-format":e.previewFormat,"min-date":e.minDate,"max-date":e.maxDate,"disabled-dates":e.disabledDates,filters:e.assignedFilter,"min-time":e.minTime,"max-time":e.maxTime,"select-text":e.selectText,"cancel-text":e.cancelText,inline:e.inline,onSelectRangeDate:t[0]||(t[0]=t=>e.$emit("update:rangeModelValue",t)),onClosePicker:t[1]||(t[1]=t=>e.$emit("closePicker")),onSelectDate:t[2]||(t[2]=t=>e.$emit("selectDate")),rangeModelValue:e.rangeDate,"onUpdate:rangeModelValue":t[3]||(t[3]=t=>e.rangeDate=t),singleModelValue:e.singleDate,"onUpdate:singleModelValue":t[4]||(t[4]=t=>e.singleDate=t)},null,8,["months","week-numbers","week-start","disable-month-year-select","calendar-class-name","is24","range","year-range","start-date","calendar-cell-class-name","enable-time-picker","hours-increment","minutes-increment","hours-grid-increment","minutes-grid-increment","auto-apply","locale","week-num-name","preview-format","min-date","max-date","disabled-dates","filters","min-time","max-time","select-text","cancel-text","inline","rangeModelValue","singleModelValue"])],10,ve)};var ye=(0,i.aZ)({name:"Vue3DatePicker",emits:["update:modelValue"],directives:{clickOutsideDirective:{beforeMount(e,t){const n=t.instance,a=Object.keys(t.modifiers);e.clickOutsideEvent=l=>{const i=l.composedPath?l.composedPath():void 0;n&&i&&!i.includes(n.$el)&&(a.length>0?a.some((e=>i.some((t=>{if(t.className&&"string"==typeof(null==t?void 0:t.className))return t.className.includes(e)}))))||t.value(l,e):n.$el.contains(l.target)||t.value(l,e))},document.body.addEventListener("click",e.clickOutsideEvent,!1)},unmounted(e){document.body.removeEventListener("click",e.clickOutsideEvent)}}},components:{DatepickerInput:x,DatepickerMenu:ge},props:{uid:{type:String,default:"dp"},is24:{type:Boolean,default:!0},enableTimePicker:{type:Boolean,default:!0},locale:{type:String,default:"en-US"},range:{type:Boolean,default:!1},modelValue:{type:[String,Date,Array],default:null},position:{type:String,default:a.center},placeholder:{type:String,default:null},weekNumbers:{type:Boolean,default:!1},dark:{type:Boolean,default:!1},hoursIncrement:{type:[String,Number],default:1},minutesIncrement:{type:[String,Number],default:1},hoursGridIncrement:{type:[String,Number],default:1},minutesGridIncrement:{type:[String,Number],default:5},minDate:{type:[Date,String],default:null},maxDate:{type:[Date,String],default:null},minTime:{type:Object,default:()=>({})},maxTime:{type:Object,default:()=>({})},weekStart:{type:[String,Number],default:1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},weekNumName:{type:String,default:"W"},format:{type:[Object,Function],default:()=>({})},previewFormat:{type:[Object,Function],default:()=>({})},inputClassName:{type:String,default:null},menuClassName:{type:String,default:null},calendarClassName:{type:String,default:null},calendarCellClassName:{type:String,default:null},hideInputIcon:{type:Boolean,default:!1},state:{type:Boolean,default:null},clearable:{type:Boolean,default:!0},closeOnScroll:{type:Boolean,default:!1},autoApply:{type:Boolean,default:!1},filters:{type:Object,default:()=>({})},disableMonthYearSelect:{type:Boolean,default:!1},yearRange:{type:Array,default:()=>[1970,2100]},disabledDates:{type:Array,default:()=>[]},inline:{type:Boolean,default:!1},selectText:{type:String,default:"Select"},cancelText:{type:String,default:"Cancel"},autoPosition:{type:Boolean,default:!0}},setup(e,{emit:t}){const n=(0,r.iH)(!1),l=(0,r.iH)({top:"0",left:"0",transform:"none"}),u=(0,r.iH)(""),s=(0,r.iH)(),o=(0,r.iH)(),m=(0,r.iH)(!1),d=(0,r.iH)(!1),c=(0,r.Vh)(e,"modelValue");(0,i.YP)(s,(()=>{h(e.autoApply)})),(0,i.YP)(o,(()=>{_(e.autoApply)})),(0,i.YP)(c,(()=>{y.value&&f()})),(0,i.bv)((()=>{f(),window.addEventListener("scroll",w),window.addEventListener("resize",k),e.inline&&(n.value=!0)})),(0,i.Ah)((()=>{window.removeEventListener("scroll",w),window.removeEventListener("resize",k)}));const p=(0,r.Fl)((()=>({dp__main:!0,dp__theme_dark:e.dark,dp__theme_light:!e.dark,dp__flex_display:e.inline}))),g=(0,r.Fl)((()=>e.dark?"dp__theme_dark":"dp__theme_light")),v=(0,r.Fl)((()=>!e.range)),y=(0,r.Fl)((()=>{const t=e.range?JSON.stringify(o.value):JSON.stringify(s.value);return JSON.stringify(c.value)!==t})),h=(n=!1)=>{if(s.value&&n){const t=new Date(s.value);"object"==typeof e.format?u.value=R(t,e.locale,e.format,e.is24,e.enableTimePicker):u.value=e.format(t)}e.autoApply&&(t("update:modelValue",s.value),M())},_=(n=!1)=>{if(o.value&&2===o.value.length){const a=[new Date(o.value[0]),new Date(o.value[1])];n&&("object"==typeof e.format?u.value=F(a,e.locale,e.format,e.is24,e.enableTimePicker):u.value=e.format(a)),e.autoApply&&(t("update:modelValue",o.value),M())}},f=()=>{e.modelValue?e.range?Array.isArray(e.modelValue)?(o.value=JSON.parse(JSON.stringify(e.modelValue)).map((e=>new Date(e))),_(!0)):o.value=[]:(s.value=new Date(e.modelValue),h(!0)):(o.value=[],s.value=null)},w=()=>{e.closeOnScroll?M():e.autoPosition?D():window.removeEventListener("scroll",w)},k=()=>{D()},D=(t=!0)=>{const n=document.getElementById(`dp__input_${e.uid}`);if(n){const{left:i,width:r,height:u}=n.getBoundingClientRect(),s={top:`${u+n.offsetTop+10}px`,left:"",transform:"none"};e.position===a.left&&(s.left=`${i}px`),e.position===a.right&&(s.left=`${i+r}px`,s.transform="translateX(-100%)"),e.position===a.center&&(s.left=`${i+r/2}px`,s.transform="translateX(-50%)"),l.value=s,t&&b()}},b=()=>{const t=document.getElementById(`dp__input_${e.uid}`);if(t){const{height:n,top:a}=t.getBoundingClientRect(),i=window.innerHeight-a-n,r=document.getElementById(`dp__menu_${e.uid}`);if(r){const{height:e}=r.getBoundingClientRect();e+n>i?(l.value.top=t.offsetTop-e-12+"px",m.value=!0):(D(!1),m.value=!1)}}},S=()=>{s.value=null,o.value=[]},M=()=>{e.inline||(n.value&&(n.value=!1),S())};return{singleModelValue:s,rangeModelValue:o,menuPosition:l,internalValue:u,isOpen:n,isSingle:v,theme:g,wrapperClass:p,openOnTop:m,clearValue:()=>{d.value=!0,u.value="",S(),t("update:modelValue",null)},openMenu:()=>{e.disabled||e.readonly||(d.value||(D(),n.value=!n.value,n.value||S()),d.value=!1,f())},closeMenu:M,selectDate:()=>{e.range?(_(!0),t("update:modelValue",o.value)):(h(!0),t("update:modelValue",s.value)),M()},recalculatePosition:b}}});ye.render=function(e,t,n,a,l,r){const s=(0,i.up)("DatepickerInput"),o=(0,i.up)("DatepickerMenu"),m=(0,i.Q2)("click-outside-directive");return(0,i.wg)(),(0,i.iD)("div",{class:(0,u.C_)(e.wrapperClass)},[(0,i.Wm)(s,{"internal-value":e.internalValue,placeholder:e.placeholder,"hide-input-icon":e.hideInputIcon,readonly:e.readonly,disabled:e.disabled,"input-class-name":e.inputClassName,clearable:e.clearable,state:e.state,inline:e.inline,onClear:e.clearValue,onOpen:e.openMenu,id:`dp__input_${e.uid}`},(0,i.Nv)({_:2},[e.$slots.trigger?{name:"trigger",fn:(0,i.w5)((()=>[(0,i.WI)(e.$slots,"trigger")]))}:void 0,e.$slots["input-icon"]?{name:"input-icon",fn:(0,i.w5)((()=>[(0,i.WI)(e.$slots,"input-icon")]))}:void 0,e.$slots["clear-icon"]?{name:"clear-icon",fn:(0,i.w5)((()=>[(0,i.WI)(e.$slots,"clear-icon")]))}:void 0]),1032,["internal-value","placeholder","hide-input-icon","readonly","disabled","input-class-name","clearable","state","inline","onClear","onOpen","id"]),((0,i.wg)(),(0,i.j4)(i.lR,{to:"body",disabled:e.inline},[e.isOpen?(0,i.wy)(((0,i.wg)(),(0,i.j4)(o,{key:0,class:(0,u.C_)(e.theme),uid:e.uid,"open-on-top":e.openOnTop,"enable-time-picker":e.enableTimePicker,"week-numbers":e.weekNumbers,"week-start":e.weekStart,"disable-month-year-select":e.disableMonthYearSelect,"hours-increment":e.hoursIncrement,"minutes-increment":e.minutesIncrement,"menu-class-name":e.menuClassName,"year-range":e.yearRange,is24:e.is24,"calendar-cell-class-name":e.calendarCellClassName,"hours-grid-increment":e.hoursGridIncrement,"minutes-grid-increment":e.minutesGridIncrement,"min-date":e.minDate,"max-date":e.maxDate,style:(0,u.j5)(e.menuPosition),range:e.range,"auto-apply":e.autoApply,locale:e.locale,"week-num-name":e.weekNumName,"preview-format":e.previewFormat,"disabled-dates":e.disabledDates,filters:e.filters,"min-time":e.minTime,"max-time":e.maxTime,"select-text":e.selectText,"cancel-text":e.cancelText,inline:e.inline,singleModelValue:e.singleModelValue,"onUpdate:singleModelValue":t[0]||(t[0]=t=>e.singleModelValue=t),rangeModelValue:e.rangeModelValue,"onUpdate:rangeModelValue":t[1]||(t[1]=t=>e.rangeModelValue=t),onClosePicker:e.closeMenu,onSelectDate:e.selectDate,onDpOpen:e.recalculatePosition},null,8,["class","uid","open-on-top","enable-time-picker","week-numbers","week-start","disable-month-year-select","hours-increment","minutes-increment","menu-class-name","year-range","is24","calendar-cell-class-name","hours-grid-increment","minutes-grid-increment","min-date","max-date","style","range","auto-apply","locale","week-num-name","preview-format","disabled-dates","filters","min-time","max-time","select-text","cancel-text","inline","singleModelValue","rangeModelValue","onClosePicker","onSelectDate","onDpOpen"])),[[m,e.closeMenu,void 0,{dp__menu:!0}]]):(0,i.kq)("",!0)],8,["disabled"]))],2)};var he=(()=>{const e=ye;return e.install=t=>{t.component("Vue3DatePicker",e)},e})()}}]); \ No newline at end of file diff --git a/docs/assets/js/app.4100fab0.js b/docs/assets/js/app.4100fab0.js deleted file mode 100644 index d495abc..0000000 --- a/docs/assets/js/app.4100fab0.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[143],{6877:(e,t,n)=>{n.d(t,{g:()=>s});var i=n(2009),a=n(6971),o=n(1598),d=n(6252);const s=[i.Z,a.Z,o.Z,({app:e})=>{e.component("DarkDemo",(0,d.RC)((()=>Promise.all([n.e(858),n.e(855),n.e(713)]).then(n.bind(n,1713))))),e.component("Demo",(0,d.RC)((()=>Promise.all([n.e(858),n.e(888),n.e(855),n.e(330)]).then(n.bind(n,7330))))),e.component("DemoSlots",(0,d.RC)((()=>Promise.all([n.e(858),n.e(855),n.e(657)]).then(n.bind(n,8657))))),e.component("EmptyDemo",(0,d.RC)((()=>Promise.all([n.e(858),n.e(855),n.e(273)]).then(n.bind(n,9273))))),e.component("FormatDemo",(0,d.RC)((()=>Promise.all([n.e(858),n.e(855),n.e(758)]).then(n.bind(n,9758))))),e.component("PreviewFormatDemo",(0,d.RC)((()=>Promise.all([n.e(858),n.e(855),n.e(373)]).then(n.bind(n,373)))))}]},9947:(e,t,n)=>{n.d(t,{p:()=>i});const i=[n(3051).Z]},4611:(e,t,n)=>{n.d(t,{l:()=>d});var i=n(8866),a=n(1263),o=n(6243);const d=[i.Z,a.Z,o.Z]},4150:(e,t,n)=>{n.d(t,{Z:()=>a});var i=n(6252);const a={404:(0,i.RC)((()=>n.e(491).then(n.bind(n,8491)))),Layout:(0,i.RC)((()=>n.e(554).then(n.bind(n,7554))))}},6056:(e,t,n)=>{n.d(t,{b:()=>a});var i=n(6252);const a={"v-8daa1a0e":(0,i.RC)((()=>n.e(509).then(n.bind(n,6216)))),"v-08a5d2dc":(0,i.RC)((()=>n.e(192).then(n.bind(n,553)))),"v-55146a0d":(0,i.RC)((()=>n.e(278).then(n.bind(n,28)))),"v-59de75e8":(0,i.RC)((()=>n.e(260).then(n.bind(n,4356)))),"v-216a76f4":(0,i.RC)((()=>n.e(15).then(n.bind(n,4326)))),"v-d446beac":(0,i.RC)((()=>n.e(150).then(n.bind(n,6100)))),"v-241ec4c4":(0,i.RC)((()=>n.e(267).then(n.bind(n,3316)))),"v-3706649a":(0,i.RC)((()=>n.e(88).then(n.bind(n,3881))))}},9706:(e,t,n)=>{n.d(t,{T:()=>i});const i={"v-8daa1a0e":()=>n.e(509).then(n.bind(n,6464)).then((({data:e})=>e)),"v-08a5d2dc":()=>n.e(192).then(n.bind(n,220)).then((({data:e})=>e)),"v-55146a0d":()=>n.e(278).then(n.bind(n,7873)).then((({data:e})=>e)),"v-59de75e8":()=>n.e(260).then(n.bind(n,3744)).then((({data:e})=>e)),"v-216a76f4":()=>n.e(15).then(n.bind(n,1513)).then((({data:e})=>e)),"v-d446beac":()=>n.e(150).then(n.bind(n,4453)).then((({data:e})=>e)),"v-241ec4c4":()=>n.e(267).then(n.bind(n,5952)).then((({data:e})=>e)),"v-3706649a":()=>n.e(88).then(n.bind(n,1801)).then((({data:e})=>e))}},4634:(e,t,n)=>{n.d(t,{g:()=>a});var i=n(4802);const a=[["v-8daa1a0e","/","vue3-date-time-picker",["/index.html","/README.md"]],["v-08a5d2dc","/installation/","Installation",["/installation/index.html","/installation/README.md"]],["v-55146a0d","/api/props/","Props",["/api/props/index.html","/api/props/README.md"]],["v-59de75e8","/api/slots/","Slots",["/api/slots/index.html","/api/slots/README.md"]],["v-216a76f4","/customization/props/","Customization props",["/customization/props/index.html","/customization/props/README.md"]],["v-d446beac","/customization/scss/","Scss",["/customization/scss/index.html","/customization/scss/README.md"]],["v-241ec4c4","/customization/theming/","Theming",["/customization/theming/index.html","/customization/theming/README.md"]],["v-3706649a","/404.html","",["/404"]]].reduce(((e,[t,n,a,o])=>(e.push({name:t,path:n,component:i.Y,meta:{title:a}},...o.map((e=>({path:e,redirect:n})))),e)),[{name:"404",path:"/:catchAll(.*)",component:i.Y}])},5220:(e,t,n)=>{n.d(t,{H:()=>i});const i={base:"/vue3-date-time-picker/",lang:"en-US",title:"vue3-date-time-picker",description:"The most complete date picker solution for Vue 3",head:[["link",{rel:"icon",href:"/vue3-date-time-picker/logo.png"}]],locales:{}}},2232:(e,t,n)=>{n.d(t,{f:()=>i});const i={logo:"/logo.png",contributors:!1,navbar:[{text:"Home",link:"/"},{text:"GitHub",link:"https://github.com/Vuepic/vue3-date-time-picker"}],sidebar:[{text:"Getting Started",children:[{text:"Installation",link:"/installation/"}]},{text:"API",children:[{text:"Props",link:"/api/props/"},{text:"Slots",link:"/api/slots/"}]},{text:"Customization",children:[{text:"Theming",link:"/customization/theming/"},{text:"Scss",link:"/customization/scss/"},{text:"Props",link:"/customization/props/"}]}],locales:{"/":{selectLanguageName:"English"}},darkMode:!0,repo:null,selectLanguageText:"Languages",selectLanguageAriaLabel:"Select language",sidebarDepth:2,editLink:!0,editLinkText:"Edit this page",lastUpdated:!0,lastUpdatedText:"Last Updated",contributorsText:"Contributors",notFound:["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],backToHome:"Take me home",openInNewWindow:"open in new window",toggleDarkMode:"toggle dark mode",toggleSidebar:"toggle sidebar"}}},e=>{e.O(0,[460,812],(()=>(8463,e(e.s=8463)))),e.O()}]); \ No newline at end of file diff --git a/docs/assets/js/app.85a89ff3.js b/docs/assets/js/app.85a89ff3.js new file mode 100644 index 0000000..6d84b69 --- /dev/null +++ b/docs/assets/js/app.85a89ff3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[143],{6877:(e,t,n)=>{n.d(t,{g:()=>s});var i=n(2009),a=n(6971),o=n(1598),d=n(6252);const s=[i.Z,a.Z,o.Z,({app:e})=>{e.component("DarkDemo",(0,d.RC)((()=>Promise.all([n.e(858),n.e(855),n.e(713)]).then(n.bind(n,1713))))),e.component("Demo",(0,d.RC)((()=>Promise.all([n.e(858),n.e(348),n.e(855),n.e(134)]).then(n.bind(n,1134))))),e.component("DemoSlots",(0,d.RC)((()=>Promise.all([n.e(858),n.e(855),n.e(657)]).then(n.bind(n,8657))))),e.component("EmptyDemo",(0,d.RC)((()=>Promise.all([n.e(858),n.e(855),n.e(273)]).then(n.bind(n,9273))))),e.component("FormatDemo",(0,d.RC)((()=>Promise.all([n.e(858),n.e(855),n.e(758)]).then(n.bind(n,9758))))),e.component("PreviewFormatDemo",(0,d.RC)((()=>Promise.all([n.e(858),n.e(855),n.e(373)]).then(n.bind(n,373)))))}]},9947:(e,t,n)=>{n.d(t,{p:()=>i});const i=[n(3051).Z]},4611:(e,t,n)=>{n.d(t,{l:()=>d});var i=n(8866),a=n(1263),o=n(6243);const d=[i.Z,a.Z,o.Z]},4150:(e,t,n)=>{n.d(t,{Z:()=>a});var i=n(6252);const a={404:(0,i.RC)((()=>n.e(491).then(n.bind(n,8491)))),Layout:(0,i.RC)((()=>n.e(554).then(n.bind(n,7554))))}},6056:(e,t,n)=>{n.d(t,{b:()=>a});var i=n(6252);const a={"v-8daa1a0e":(0,i.RC)((()=>n.e(509).then(n.bind(n,6216)))),"v-08a5d2dc":(0,i.RC)((()=>n.e(192).then(n.bind(n,8719)))),"v-55146a0d":(0,i.RC)((()=>n.e(278).then(n.bind(n,2740)))),"v-59de75e8":(0,i.RC)((()=>n.e(260).then(n.bind(n,4356)))),"v-216a76f4":(0,i.RC)((()=>n.e(15).then(n.bind(n,4326)))),"v-d446beac":(0,i.RC)((()=>n.e(150).then(n.bind(n,6100)))),"v-241ec4c4":(0,i.RC)((()=>n.e(267).then(n.bind(n,3316)))),"v-3706649a":(0,i.RC)((()=>n.e(88).then(n.bind(n,3881))))}},9706:(e,t,n)=>{n.d(t,{T:()=>i});const i={"v-8daa1a0e":()=>n.e(509).then(n.bind(n,6464)).then((({data:e})=>e)),"v-08a5d2dc":()=>n.e(192).then(n.bind(n,220)).then((({data:e})=>e)),"v-55146a0d":()=>n.e(278).then(n.bind(n,7873)).then((({data:e})=>e)),"v-59de75e8":()=>n.e(260).then(n.bind(n,3744)).then((({data:e})=>e)),"v-216a76f4":()=>n.e(15).then(n.bind(n,1513)).then((({data:e})=>e)),"v-d446beac":()=>n.e(150).then(n.bind(n,4453)).then((({data:e})=>e)),"v-241ec4c4":()=>n.e(267).then(n.bind(n,5952)).then((({data:e})=>e)),"v-3706649a":()=>n.e(88).then(n.bind(n,1801)).then((({data:e})=>e))}},4634:(e,t,n)=>{n.d(t,{g:()=>a});var i=n(4802);const a=[["v-8daa1a0e","/","vue3-date-time-picker",["/index.html","/README.md"]],["v-08a5d2dc","/installation/","Installation",["/installation/index.html","/installation/README.md"]],["v-55146a0d","/api/props/","Props",["/api/props/index.html","/api/props/README.md"]],["v-59de75e8","/api/slots/","Slots",["/api/slots/index.html","/api/slots/README.md"]],["v-216a76f4","/customization/props/","Customization props",["/customization/props/index.html","/customization/props/README.md"]],["v-d446beac","/customization/scss/","Scss",["/customization/scss/index.html","/customization/scss/README.md"]],["v-241ec4c4","/customization/theming/","Theming",["/customization/theming/index.html","/customization/theming/README.md"]],["v-3706649a","/404.html","",["/404"]]].reduce(((e,[t,n,a,o])=>(e.push({name:t,path:n,component:i.Y,meta:{title:a}},...o.map((e=>({path:e,redirect:n})))),e)),[{name:"404",path:"/:catchAll(.*)",component:i.Y}])},5220:(e,t,n)=>{n.d(t,{H:()=>i});const i={base:"/vue3-date-time-picker/",lang:"en-US",title:"vue3-date-time-picker",description:"The most complete date picker solution for Vue 3",head:[["link",{rel:"icon",href:"/vue3-date-time-picker/logo.png"}]],locales:{}}},2232:(e,t,n)=>{n.d(t,{f:()=>i});const i={logo:"/logo.png",contributors:!1,navbar:[{text:"Home",link:"/"},{text:"GitHub",link:"https://github.com/Vuepic/vue3-date-time-picker"}],sidebar:[{text:"Getting Started",children:[{text:"Installation",link:"/installation/"}]},{text:"API",children:[{text:"Props",link:"/api/props/"},{text:"Slots",link:"/api/slots/"}]},{text:"Customization",children:[{text:"Theming",link:"/customization/theming/"},{text:"Scss",link:"/customization/scss/"},{text:"Props",link:"/customization/props/"}]}],locales:{"/":{selectLanguageName:"English"}},darkMode:!0,repo:null,selectLanguageText:"Languages",selectLanguageAriaLabel:"Select language",sidebarDepth:2,editLink:!0,editLinkText:"Edit this page",lastUpdated:!0,lastUpdatedText:"Last Updated",contributorsText:"Contributors",notFound:["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],backToHome:"Take me home",openInNewWindow:"open in new window",toggleDarkMode:"toggle dark mode",toggleSidebar:"toggle sidebar"}}},e=>{e.O(0,[460,812],(()=>(8463,e(e.s=8463)))),e.O()}]); \ No newline at end of file diff --git a/docs/assets/js/runtime~app.f9d83ad8.js b/docs/assets/js/runtime~app.df01ef40.js similarity index 66% rename from docs/assets/js/runtime~app.f9d83ad8.js rename to docs/assets/js/runtime~app.df01ef40.js index 4a0d1bd..6133e5e 100644 --- a/docs/assets/js/runtime~app.f9d83ad8.js +++ b/docs/assets/js/runtime~app.df01ef40.js @@ -1 +1 @@ -(()=>{"use strict";var e,r,t,a,o={},n={};function s(e){var r=n[e];if(void 0!==r)return r.exports;var t=n[e]={exports:{}};return o[e].call(t.exports,t,t.exports,s),t.exports}s.m=o,e=[],s.O=(r,t,a,o)=>{if(!t){var n=1/0;for(c=0;c=o)&&Object.keys(s.O).every((e=>s.O[e](t[l])))?t.splice(l--,1):(i=!1,o0&&e[c-1][2]>o;c--)e[c]=e[c-1];e[c]=[t,a,o]},s.d=(e,r)=>{for(var t in r)s.o(r,t)&&!s.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},s.f={},s.e=e=>Promise.all(Object.keys(s.f).reduce(((r,t)=>(s.f[t](e,r),r)),[])),s.u=e=>"assets/js/"+({15:"v-216a76f4",88:"v-3706649a",150:"v-d446beac",192:"v-08a5d2dc",260:"v-59de75e8",267:"v-241ec4c4",278:"v-55146a0d",509:"v-8daa1a0e"}[e]||e)+"."+{15:"5e79b21f",88:"8e30169a",150:"7d863190",192:"64f5d5c8",260:"81faf01d",267:"235ad165",273:"8323756f",278:"b767ee37",330:"4518e673",373:"3238bb05",491:"46471c23",509:"4dc1a347",554:"4f115f3e",657:"e53ef612",713:"ae03365f",758:"f2812dac",855:"ca53ca31",858:"a9b75439",888:"2dc38c1c"}[e]+".js",s.miniCssF=e=>460===e?"assets/css/styles.0c53a240.css":"assets/css/"+e+".styles."+{858:"a9b75439",888:"2dc38c1c"}[e]+".css",s.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),r={},s.l=(e,t,a,o)=>{if(r[e])r[e].push(t);else{var n,i;if(void 0!==a)for(var l=document.getElementsByTagName("script"),d=0;d{n.onerror=n.onload=null,clearTimeout(u);var o=r[e];if(delete r[e],n.parentNode&&n.parentNode.removeChild(n),o&&o.forEach((e=>e(a))),t)return t(a)},u=setTimeout(f.bind(null,void 0,{type:"timeout",target:n}),12e4);n.onerror=f.bind(null,n.onerror),n.onload=f.bind(null,n.onload),i&&document.head.appendChild(n)}},s.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.p="/vue3-date-time-picker/",t=e=>new Promise(((r,t)=>{var a=s.miniCssF(e),o=s.p+a;if(((e,r)=>{for(var t=document.getElementsByTagName("link"),a=0;a{var o=document.createElement("link");o.rel="stylesheet",o.type="text/css",o.onerror=o.onload=n=>{if(o.onerror=o.onload=null,"load"===n.type)t();else{var s=n&&("load"===n.type?"missing":n.type),i=n&&n.target&&n.target.href||r,l=new Error("Loading CSS chunk "+e+" failed.\n("+i+")");l.code="CSS_CHUNK_LOAD_FAILED",l.type=s,l.request=i,o.parentNode.removeChild(o),a(l)}},o.href=r,document.head.appendChild(o)})(e,o,r,t)})),a={523:0},s.f.miniCss=(e,r)=>{a[e]?r.push(a[e]):0!==a[e]&&{858:1,888:1}[e]&&r.push(a[e]=t(e).then((()=>{a[e]=0}),(r=>{throw delete a[e],r})))},(()=>{var e={523:0,460:0};s.f.j=(r,t)=>{var a=s.o(e,r)?e[r]:void 0;if(0!==a)if(a)t.push(a[2]);else if(/^(460|523|858|888)$/.test(r))e[r]=0;else{var o=new Promise(((t,o)=>a=e[r]=[t,o]));t.push(a[2]=o);var n=s.p+s.u(r),i=new Error;s.l(n,(t=>{if(s.o(e,r)&&(0!==(a=e[r])&&(e[r]=void 0),a)){var o=t&&("load"===t.type?"missing":t.type),n=t&&t.target&&t.target.src;i.message="Loading chunk "+r+" failed.\n("+o+": "+n+")",i.name="ChunkLoadError",i.type=o,i.request=n,a[1](i)}}),"chunk-"+r,r)}},s.O.j=r=>0===e[r];var r=(r,t)=>{var a,o,[n,i,l]=t,d=0;if(n.some((r=>0!==e[r]))){for(a in i)s.o(i,a)&&(s.m[a]=i[a]);if(l)var c=l(s)}for(r&&r(t);d{"use strict";var e,r,t,a,o={},n={};function s(e){var r=n[e];if(void 0!==r)return r.exports;var t=n[e]={exports:{}};return o[e].call(t.exports,t,t.exports,s),t.exports}s.m=o,e=[],s.O=(r,t,a,o)=>{if(!t){var n=1/0;for(f=0;f=o)&&Object.keys(s.O).every((e=>s.O[e](t[l])))?t.splice(l--,1):(i=!1,o0&&e[f-1][2]>o;f--)e[f]=e[f-1];e[f]=[t,a,o]},s.d=(e,r)=>{for(var t in r)s.o(r,t)&&!s.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},s.f={},s.e=e=>Promise.all(Object.keys(s.f).reduce(((r,t)=>(s.f[t](e,r),r)),[])),s.u=e=>"assets/js/"+({15:"v-216a76f4",88:"v-3706649a",150:"v-d446beac",192:"v-08a5d2dc",260:"v-59de75e8",267:"v-241ec4c4",278:"v-55146a0d",509:"v-8daa1a0e"}[e]||e)+"."+{15:"5e79b21f",88:"8e30169a",134:"734a5fa4",150:"7d863190",192:"5a7b3327",260:"81faf01d",267:"235ad165",273:"8323756f",278:"99c8517c",348:"d8f3c2e1",373:"3238bb05",491:"46471c23",509:"4dc1a347",554:"4f115f3e",657:"e53ef612",713:"ae03365f",758:"f2812dac",855:"e19bdb39",858:"a9b75439"}[e]+".js",s.miniCssF=e=>460===e?"assets/css/styles.0c53a240.css":"assets/css/"+e+".styles."+{348:"d8f3c2e1",858:"a9b75439"}[e]+".css",s.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),r={},s.l=(e,t,a,o)=>{if(r[e])r[e].push(t);else{var n,i;if(void 0!==a)for(var l=document.getElementsByTagName("script"),d=0;d{n.onerror=n.onload=null,clearTimeout(c);var o=r[e];if(delete r[e],n.parentNode&&n.parentNode.removeChild(n),o&&o.forEach((e=>e(a))),t)return t(a)},c=setTimeout(u.bind(null,void 0,{type:"timeout",target:n}),12e4);n.onerror=u.bind(null,n.onerror),n.onload=u.bind(null,n.onload),i&&document.head.appendChild(n)}},s.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.p="/vue3-date-time-picker/",t=e=>new Promise(((r,t)=>{var a=s.miniCssF(e),o=s.p+a;if(((e,r)=>{for(var t=document.getElementsByTagName("link"),a=0;a{var o=document.createElement("link");o.rel="stylesheet",o.type="text/css",o.onerror=o.onload=n=>{if(o.onerror=o.onload=null,"load"===n.type)t();else{var s=n&&("load"===n.type?"missing":n.type),i=n&&n.target&&n.target.href||r,l=new Error("Loading CSS chunk "+e+" failed.\n("+i+")");l.code="CSS_CHUNK_LOAD_FAILED",l.type=s,l.request=i,o.parentNode.removeChild(o),a(l)}},o.href=r,document.head.appendChild(o)})(e,o,r,t)})),a={523:0},s.f.miniCss=(e,r)=>{a[e]?r.push(a[e]):0!==a[e]&&{348:1,858:1}[e]&&r.push(a[e]=t(e).then((()=>{a[e]=0}),(r=>{throw delete a[e],r})))},(()=>{var e={523:0,460:0};s.f.j=(r,t)=>{var a=s.o(e,r)?e[r]:void 0;if(0!==a)if(a)t.push(a[2]);else if(/^(348|460|523|858)$/.test(r))e[r]=0;else{var o=new Promise(((t,o)=>a=e[r]=[t,o]));t.push(a[2]=o);var n=s.p+s.u(r),i=new Error;s.l(n,(t=>{if(s.o(e,r)&&(0!==(a=e[r])&&(e[r]=void 0),a)){var o=t&&("load"===t.type?"missing":t.type),n=t&&t.target&&t.target.src;i.message="Loading chunk "+r+" failed.\n("+o+": "+n+")",i.name="ChunkLoadError",i.type=o,i.request=n,a[1](i)}}),"chunk-"+r,r)}},s.O.j=r=>0===e[r];var r=(r,t)=>{var a,o,[n,i,l]=t,d=0;if(n.some((r=>0!==e[r]))){for(a in i)s.o(i,a)&&(s.m[a]=i[a]);if(l)var f=l(s)}for(r&&r(t);d{a.r(s),a.d(s,{data:()=>p});const p={key:"v-08a5d2dc",path:"/installation/",title:"Installation",lang:"en-US",frontmatter:{lang:"en-US",title:"Installation",description:"Install vue3-date-time-picker"},excerpt:"",headers:[{level:3,title:"Global",slug:"global",children:[]},{level:3,title:"Local",slug:"local",children:[]}],filePathRelative:"installation/README.md",git:{updatedTime:1630517735e3}}},8719:(n,s,a)=>{a.r(s),a.d(s,{default:()=>t});const p=(0,a(6252).uE)('

Installation

Install the component using preferred package manager

yarn add vue3-date-time-picker\n\n# or\n\nnpm install vue3-date-time-picker\n
1
2
3
4
5

Then import and register component

Note: CSS file is imported separately

Global

In the main file

import { createApp } from "vue";\nimport App from './App.vue';\n\nimport Datepicker from 'vue3-date-time-picker';\nimport 'vue3-date-time-picker/dist/main.css'\n\nconst app = createApp(App);\n\napp.component('Datepicker', Datepicker);\n\napp.mount('#app');\n
1
2
3
4
5
6
7
8
9
10
11

Local

In the .vue files

  • Regular setup
<template>\n    <Datepicker v-model="date"></Datepicker>\n</template>\n\n<script>\n    import Datepicker from 'vue3-date-time-picker';\n    import 'vue3-date-time-picker/dist/main.css'\n    \n    export default {\n        components: { Datepicker },\n        data() {\n            return {\n                date: null,\n            };\n        }\n    }\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  • Composition API
<template>\n    <Datepicker v-model="date"></Datepicker>\n</template>\n\n<script>\n    import { ref } from 'vue';\n    import Datepicker from 'vue3-date-time-picker';\n    import 'vue3-date-time-picker/dist/main.css'\n    \n    export default {\n        components: { Datepicker },\n        setup() {\n            const date = ref();\n            \n            return {\n                date\n            }\n        }\n    };\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Alternatively you can import SCSS file if you want a full control of the component styles

@Import 'vue3-date-time-picker/src/Vue3DatePicker/styles/main.scss';\n
1

That's it, you are ready to go.

',17),t={render:function(n,s){return p}}}}]); \ No newline at end of file diff --git a/docs/assets/js/v-08a5d2dc.64f5d5c8.js b/docs/assets/js/v-08a5d2dc.64f5d5c8.js deleted file mode 100644 index b416f99..0000000 --- a/docs/assets/js/v-08a5d2dc.64f5d5c8.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[192],{220:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-08a5d2dc",path:"/installation/",title:"Installation",lang:"en-US",frontmatter:{lang:"en-US",title:"Installation",description:"Install vue3-date-time-picker"},excerpt:"",headers:[{level:3,title:"Global",slug:"global",children:[]},{level:3,title:"Local",slug:"local",children:[]}],filePathRelative:"installation/README.md",git:{updatedTime:1630229838e3}}},553:(n,s,a)=>{a.r(s),a.d(s,{default:()=>t});const p=(0,a(6252).uE)('

Installation

Install the component using preferred package manager

yarn add vue3-date-time-picker\n\n# or\n\nnpm install vue3-date-time-picker\n
1
2
3
4
5

Then import and register component

Note: CSS file is imported separately

Global

In the main file

import { createApp } from "vue";\nimport App from './App.vue';\n\nimport Datepicker from "vue3-date-time-picker";\nimport 'vue3-date-time-picker/dist/main.css'\n\nconst app = createApp(App);\n\napp.component('Datepicker', Datepicker);\n\napp.mount('#app');\n
1
2
3
4
5
6
7
8
9
10
11

Local

In the .vue files

  • Regular setup
<template>\n    <Datepicker v-model="date"></Datepicker>\n</template>\n\n<script>\n    import Datepicker from "vue3-date-time-picker";\n    import 'vue3-date-time-picker/dist/main.css'\n    \n    export default {\n        components: { Datepicker },\n        data() {\n            return {\n                date: null,\n            };\n        }\n    }\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  • Composition API
<template>\n    <Datepicker v-model="date"></Datepicker>\n</template>\n\n<script>\n    import { ref } from 'vue';\n    import Datepicker from "vue3-date-time-picker";\n    import 'vue3-date-time-picker/dist/main.css'\n    \n    export default {\n        components: { Datepicker },\n        setup() {\n            const date = ref();\n            \n            return {\n                date\n            }\n        }\n    };\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Alternatively you can import SCSS file if you want a full control of the component styles

@Import 'vue3-date-time-picker/src/Vue3DatePicker/styles/main.scss';\n
1

That's it, you are ready to go.

',17),t={render:function(n,s){return p}}}}]); \ No newline at end of file diff --git a/docs/assets/js/v-55146a0d.99c8517c.js b/docs/assets/js/v-55146a0d.99c8517c.js new file mode 100644 index 0000000..e0e1a7f --- /dev/null +++ b/docs/assets/js/v-55146a0d.99c8517c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[278],{7873:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-55146a0d",path:"/api/props/",title:"Props",lang:"en-US",frontmatter:{lang:"en-US",title:"Props",description:"Available props for vue3-date-time-picker"},excerpt:"",headers:[{level:2,title:"is24",slug:"is24",children:[]},{level:2,title:"enableTimePicker",slug:"enabletimepicker",children:[]},{level:2,title:"locale",slug:"locale",children:[]},{level:2,title:"range",slug:"range",children:[]},{level:2,title:"modelValue",slug:"modelvalue",children:[]},{level:2,title:"position",slug:"position",children:[]},{level:2,title:"autoPosition",slug:"autoposition",children:[]},{level:2,title:"dark",slug:"dark",children:[]},{level:2,title:"placeholder",slug:"placeholder",children:[]},{level:2,title:"weekNumbers",slug:"weeknumbers",children:[]},{level:2,title:"hoursIncrement",slug:"hoursincrement",children:[]},{level:2,title:"minutesIncrement",slug:"minutesincrement",children:[]},{level:2,title:"hoursGridIncrement",slug:"hoursgridincrement",children:[]},{level:2,title:"minutesGridIncrement",slug:"minutesgridincrement",children:[]},{level:2,title:"minDate",slug:"mindate",children:[]},{level:2,title:"maxDate",slug:"maxdate",children:[]},{level:2,title:"minTime",slug:"mintime",children:[]},{level:2,title:"maxTime",slug:"maxtime",children:[]},{level:2,title:"weekStart",slug:"weekstart",children:[]},{level:2,title:"disabled",slug:"disabled",children:[]},{level:2,title:"readonly",slug:"readonly",children:[]},{level:2,title:"weekNumName",slug:"weeknumname",children:[]},{level:2,title:"format",slug:"format",children:[]},{level:2,title:"previewFormat",slug:"previewformat",children:[]},{level:2,title:"hideInputIcon",slug:"hideinputicon",children:[]},{level:2,title:"state",slug:"state",children:[]},{level:2,title:"clearable",slug:"clearable",children:[]},{level:2,title:"closeOnScroll",slug:"closeonscroll",children:[]},{level:2,title:"autoApply",slug:"autoapply",children:[]},{level:2,title:"filters",slug:"filters",children:[]},{level:2,title:"disableMonthYearSelect",slug:"disablemonthyearselect",children:[]},{level:2,title:"yearRange",slug:"yearrange",children:[]},{level:2,title:"disabledDates",slug:"disableddates",children:[]},{level:2,title:"inline",slug:"inline",children:[]},{level:2,title:"selectText",slug:"selecttext",children:[]},{level:2,title:"cancelText",slug:"canceltext",children:[]}],filePathRelative:"api/props/README.md",git:{updatedTime:1630600733e3}}},2740:(n,s,a)=>{a.r(s),a.d(s,{default:()=>pn});var p=a(6252);const t=(0,p._)("h1",{id:"props",tabindex:"-1"},[(0,p._)("a",{class:"header-anchor",href:"#props","aria-hidden":"true"},"#"),(0,p.Uk)(" Props")],-1),e=(0,p._)("h2",{id:"is24",tabindex:"-1"},[(0,p._)("a",{class:"header-anchor",href:"#is24","aria-hidden":"true"},"#"),(0,p.Uk)(" is24")],-1),l=(0,p._)("p",null,"Whether to use 24H or 12H mode.",-1),c=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :is24="false" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref(new Date());\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: true\n}\n
1
2
3
4

enableTimePicker

Enable or disable time picker.

',4),o=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :enableTimePicker="false" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref(new Date());\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: true\n}\n
1
2
3
4

locale

',3),u=(0,p.Uk)("Set date picker locale. Datepicker will use built in javascript "),r={href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString",target:"_blank",rel:"noopener noreferrer"},i=(0,p.Uk)("locale formatter"),k=(0,p.Uk)(" to format dates, extract month and weekday names."),b=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" locale="de" cancelText="abbrechen" selectText="auswählen" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref(new Date());\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: String,\n    default: 'en-US'\n}\n
1
2
3
4

range

Range picker mode

',4),m=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" range />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: false\n}\n
1
2
3
4
',2),d={id:"modelvalue",tabindex:"-1"},g=(0,p._)("a",{class:"header-anchor",href:"#modelvalue","aria-hidden":"true"},"#",-1),v=(0,p.Uk)(" modelValue "),y=(0,p.uE)('

v-model binding

Code
<template>\n   <div>\n       <Datepicker uid="manual" :modelValue="date" @update:modelValue="setDate" />\n       <Datepicker uid="auto" v-model="date" />\n   </div>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        const setDate = (value) => {\n            date.value = value;\n        }\n        \n        return {\n            date,\n            setDate,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Accepted values:

  • Date
  • Date.toString()
  • [Date, Date]
  • [Date.toString(), Date.toString()]
  • null
{\n    type: [String, Date, Array],\n    default: null\n}\n
1
2
3
4

position

Datepicker menu position

',7),f=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" position="left" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Accepted values:

  • 'left'
  • 'right'
  • 'center'
{\n    type: String,\n    default: 'center'\n}\n
1
2
3
4

autoPosition

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

',6),h=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :autoPosition="false" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: true\n}\n
1
2
3
4

dark

Theme switch between dark and light mode

',4),w=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" dark />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: false\n}\n
1
2
3
4

placeholder

Input placeholder

',4),q=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" placeholder="Select Date" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: String,\n    default: null\n}\n
1
2
3
4

weekNumbers

Display week numbers in the calendar

',4),x=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" weekNumbers />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: false\n}\n
1
2
3
4

hoursIncrement

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

',4),j=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" hoursIncrement="5" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: [String, Number],\n    default: 1\n}\n
1
2
3
4

minutesIncrement

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

',4),D=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" minutesIncrement="5" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: [String, Number],\n    default: 1\n}\n
1
2
3
4

hoursGridIncrement

Value which is used to increment hours when showing hours overlay

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

',5),S=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" hoursGridIncrement="2" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: [String, Number],\n    default: 1\n}\n
1
2
3
4

minutesGridIncrement

Value which is used to increment minutes when showing minutes overlay

It will always start from 0 to 60 minutes.

',5),W=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" minutesGridIncrement="2" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: [String, Number],\n    default: 5\n}\n
1
2
3
4

minDate

All dates before given date will be disabled

',4),C=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :minDate="new Date()" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Allowed values:

  • String
  • Date.toString()
{\n    type: [String, Date],\n    default: null\n}\n
1
2
3
4

maxDate

All dates after the given date will be disabled

',6),E=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :maxDate="new Date()" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Allowed values:

  • String
  • Date.toString()
{\n    type: [String, Date],\n    default: null\n}\n
1
2
3
4

minTime

Sets the minimal available time to pick

',6),I=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :minTime="{ hours: 11, minutes: 30 }" placeholder="Select Date" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Accepted values

  • { hours?: number | string, minutes?: number | string }
minTIme: {\n    type: Object,\n    default: () => ({})\n}\n
1
2
3
4

maxTime

',5),T=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :maxTime="{ hours: 11, minutes: 30 }" placeholder="Select Date" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Accepted values

  • { hours?: number | string, minutes?: number | string }
{\n    type: Object,\n    default: () => ({})\n}\n
1
2
3
4

weekStart

Day from which the week starts

',6),A=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" weekStart="0" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Accepted values

  • 0-6 0 is Sunday, 6 is Saturday
{\n    type: [String, Number],\n    default: 1 // monday\n}\n
1
2
3
4

disabled

Disables the input

',6),N=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" disabled />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: false\n}\n
1
2
3
4

readonly

Sets the input in readonly state

',4),_=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" readonly />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: false\n}\n
1
2
3
4

weekNumName

Sets the label for week numbers column

',4),P=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" weekNumbers weekNumName="We" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
weekNumName: {\n    type: String,\n    default: 'W'\n}\n
1
2
3
4

format

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

Accepted values:

',5),B=(0,p._)("code",null,"Object",-1),F=(0,p.Uk)(" - These are constructor options for the "),O=(0,p._)("code",null," Intl.DateTimeFormatOptions",-1),U=(0,p.Uk)(", you can check all the accepted properties "),G={href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat",target:"_blank",rel:"noopener noreferrer"},R=(0,p.Uk)("here"),Y=(0,p._)("li",null,[(0,p._)("code",null,"Function"),(0,p.Uk)(" - You can provide a custom function that will do a formatting. The function has to return a string")],-1),M=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :format="format" />\n</template>\n\n<script>\n// Example using a custom format function\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        // In case of a range picker, you'll receive [Date, Date]\n        const format = (date) => {\n            const day = date.getDate();\n            const month = date.getMonth();\n            const year = date.getFullYear();\n\n            return `Selected date is ${day}/${month}/${year}`;\n        }\n        \n        return {\n            date,\n            format,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{\n    type: [Object, Function],\n    default: () => ({})\n}\n
1
2
3
4

previewFormat

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

Same configuration as in format prop

',5),V=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :previewFormat="format" />\n</template>\n\n<script>\n// Example using a custom format function\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        // In case of a range picker, you'll receive [Date, Date]\n        const format = (date) => {\n            const day = date.getDate();\n            const month = date.getMonth();\n            const year = date.getFullYear();\n\n            return `Selected date is ${day}/${month}/${year}`;\n        }\n\n        return {\n            date,\n            format,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{\n    type: [Object, Function],\n    default: () => ({})\n}\n
1
2
3
4

hideInputIcon

Hide calendar icon in the input field

',4),$=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" hideInputIcon />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: false\n}\n
1
2
3
4

state

Validation state of the calendar value

Sets the green/red border depending on the value

',5),H=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :state="false" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: null\n}\n
1
2
3
4

clearable

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

',4),J=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :clearable="false" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: true\n}\n
1
2
3
4

closeOnScroll

Close datepicker menu on page scroll

',4),z=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" closeOnScroll />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: true\n}\n
1
2
3
4

autoApply

If sets to true, clicking on a date value will automatically select the value. You should not enable this if you are using time picker.

',4),L=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" autoApply :enableTimePicker="false" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: false\n}\n
1
2
3
4

filters

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

',4),K=(0,p.uE)('
Code
<template>\n    <!-- Disable first 3 months -->\n    <Datepicker v-model="date" :filters="{ months: [0, 1, 2] }" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Accepted value:

  • Object
{\n    months?: number[]; // 0 = Jan, 11 - Dec\n    years?: number[]; // Array of years to disable\n    times?: {\n        hours?: number[] // disable specific hours\n        minutes?: number[] // disable sepcific minutes\n    }\n}\n
1
2
3
4
5
6
7
8
{\n    type: Object,\n    default: () => ({})\n}\n
1
2
3
4

disableMonthYearSelect

Removes the month and year picker

',7),Q=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" disableMonthYearSelect />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: false\n}\n
1
2
3
4

yearRange

Specify start and end year for years to generate

',4),X=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :yearRange="[2020, 2040]" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Accepted value:

  • [number, number], e.g. [1900, 2100]
{\n    type: Array,\n    default: () => [1970, 2100]\n}\n
1
2
3
4

disabledDates

Disable specific dates

',6),Z=(0,p.uE)('
Code
<template>\n    <!--Disable 6th of September 2021 and 11th of November 2021-->\n    <Datepicker v-model="date" :disabledDates="disabledDates" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        const disabledDates = ref([new Date(2021, 8, 6), new Date(2021, 10, 11)])\n        \n        return {\n            disabledDates,\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Accepted values:

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

inline

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

',6),nn=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" inline />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: false\n}\n
1
2
3
4

selectText

Select text label in the action row

',4),sn=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" selectText="Pick" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: String,\n    default: 'Select'\n}\n
1
2
3
4

cancelText

Cancel text label in the action row

',4),an=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" cancelText="Close" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: String,\n    default: 'Cancel'\n}\n
1
2
3
4
',2),pn={render:function(n,s){const a=(0,p.up)("Demo"),pn=(0,p.up)("OutboundLink"),tn=(0,p.up)("Badge"),en=(0,p.up)("DarkDemo"),ln=(0,p.up)("EmptyDemo"),cn=(0,p.up)("FormatDemo"),on=(0,p.up)("PreviewFormatDemo");return(0,p.wg)(),(0,p.iD)(p.HY,null,[t,e,l,(0,p.Wm)(a,{is24:!1,uid:"24demo"}),c,(0,p.Wm)(a,{enableTimePicker:!1,uid:"enableTpDemo"}),o,(0,p._)("p",null,[u,(0,p._)("a",r,[i,(0,p.Wm)(pn)]),k]),(0,p.Wm)(a,{locale:"de",uid:"localeDemo",cancelText:"abbrechen",selectText:"auswählen"}),b,(0,p.Wm)(a,{uid:"rangeDemo",range:!0}),m,(0,p._)("h2",d,[g,v,(0,p.Wm)(tn,{type:"tip",text:"v-model",vertical:"top"})]),y,(0,p.Wm)(a,{uid:"positionDemo",position:"left"}),f,(0,p.Wm)(a,{uid:"autoPositionDemo",autoPosition:!1}),h,(0,p.Wm)(en,{uid:"darkModeDemo"}),w,(0,p.Wm)(ln,{uid:"placeholderDemo",placeholder:"Select Date"}),q,(0,p.Wm)(a,{uid:"weekNumbersDemo",weekNumbers:!0}),x,(0,p.Wm)(a,{uid:"hourIncrement",hoursIncrement:"5"}),j,(0,p.Wm)(a,{uid:"minuteIncrement",minutesIncrement:"5"}),D,(0,p.Wm)(a,{uid:"hourGridIncrement",hoursGridIncrement:"2"}),S,(0,p.Wm)(a,{uid:"minuteGridIncrement",minutesGridIncrement:"2"}),W,(0,p.Wm)(a,{uid:"minDateDemo",minDate:new Date},null,8,["minDate"]),C,(0,p.Wm)(a,{uid:"maxDateDemo",maxDate:new Date},null,8,["maxDate"]),E,(0,p.Wm)(a,{uid:"minTimeDemo",minTime:{hours:11,minutes:30},placeholder:"Select Date"}),I,(0,p.Wm)(a,{uid:"maxTimeDemo",maxTime:{hours:11,minutes:30},placeholder:"Select Date"}),T,(0,p.Wm)(a,{uid:"weekStartDemo",weekStart:"0"}),A,(0,p.Wm)(a,{uid:"disabledDemo",disabled:!0}),N,(0,p.Wm)(a,{uid:"readonlyDemo",readonly:!0}),_,(0,p.Wm)(a,{uid:"weekNumNameDemo",weekNumbers:"",weekNumName:"We"}),P,(0,p._)("ul",null,[(0,p._)("li",null,[B,F,O,U,(0,p._)("a",G,[R,(0,p.Wm)(pn)])]),Y]),(0,p.Wm)(cn,{uid:"formatDemo"}),M,(0,p.Wm)(on,{uid:"peviewFormatDemo"}),V,(0,p.Wm)(a,{uid:"hideInputIconDemo",hideInputIcon:!0}),$,(0,p.Wm)(a,{uid:"stateDemo",state:!1}),H,(0,p.Wm)(a,{uid:"clearableDemo",clearable:!1}),J,(0,p.Wm)(a,{uid:"closeOnScrollDemo",closeOnScroll:!0}),z,(0,p.Wm)(a,{uid:"autoApplyDemo",autoApply:!0,enableTimePicker:!1}),L,(0,p.Wm)(a,{uid:"filtersDemo",filters:{months:[0,1,2]}}),K,(0,p.Wm)(a,{uid:"disableMonthYearSelectDemo",disableMonthYearSelect:!0}),Q,(0,p.Wm)(a,{uid:"yearRangeDemo",yearRange:[2020,2040]}),X,(0,p.Wm)(a,{uid:"disabledDatesDemo",disabledDates:[new Date(2021,8,6),new Date(2021,10,11)]},null,8,["disabledDates"]),Z,(0,p.Wm)(a,{uid:"inlineDemo",inline:!0}),nn,(0,p.Wm)(a,{uid:"selectTextDemo",selectText:"Pick"}),sn,(0,p.Wm)(a,{uid:"cancelTextDemo",cancelText:"Close"}),an],64)}}}}]); \ No newline at end of file diff --git a/docs/assets/js/v-55146a0d.b767ee37.js b/docs/assets/js/v-55146a0d.b767ee37.js deleted file mode 100644 index fefbbcc..0000000 --- a/docs/assets/js/v-55146a0d.b767ee37.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[278],{7873:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-55146a0d",path:"/api/props/",title:"Props",lang:"en-US",frontmatter:{lang:"en-US",title:"Props",description:"Available props for vue3-date-time-picker"},excerpt:"",headers:[{level:2,title:"is24",slug:"is24",children:[]},{level:2,title:"enableTimePicker",slug:"enabletimepicker",children:[]},{level:2,title:"locale",slug:"locale",children:[]},{level:2,title:"range",slug:"range",children:[]},{level:2,title:"modelValue",slug:"modelvalue",children:[]},{level:2,title:"position",slug:"position",children:[]},{level:2,title:"dark",slug:"dark",children:[]},{level:2,title:"placeholder",slug:"placeholder",children:[]},{level:2,title:"weekNumbers",slug:"weeknumbers",children:[]},{level:2,title:"hoursIncrement",slug:"hoursincrement",children:[]},{level:2,title:"minutesIncrement",slug:"minutesincrement",children:[]},{level:2,title:"hoursGridIncrement",slug:"hoursgridincrement",children:[]},{level:2,title:"minutesGridIncrement",slug:"minutesgridincrement",children:[]},{level:2,title:"minDate",slug:"mindate",children:[]},{level:2,title:"maxDate",slug:"maxdate",children:[]},{level:2,title:"minTime",slug:"mintime",children:[]},{level:2,title:"maxTime",slug:"maxtime",children:[]},{level:2,title:"weekStart",slug:"weekstart",children:[]},{level:2,title:"disabled",slug:"disabled",children:[]},{level:2,title:"readonly",slug:"readonly",children:[]},{level:2,title:"weekNumName",slug:"weeknumname",children:[]},{level:2,title:"format",slug:"format",children:[]},{level:2,title:"previewFormat",slug:"previewformat",children:[]},{level:2,title:"hideInputIcon",slug:"hideinputicon",children:[]},{level:2,title:"state",slug:"state",children:[]},{level:2,title:"clearable",slug:"clearable",children:[]},{level:2,title:"closeOnScroll",slug:"closeonscroll",children:[]},{level:2,title:"autoApply",slug:"autoapply",children:[]},{level:2,title:"filters",slug:"filters",children:[]},{level:2,title:"disableMonthYearSelect",slug:"disablemonthyearselect",children:[]},{level:2,title:"yearRange",slug:"yearrange",children:[]},{level:2,title:"disabledDates",slug:"disableddates",children:[]},{level:2,title:"inline",slug:"inline",children:[]},{level:2,title:"selectText",slug:"selecttext",children:[]},{level:2,title:"cancelText",slug:"canceltext",children:[]}],filePathRelative:"api/props/README.md",git:{updatedTime:1630323391e3}}},28:(n,s,a)=>{a.r(s),a.d(s,{default:()=>an});var p=a(6252);const t=(0,p._)("h1",{id:"props",tabindex:"-1"},[(0,p._)("a",{class:"header-anchor",href:"#props","aria-hidden":"true"},"#"),(0,p.Uk)(" Props")],-1),e=(0,p._)("h2",{id:"is24",tabindex:"-1"},[(0,p._)("a",{class:"header-anchor",href:"#is24","aria-hidden":"true"},"#"),(0,p.Uk)(" is24")],-1),l=(0,p._)("p",null,"Whether to use 24H or 12H mode.",-1),c=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :is24="false" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref(new Date());\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: true\n}\n
1
2
3
4

enableTimePicker

Enable or disable time picker.

',4),o=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :enableTimePicker="false" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref(new Date());\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: true\n}\n
1
2
3
4

locale

',3),u=(0,p.Uk)("Set date picker locale. Datepicker will use built in javascript "),r={href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString",target:"_blank",rel:"noopener noreferrer"},i=(0,p.Uk)("locale formatter"),k=(0,p.Uk)(" to format dates, extract month and weekday names."),b=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" locale="de" cancelText="abbrechen" selectText="auswählen" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref(new Date());\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: String,\n    default: 'en-US'\n}\n
1
2
3
4

range

Range picker mode

',4),m=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" range />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: false\n}\n
1
2
3
4
',2),d={id:"modelvalue",tabindex:"-1"},g=(0,p._)("a",{class:"header-anchor",href:"#modelvalue","aria-hidden":"true"},"#",-1),v=(0,p.Uk)(" modelValue "),y=(0,p.uE)('

v-model binding

Code
<template>\n   <div>\n       <Datepicker uid="manual" :modelValue="date" @update:modelValue="setDate" />\n       <Datepicker uid="auto" v-model="date" />\n   </div>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        const setDate = (value) => {\n            date.value = value;\n        }\n        \n        return {\n            date,\n            setDate,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Accepted values:

  • Date
  • Date.toString()
  • [Date, Date]
  • [Date.toString(), Date.toString()]
  • null
{\n    type: [String, Date, Array],\n    default: null\n}\n
1
2
3
4

position

Datepicker menu position

',7),f=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" position="left" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: false\n}\n
1
2
3
4

Accepted values:

  • 'left'
  • 'right'
  • 'center'
{\n    type: String,\n    default: 'center'\n}\n
1
2
3
4

dark

Theme switch between dark and light mode

',7),h=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" dark />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: false\n}\n
1
2
3
4

placeholder

Input placeholder

',4),w=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" placeholder="Select Date" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: String,\n    default: null\n}\n
1
2
3
4

weekNumbers

Display week numbers in the calendar

',4),q=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" weekNumbers />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: false\n}\n
1
2
3
4

hoursIncrement

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

',4),x=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" hoursIncrement="5" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: [String, Number],\n    default: 1\n}\n
1
2
3
4

minutesIncrement

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

',4),j=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" minutesIncrement="5" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: [String, Number],\n    default: 1\n}\n
1
2
3
4

hoursGridIncrement

Value which is used to increment hours when showing hours overlay

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

',5),D=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" hoursGridIncrement="2" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: [String, Number],\n    default: 1\n}\n
1
2
3
4

minutesGridIncrement

Value which is used to increment hours when showing hours overlay

It will always start from 0 to 60 minutes.

',5),S=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" minutesGridIncrement="2" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: [String, Number],\n    default: 5\n}\n
1
2
3
4

minDate

All dates before given date will be disabled

',4),W=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :minDate="new Date()" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Allowed values:

  • String
  • Date.toString()
{\n    type: [String, Date],\n    default: null\n}\n
1
2
3
4

maxDate

All dates after the given date will be disabled

',6),C=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :maxDate="new Date()" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Allowed values:

  • String
  • Date.toString()
{\n    type: [String, Date],\n    default: null\n}\n
1
2
3
4

minTime

Sets the minimal available time to pick

',6),E=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :minTime="{ hours: 11, minutes: 30 }" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Accepted values

  • { hours?: number | string, minutes?: number | string }
minTIme: {\n    type: Object,\n    default: () => ({})\n}\n
1
2
3
4

maxTime

',5),I=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :maxTime="{ hours: 11, minutes: 30 }" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Accepted values

  • { hours?: number | string, minutes?: number | string }
{\n    type: Object,\n    default: () => ({})\n}\n
1
2
3
4

weekStart

Day from which the week starts

',6),T=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" weekStart="0" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Accepted values

  • 0-6 0 is Sunday, 6 is Saturday
{\n    type: [String, Number],\n    default: 1 // monday\n}\n
1
2
3
4

disabled

Disables the input

',6),A=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" disabled />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: false\n}\n
1
2
3
4

readonly

Sets the input in readonly state

',4),N=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" readonly />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: false\n}\n
1
2
3
4

weekNumName

Sets the label for week numbers column

',4),_=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" weekNumbers weekNumName="We" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
weekNumName: {\n    type: String,\n    default: 'W'\n}\n
1
2
3
4

format

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

Accepted values:

',5),B=(0,p._)("code",null,"Object",-1),F=(0,p.Uk)(" - These are constructor options for the "),O=(0,p._)("code",null," Intl.DateTimeFormatOptions",-1),U=(0,p.Uk)(", you can check all the accepted properties "),P={href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat",target:"_blank",rel:"noopener noreferrer"},G=(0,p.Uk)("here"),R=(0,p._)("li",null,[(0,p._)("code",null,"Function"),(0,p.Uk)(" - You can provide a custom function that will do a formatting. The function has to return a string")],-1),Y=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :format="format" />\n</template>\n\n<script>\n// Example using a custom format function\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        // In case of a range picker, you'll receive [Date, Date]\n        const format = (date) => {\n            const day = date.getDate();\n            const month = date.getMonth();\n            const year = date.getFullYear();\n\n            return `Selected date is ${day}/${month}/${year}`;\n        }\n        \n        return {\n            date,\n            format,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{\n    type: [Object, Function],\n    default: () => ({})\n}\n
1
2
3
4

previewFormat

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

Same configuration as in format prop

',5),M=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :previewFormat="format" />\n</template>\n\n<script>\n// Example using a custom format function\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        // In case of a range picker, you'll receive [Date, Date]\n        const format = (date) => {\n            const day = date.getDate();\n            const month = date.getMonth();\n            const year = date.getFullYear();\n\n            return `Selected date is ${day}/${month}/${year}`;\n        }\n\n        return {\n            date,\n            format,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{\n    type: [Object, Function],\n    default: () => ({})\n}\n
1
2
3
4

hideInputIcon

Hide calendar icon in the input field

',4),V=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" hideInputIcon />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: false\n}\n
1
2
3
4

state

Validation state of the calendar value

Sets the green/red border depending on the value

',5),$=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :state="false" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: null\n}\n
1
2
3
4

clearable

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

',4),H=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :clearable="false" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: true\n}\n
1
2
3
4

closeOnScroll

Close datepicker menu on page scroll

',4),J=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :closeOnScroll="false" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: true\n}\n
1
2
3
4

autoApply

If sets to true, clicking on a date value will automatically select the value. You should not enable this if you are using time picker.

',4),z=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" autoApply :enableTimePicker="false" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: false\n}\n
1
2
3
4

filters

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

',4),L=(0,p.uE)('
Code
<template>\n    <!-- Disable first 3 months -->\n    <Datepicker v-model="date" :filters="{ months: [0, 1, 2] }" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Accepted value:

  • Object
{\n    months?: number[]; // 0 = Jan, 11 - Dec\n    years?: number[]; // Array of years to disable\n    times?: {\n        hours?: number[] // disable specific hours\n        minutes?: number[] // disable sepcific minutes\n    }\n}\n
1
2
3
4
5
6
7
8
{\n    type: Object,\n    default: () => ({})\n}\n
1
2
3
4

disableMonthYearSelect

Removes the month and year picker

',7),K=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" disableMonthYearSelect />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: false\n}\n
1
2
3
4

yearRange

Specify start and end year for years to generate

',4),Q=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" :yearRange="[2020, 2040]" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Accepted value:

  • [number, number], e.g. [1900, 2100]
{\n    type: Array,\n    default: () => [1970, 2100]\n}\n
1
2
3
4

disabledDates

Disable specific dates

',6),X=(0,p.uE)('
Code
<template>\n    <!--Disable 6th of September 2021 and 11th of November 2021-->\n    <Datepicker v-model="date" :disabledDates="disabledDates" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        const disabledDates = ref([new Date(2021, 8, 6), new Date(2021, 10, 11)])\n        \n        return {\n            disabledDates,\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Accepted values:

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

inline

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

',6),Z=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" inline />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: Boolean,\n    default: false\n}\n
1
2
3
4

selectText

Select text label in the action row

',4),nn=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" selectText="Pick" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: String,\n    default: 'Select'\n}\n
1
2
3
4

cancelText

Cancel text label in the action row

',4),sn=(0,p.uE)('
Code
<template>\n    <Datepicker v-model="date" cancelText="Close" />\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n    setup() {\n        const date = ref();\n        \n        return {\n            date,\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{\n    type: String,\n    default: 'Cancel'\n}\n
1
2
3
4
',2),an={render:function(n,s){const a=(0,p.up)("Demo"),an=(0,p.up)("OutboundLink"),pn=(0,p.up)("Badge"),tn=(0,p.up)("DarkDemo"),en=(0,p.up)("EmptyDemo"),ln=(0,p.up)("FormatDemo"),cn=(0,p.up)("PreviewFormatDemo");return(0,p.wg)(),(0,p.iD)(p.HY,null,[t,e,l,(0,p.Wm)(a,{is24:!1,uid:"24demo"}),c,(0,p.Wm)(a,{enableTimePicker:!1,uid:"enableTpDemo"}),o,(0,p._)("p",null,[u,(0,p._)("a",r,[i,(0,p.Wm)(an)]),k]),(0,p.Wm)(a,{locale:"de",uid:"localeDemo",cancelText:"abbrechen",selectText:"auswählen"}),b,(0,p.Wm)(a,{uid:"rangeDemo",range:!0}),m,(0,p._)("h2",d,[g,v,(0,p.Wm)(pn,{type:"tip",text:"v-model",vertical:"top"})]),y,(0,p.Wm)(a,{uid:"positionDemo",position:"left"}),f,(0,p.Wm)(tn,{uid:"darkModeDemo"}),h,(0,p.Wm)(en,{uid:"placeholderDemo",placeholder:"Select Date"}),w,(0,p.Wm)(a,{uid:"weekNumbersDemo",weekNumbers:!0}),q,(0,p.Wm)(a,{uid:"hourIncrement",hoursIncrement:"5"}),x,(0,p.Wm)(a,{uid:"minuteIncrement",minutesIncrement:"5"}),j,(0,p.Wm)(a,{uid:"hourGridIncrement",hoursGridIncrement:"2"}),D,(0,p.Wm)(a,{uid:"minuteGridIncrement",minutesGridIncrement:"2"}),S,(0,p.Wm)(a,{uid:"minDateDemo",minDate:new Date},null,8,["minDate"]),W,(0,p.Wm)(a,{uid:"maxDateDemo",maxDate:new Date},null,8,["maxDate"]),C,(0,p.Wm)(a,{uid:"minTimeDemo",minTime:{hours:11,minutes:30}}),E,(0,p.Wm)(a,{uid:"maxTimeDemo",maxTime:{hours:11,minutes:30}}),I,(0,p.Wm)(a,{uid:"weekStartDemo",weekStart:"0"}),T,(0,p.Wm)(a,{uid:"disabledDemo",disabled:!0}),A,(0,p.Wm)(a,{uid:"readonlyDemo",readonly:!0}),N,(0,p.Wm)(a,{uid:"weekNumNameDemo",weekNumbers:"",weekNumName:"We"}),_,(0,p._)("ul",null,[(0,p._)("li",null,[B,F,O,U,(0,p._)("a",P,[G,(0,p.Wm)(an)])]),R]),(0,p.Wm)(ln,{uid:"formatDemo"}),Y,(0,p.Wm)(cn,{uid:"peviewFormatDemo"}),M,(0,p.Wm)(a,{uid:"hideInputIconDemo",hideInputIcon:!0}),V,(0,p.Wm)(a,{uid:"stateDemo",state:!1}),$,(0,p.Wm)(a,{uid:"clearableDemo",clearable:!1}),H,(0,p.Wm)(a,{uid:"closeOnScrollDemo",closeOnScroll:!1}),J,(0,p.Wm)(a,{uid:"autoApplyDemo",autoApply:!0,enableTimePicker:!1}),z,(0,p.Wm)(a,{uid:"filtersDemo",filters:{months:[0,1,2]}}),L,(0,p.Wm)(a,{uid:"disableMonthYearSelectDemo",disableMonthYearSelect:!0}),K,(0,p.Wm)(a,{uid:"yearRangeDemo",yearRange:[2020,2040]}),Q,(0,p.Wm)(a,{uid:"disabledDatesDemo",disabledDates:[new Date(2021,8,6),new Date(2021,10,11)]},null,8,["disabledDates"]),X,(0,p.Wm)(a,{uid:"inlineDemo",inline:!0}),Z,(0,p.Wm)(a,{uid:"selectTextDemo",selectText:"Pick"}),nn,(0,p.Wm)(a,{uid:"cancelTextDemo",cancelText:"Close"}),sn],64)}}}}]); \ No newline at end of file diff --git a/docs/customization/props/index.html b/docs/customization/props/index.html index abd7eab..5d67d5a 100644 --- a/docs/customization/props/index.html +++ b/docs/customization/props/index.html @@ -5,7 +5,7 @@ Customization props | vue3-date-time-picker - + @@ -26,6 +26,6 @@ default: null }
1
2
3
4
Last Updated: 8/29/2021, 11:37:18 AM
- + diff --git a/docs/customization/scss/index.html b/docs/customization/scss/index.html index 0c961cb..932687b 100644 --- a/docs/customization/scss/index.html +++ b/docs/customization/scss/index.html @@ -5,12 +5,12 @@ Scss | vue3-date-time-picker - +
vue3-date-time-picker

SCSS

To override some properties you can import the scss file and modify the default properties

@import 'vue3-date-time-picker/src/Vue3DatePicker/styles/main.scss';
1

Available properties are

Default Font family of the date picker

  • $dp__font_family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !default

Default border radius, apples to the radius of the input, menu, elements in the menu

  • $dp__border_radius: 4px !default

Default cell padding in the menu, changing this value will affect size of the date picker

  • $dp__cell_padding: 5px !default

Default radius for the cells in the calendar, inherited from the default border radius

  • $dp_cell_border_radius: $dp__border_radius !default
Last Updated: 8/29/2021, 11:37:18 AM
- + diff --git a/docs/customization/theming/index.html b/docs/customization/theming/index.html index 6db363b..d28f24c 100644 --- a/docs/customization/theming/index.html +++ b/docs/customization/theming/index.html @@ -5,7 +5,7 @@ Theming | vue3-date-time-picker - + @@ -42,6 +42,6 @@ --dp-danger-color: #ff6f60; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Last Updated: 8/29/2021, 11:37:18 AM
- + diff --git a/docs/index.html b/docs/index.html index 552f8e5..399499b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -5,11 +5,11 @@ vue3-date-time-picker | vue3-date-time-picker - +
vue3-date-time-picker

vue3-date-time-picker

The most complete date picker solution for Vue 3

Licenseopen in new window Dependencies npmopen in new window Downloads Open issuesopen in new window Vulnerabilities Release date

Fully customizable datepicker for Vue 3. Packed with awesome features that should cover most of the needs for any project.

Getting started

JSFiddle Demoopen in new window

Features

Single date picker

Range date picker

Time picker

Locale support

Week numbers

Dark and light theme

Zero dependencies

SSR support

Highly configurable

Type support

© Vuepic 2021
Last Updated: 8/30/2021, 5:02:12 PM
- + diff --git a/docs/installation/index.html b/docs/installation/index.html index e656f55..952fa48 100644 --- a/docs/installation/index.html +++ b/docs/installation/index.html @@ -5,7 +5,7 @@ Installation | vue3-date-time-picker - + @@ -17,7 +17,7 @@
1
2
3
4
5

Then import and register component

Note: CSS file is imported separately

Global

In the main file

import { createApp } from "vue";
 import App from './App.vue';
 
-import Datepicker from "vue3-date-time-picker";
+import Datepicker from 'vue3-date-time-picker';
 import 'vue3-date-time-picker/dist/main.css'
 
 const app = createApp(App);
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-    import Datepicker from "vue3-date-time-picker";
+    import Datepicker from 'vue3-date-time-picker';
     import 'vue3-date-time-picker/dist/main.css'
     
     export default {
@@ -48,7 +48,7 @@
 
 <script>
     import { ref } from 'vue';
-    import Datepicker from "vue3-date-time-picker";
+    import Datepicker from 'vue3-date-time-picker';
     import 'vue3-date-time-picker/dist/main.css'
     
     export default {
@@ -63,7 +63,7 @@
     };
 </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Alternatively you can import SCSS file if you want a full control of the component styles

@Import 'vue3-date-time-picker/src/Vue3DatePicker/styles/main.scss';
-
1

That's it, you are ready to go.

Last Updated: 8/29/2021, 11:37:18 AM
- +
1

That's it, you are ready to go.

Last Updated: 9/1/2021, 7:35:35 PM
+ diff --git a/package-lock.json b/package-lock.json index 26003e3..e372718 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "vue3-date-time-picker", - "version": "1.0.2", + "version": "1.0.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "vue3-date-time-picker", - "version": "1.0.2", + "version": "1.0.3", "license": "MIT", "devDependencies": { "@babel/core": "^7.15.0", diff --git a/package.json b/package.json index de3ae05..ea0010e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue3-date-time-picker", - "version": "1.0.2", + "version": "1.0.3", "description": "Datepicker component for Vue 3", "author": "Vuepic", "private": false, diff --git a/src/Vue3DatePicker/Vue3DatePicker.vue b/src/Vue3DatePicker/Vue3DatePicker.vue index fb6993e..49ffb59 100644 --- a/src/Vue3DatePicker/Vue3DatePicker.vue +++ b/src/Vue3DatePicker/Vue3DatePicker.vue @@ -29,6 +29,7 @@ :class="theme" :uid="uid" v-click-outside-directive.dp__menu="closeMenu" + :open-on-top="openOnTop" :enable-time-picker="enableTimePicker" :week-numbers="weekNumbers" :week-start="weekStart" @@ -60,7 +61,7 @@ v-model:rangeModelValue="rangeModelValue" @closePicker="closeMenu" @selectDate="selectDate" - @openToTop="recalculatePosition" + @dpOpen="recalculatePosition" v-if="isOpen" /> @@ -121,7 +122,7 @@ hideInputIcon: { type: Boolean as PropType, default: false }, state: { type: Boolean as PropType, default: null }, clearable: { type: Boolean as PropType, default: true }, - closeOnScroll: { type: Boolean as PropType, default: true }, + closeOnScroll: { type: Boolean as PropType, default: false }, autoApply: { type: Boolean as PropType, default: false }, filters: { type: Object as PropType, default: () => ({}) }, disableMonthYearSelect: { type: Boolean as PropType, default: false }, @@ -130,6 +131,7 @@ inline: { type: Boolean as PropType, default: false }, selectText: { type: String as PropType, default: 'Select' }, cancelText: { type: String as PropType, default: 'Cancel' }, + autoPosition: { type: Boolean as PropType, default: true }, }, setup(props: RDatepickerProps, { emit }) { const isOpen = ref(false); @@ -137,6 +139,7 @@ const internalValue = ref(''); const singleModelValue = ref(); const rangeModelValue = ref(); + const openOnTop = ref(false); const valueCleared = ref(false); const modelValue = toRef(props, 'modelValue'); @@ -156,20 +159,16 @@ onMounted(() => { mapExternalToInternalValue(); - if (props.closeOnScroll) { - window.addEventListener('scroll', closeMenu); - } - window.addEventListener('resize', setMenuPosition); + window.addEventListener('scroll', onScroll); + window.addEventListener('resize', onResize); if (props.inline) { isOpen.value = true; } }); onUnmounted(() => { - if (props.closeOnScroll) { - window.removeEventListener('scroll', closeMenu); - } - window.removeEventListener('resize', setMenuPosition); + window.removeEventListener('scroll', onScroll); + window.removeEventListener('resize', onResize); }); const wrapperClass = computed( @@ -279,7 +278,21 @@ closeMenu(); }; - const setMenuPosition = (): void => { + const onScroll = (): void => { + if (props.closeOnScroll) { + closeMenu(); + } else if (props.autoPosition) { + setMenuPosition(); + } else { + window.removeEventListener('scroll', onScroll); + } + }; + + const onResize = (): void => { + setMenuPosition(); + }; + + const setMenuPosition = (recalculate = true): void => { const el = document.getElementById(`dp__input_${props.uid}`); if (el) { const { left, width, height } = el.getBoundingClientRect(); @@ -298,13 +311,31 @@ position.transform = `translateX(-50%)`; } menuPosition.value = position; + if (recalculate) { + recalculatePosition(); + } } }; - const recalculatePosition = (height: number) => { + const recalculatePosition = (): void => { const el = document.getElementById(`dp__input_${props.uid}`); if (el) { - menuPosition.value.top = `${el.offsetTop - height - 12}px`; + const { height: inputHeight, top } = el.getBoundingClientRect(); + const fullHeight = window.innerHeight; + const freeSpace = fullHeight - top - inputHeight; + const menuEl = document.getElementById(`dp__menu_${props.uid}`); + + if (menuEl) { + const { height } = menuEl.getBoundingClientRect(); + const menuHeight = height + inputHeight; + if (menuHeight > freeSpace) { + menuPosition.value.top = `${el.offsetTop - height - 12}px`; + openOnTop.value = true; + } else { + setMenuPosition(false); + openOnTop.value = false; + } + } } }; @@ -344,12 +375,13 @@ internalValue, isOpen, isSingle, + theme, + wrapperClass, + openOnTop, clearValue, openMenu, closeMenu, selectDate, - theme, - wrapperClass, recalculatePosition, }; }, diff --git a/src/Vue3DatePicker/components/Calendar.vue b/src/Vue3DatePicker/components/Calendar.vue index 57e5348..ae06f1d 100644 --- a/src/Vue3DatePicker/components/Calendar.vue +++ b/src/Vue3DatePicker/components/Calendar.vue @@ -181,15 +181,22 @@ } weekDays.value = getDayNames(props.locale, +props.weekStart); + const date = new Date(); if (singleModelValue.value) { hoursSingle.value = singleModelValue.value.getHours(); minutesSingle.value = singleModelValue.value.getMinutes(); + } else { + hoursSingle.value = date.getHours(); + minutesSingle.value = date.getMinutes(); } if (rangeModelValue.value && rangeModelValue.value[0] && rangeModelValue.value[1]) { hoursRange.value = [rangeModelValue.value[0].getHours(), rangeModelValue.value[1].getHours()]; minutesRange.value = [rangeModelValue.value[0].getMinutes(), rangeModelValue.value[1].getMinutes()]; + } else { + hoursRange.value = [date.getHours(), date.getHours()]; + minutesRange.value = [date.getMinutes(), date.getMinutes()]; } }); diff --git a/src/Vue3DatePicker/components/DatepickerInput.vue b/src/Vue3DatePicker/components/DatepickerInput.vue index a4ee470..67e62a3 100644 --- a/src/Vue3DatePicker/components/DatepickerInput.vue +++ b/src/Vue3DatePicker/components/DatepickerInput.vue @@ -13,11 +13,14 @@ > - diff --git a/src/Vue3DatePicker/components/DatepickerMenu.vue b/src/Vue3DatePicker/components/DatepickerMenu.vue index 79a4452..9f8eee8 100644 --- a/src/Vue3DatePicker/components/DatepickerMenu.vue +++ b/src/Vue3DatePicker/components/DatepickerMenu.vue @@ -40,7 +40,7 @@