Seitch to nextclouds own date picker

Signed-off-by: Philip Gouverneur <philipgouverneur@gmx.de>

Author: gouverneurp

src/components/header/GoToDateMenuItem.vue

@@ -1,75 +1,37 @@
 <template>
-  <div class="go-to-date">
-    <NcButton
-      class="memories-menu-item"
-      variant="tertiary-no-background"
-      :title="t('memories', 'Go to date')"
-      :aria-label="t('memories', 'Go to date')"
-    >
-      <template #icon>
-        <CalendarSearchIcon :size="20" />
-      </template>
-    </NcButton>
-    <input ref="dateInput" type="date" class="date-input-overlay" @click="constrainRange" @change="onDateSelected" />
-  </div>
+  <NcDateTimePicker
+    v-model="selectedDate"
+    type="date"
+    :clearable="false"
+    :placeholder="t('memories', 'Go to date')"
+    @change="onDateSelected"
+  />
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js';
-import CalendarSearchIcon from 'vue-material-design-icons/CalendarSearch.vue';
+import NcDateTimePicker from '@nextcloud/vue/dist/Components/NcDateTimePicker.js';
 
 import * as utils from '@services/utils';
 
 export default defineComponent({
   name: 'GoToDateMenuItem',
   components: {
-    NcButton,
-    CalendarSearchIcon,
+    NcDateTimePicker,
   },
 
-  methods: {
-    constrainRange() {
-      const input = this.$refs.dateInput as HTMLInputElement;
-      const event = { result: null as { min: Date; max: Date } | null };
-      utils.bus.emit('memories:timeline:getDateRange', event);
-      if (event.result) {
-        input.min = this.toISODate(event.result.min);
-        input.max = this.toISODate(event.result.max);
-      }
-    },
-
-    onDateSelected(event: Event) {
-      const input = event.target as HTMLInputElement;
-      if (!input.value) return;
+  data() {
+    return {
+      selectedDate: new Date(),
+    };
+  },
 
-      const date = new Date(input.value + 'T00:00:00Z');
+  methods: {
+    onDateSelected(date: Date) {
+      if (!date) return;
       utils.bus.emit('memories:timeline:scrollToDate', date);
-
-      input.value = '';
-    },
-
-    toISODate(date: Date): string {
-      return date.toISOString().split('T')[0];
     },
   },
 });
 </script>
-
-<style lang="scss" scoped>
-.go-to-date {
-  position: relative;
-}
-
-.date-input-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: pointer;
-  z-index: 1;
-}
-</style>

src/components/top-matter/FolderTopMatter.vue

@@ -54,13 +54,15 @@
           </template>
         </NcActionButton>
 
-        <NcActionButton :aria-label="t('memories', 'Go to date')" @click="openDatePicker()" close-after-click>
-          {{ t('memories', 'Go to date') }}
-          <template #icon> <CalendarSearchIcon :size="20" /> </template>
-        </NcActionButton>
       </NcActions>
 
-      <input ref="dateInput" type="date" class="date-input-hidden" @change="onDateSelected" />
+      <NcDateTimePicker
+        v-model="goToDate"
+        type="date"
+        :clearable="false"
+        :placeholder="t('memories', 'Go to date')"
+        @change="onDateSelected"
+      />
     </div>
   </div>
 </template>
@@ -74,6 +76,7 @@ const NcBreadcrumbs = () => import('@nextcloud/vue/dist/Components/NcBreadcrumbs
 const NcBreadcrumb = () => import('@nextcloud/vue/dist/Components/NcBreadcrumb.js');
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js';
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js';
+import NcDateTimePicker from '@nextcloud/vue/dist/Components/NcDateTimePicker.js';
 import PublicUploadHandler from '@components/upload/PublicUploadHandler.vue';
 
 import * as utils from '@services/utils';
@@ -84,7 +87,6 @@ import ShareIcon from 'vue-material-design-icons/ShareVariant.vue';
 import TimelineIcon from 'vue-material-design-icons/ImageMultiple.vue';
 import FoldersIcon from 'vue-material-design-icons/FolderMultiple.vue';
 import UploadIcon from 'vue-material-design-icons/Upload.vue';
-import CalendarSearchIcon from 'vue-material-design-icons/CalendarSearch.vue';
 
 export default defineComponent({
   name: 'FolderTopMatter',
@@ -94,17 +96,23 @@ export default defineComponent({
     NcBreadcrumb,
     NcActions,
     NcActionButton,
+    NcDateTimePicker,
     PublicUploadHandler,
     HomeIcon,
     ShareIcon,
     TimelineIcon,
     FoldersIcon,
     UploadIcon,
-    CalendarSearchIcon,
   },
 
   mixins: [UserConfig],
 
+  data() {
+    return {
+      goToDate: new Date(),
+    };
+  },
+
   computed: {
     list(): {
       text: string;
@@ -171,33 +179,9 @@ export default defineComponent({
       return (this.$refs.uploadHandler as InstanceType<typeof PublicUploadHandler>) || null;
     },
 
-    openDatePicker() {
-      const input = this.$refs.dateInput as HTMLInputElement;
-      const event = { result: null as { min: Date; max: Date } | null };
-      utils.bus.emit('memories:timeline:getDateRange', event);
-      if (event.result) {
-        input.min = event.result.min.toISOString().split('T')[0];
-        input.max = event.result.max.toISOString().split('T')[0];
-      }
-
-      // Temporarily make visible for showPicker to work
-      input.style.width = '1px';
-      input.style.height = '1px';
-      try {
-        input.showPicker();
-      } catch {
-        input.click();
-      }
-      input.style.width = '';
-      input.style.height = '';
-    },
-
-    onDateSelected(event: Event) {
-      const input = event.target as HTMLInputElement;
-      if (!input.value) return;
-      const date = new Date(input.value + 'T00:00:00Z');
+    onDateSelected(date: Date) {
+      if (!date) return;
       utils.bus.emit('memories:timeline:scrollToDate', date);
-      input.value = '';
     },
   },
 });
@@ -219,14 +203,5 @@ export default defineComponent({
     gap: 10px; // Add spacing between actions and progress bar
   }
 
-  .date-input-hidden {
-    position: absolute;
-    width: 0;
-    height: 0;
-    overflow: hidden;
-    border: 0;
-    padding: 0;
-    margin: 0;
-  }
 }
 </style>