From 14c0bf4ad289417168e5a560e8209d99d6f9a554 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Fri, 17 Mar 2023 12:40:00 +0800
Subject: [PATCH] feat(webui): use a datepicker to select book release date

Closes: #1094
---
 .../components/dialogs/EditBooksDialog.vue    | 50 +++++++++++++------
 1 file changed, 35 insertions(+), 15 deletions(-)

diff --git a/komga-webui/src/components/dialogs/EditBooksDialog.vue b/komga-webui/src/components/dialogs/EditBooksDialog.vue
index bd56c68a..c5330cd4 100644
--- a/komga-webui/src/components/dialogs/EditBooksDialog.vue
+++ b/komga-webui/src/components/dialogs/EditBooksDialog.vue
@@ -144,24 +144,43 @@
                 <v-row v-if="single">
                   <!--  Release Date  -->
                   <v-col cols="6">
-                    <v-text-field v-model="form.releaseDate"
-                                  :label="$t('dialog.edit_books.field_release_date')"
-                                  filled
-                                  dense
-                                  placeholder="YYYY-MM-DD"
-                                  clearable
-                                  :error-messages="releaseDateErrors"
-                                  @blur="$v.form.releaseDate.$touch()"
-                                  @change="form.releaseDateLock = true"
+                    <v-menu
+                      v-model="menuDate"
+                      :close-on-content-click="false"
+                      transition="scale-transition"
+                      offset-y
+                      min-width="auto"
                     >
-                      <template v-slot:prepend>
-                        <v-icon :color="form.releaseDateLock ? 'secondary' : ''"
-                                @click="form.releaseDateLock = !form.releaseDateLock"
+                      <template v-slot:activator="{on, attrs}">
+                        <v-text-field v-model="form.releaseDate"
+                                      :label="$t('dialog.edit_books.field_release_date')"
+                                      filled
+                                      dense
+                                      placeholder="YYYY-MM-DD"
+                                      clearable
+                                      readonly
+                                      :error-messages="releaseDateErrors"
+                                      @blur="$v.form.releaseDate.$touch()"
+                                      @change="form.releaseDateLock = true"
+                                      v-bind="attrs"
+                                      v-on="on"
                         >
-                          {{ form.releaseDateLock ? 'mdi-lock' : 'mdi-lock-open' }}
-                        </v-icon>
+                          <template v-slot:prepend>
+                            <v-icon :color="form.releaseDateLock ? 'secondary' : ''"
+                                    @click="form.releaseDateLock = !form.releaseDateLock"
+                            >
+                              {{ form.releaseDateLock ? 'mdi-lock' : 'mdi-lock-open' }}
+                            </v-icon>
+                          </template>
+                        </v-text-field>
                       </template>
-                    </v-text-field>
+                      <v-date-picker v-model="form.releaseDate"
+                                     :show-current="true"
+                                     :show-adjacent-months="true"
+                                     @input="menuDate = false"
+                                     @change="form.releaseDateLock = true"
+                      />
+                    </v-menu>
                   </v-col>
 
                   <!--  ISBN  -->
@@ -427,6 +446,7 @@ export default Vue.extend({
     return {
       modal: false,
       tab: 0,
+      menuDate: false,
       customRole: '',
       customRoles: [] as string[],
       customRoleValid: false,