add and configure vue-date-picker

components/Layout/SubHeader/DataTimingRange.vue

@@ -5,14 +5,15 @@
         {{ $t('period_choose') }}
       </span>
 
-      <UiInputDatePicker
-        label="date_choose"
-        :data="datesRange"
-        range
-        dense
-        single-line
-        height="22"
-        @update="updateDateTimeRange"
+      <!-- @see https://vue3datepicker.com/props/modes/#multi-calendars -->
+      <VueDatePicker
+          :model-value="datesRange"
+          range
+          multi-calendars
+          :teleport="true"
+          :alt-position="dateRangePickerAltPosition"
+          :enable-time-picker="false"
+          @update="updateDateTimeRange"
       />
     </div>
 
@@ -48,12 +49,20 @@ const { setDirty } = useFormStore()
 const accessProfileStore = useAccessProfileStore()
 const { em } = useEntityManager()
 
-const datesRange: Ref<Array<string | null | undefined>> = ref([
-  accessProfileStore.historical.dateStart,
-  accessProfileStore.historical.dateEnd
+const start = accessProfileStore.historical.dateStart
+const end = accessProfileStore.historical.dateStart
+
+const dateRangePickerAltPosition = (el: HTMLElement) => ({
+  top: el.getBoundingClientRect().bottom,
+  left: el.getBoundingClientRect().left - 100
+})
+
+const datesRange: Ref<Array<Date | null>> = ref([
+  start ? new Date(start) : null,
+  end ? new Date(end) : null
 ])
 
-const updateDateTimeRange = async (dates:Array<string>): Promise<any> => {
+const updateDateTimeRange = async (dates: Array<Date>): Promise<any> => {
   if (accessProfileStore.id === null) {
     throw new Error('Invalid profile id')
   }
@@ -136,5 +145,4 @@ if (accessProfileStore.historical.dateStart || accessProfileStore.historical.dat
     font-size: 14px;
   }
 }
-
 </style>

nuxt.config.ts

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import vuetify from 'vite-plugin-vuetify'
-import {NuxtI18nOptions} from "@nuxtjs/i18n";
+import {NuxtI18nOptions} from "@nuxtjs/i18n"
 
 /**
  * Nuxt configuration
@@ -67,7 +67,8 @@ export default defineNuxtConfig({
     css: [
         '@/assets/css/global.scss',
         '@/assets/css/theme.scss',
-        '@/assets/css/import.scss'
+        '@/assets/css/import.scss',
+        '@vuepic/vue-datepicker/dist/main.css'
     ],
     typescript: {
         strict: true
@@ -172,6 +173,6 @@ export default defineNuxtConfig({
         },
     } as NuxtI18nOptions,
     build: {
-        transpile: ['vuetify'],
+        transpile: ['vuetify', '@vuepic/vue-datepicker'],
     },
 })

package.json

@@ -33,6 +33,7 @@
     "@types/file-saver": "^2.0.5",
     "@types/js-yaml": "^4.0.5",
     "@types/vue-the-mask": "^0.11.1",
+    "@vuepic/vue-datepicker": "^4.2.0",
     "cleave.js": "^1.6.0",
     "date-fns": "^2.29.3",
     "event-source-polyfill": "^1.0.31",

plugins/vue-date-picker.ts

@@ -0,0 +1,6 @@
+import VueDatePicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css'
+
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.vueApp.component('VueDatePicker', VueDatePicker)
+})

yarn.lock

@@ -1822,6 +1822,14 @@
   optionalDependencies:
     "@vue/compiler-dom" "^3.0.1"
 
+"@vuepic/vue-datepicker@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@vuepic/vue-datepicker/-/vue-datepicker-4.2.0.tgz#04a2b82c4b0ded3ef88d145875b41d6d09ef14fb"
+  integrity sha512-ipo3ZoY/zyVBXbTcnC16GvIuo/Ja/ddaN0OGVV45KMXmsXJsUFo52c17c1l17iDm7N9Ds8l4yRSGmWpDAzrbXQ==
+  dependencies:
+    date-fns "^2.29.3"
+    date-fns-tz "^1.3.7"
+
 "@vuetify/loader-shared@^1.7.1":
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/@vuetify/loader-shared/-/loader-shared-1.7.1.tgz#0f63a3d41b6df29a2db1ff438aa1819b237c37a3"
@@ -2924,6 +2932,11 @@ data-urls@^3.0.2:
     whatwg-mimetype "^3.0.0"
     whatwg-url "^11.0.0"
 
+date-fns-tz@^1.3.7:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-1.3.8.tgz#083e3a4e1f19b7857fa0c18deea6c2bc46ded7b9"
+  integrity sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ==
+
 date-fns@^2.29.3:
   version "2.29.3"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"