Add DatePicker to edit metadata page (#1586)

booklore-ui/src/app/features/metadata/component/book-metadata-center/metadata-editor/metadata-editor.component.html

@@ -287,7 +287,19 @@
             <div class="flex flex-col gap-1 md:basis-[15%]">
               <label class="text-sm" for="publishedDate">Publish Date</label>
               <div class="flex justify-between items-center gap-2">
-                <input pSize="small" pInputText id="publishedDate" formControlName="publishedDate" placeholder="YYYY-MM-DD" class="w-full min-w-32"/>
+                <p-datepicker
+                  class="w-full md:min-w-[9rem]"
+                  size="small"
+                  formControlName="publishedDate"
+                  inputId="publishedDate"
+                  dataType="string"
+                  dateFormat="yy-mm-dd"
+                  [keepInvalid]="true"
+                  [showIcon]="true"
+                  [iconDisplay]="'input'"
+                  fluid="true"
+                  appendTo="body">
+                </p-datepicker>
                 @if (!book.metadata!['publishedDateLocked']) {
                   <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('publishedDate')" severity="success"></p-button>
                 }

booklore-ui/src/app/features/metadata/component/book-metadata-center/metadata-editor/metadata-editor.component.ts

@@ -18,6 +18,7 @@ import {DialogService} from "primeng/dynamicdialog";
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {MetadataRefreshType} from "../../../model/request/metadata-refresh-type.enum";
 import {AutoComplete} from "primeng/autocomplete";
+import {DatePicker} from "primeng/datepicker";
 import {Textarea} from "primeng/textarea";
 import {IftaLabel} from "primeng/iftalabel";
 import {Image} from "primeng/image";
@@ -41,6 +42,7 @@ import {TaskHelperService} from '../../../../settings/task-management/task-helpe
     ProgressSpinner,
     Tooltip,
     AutoComplete,
+    DatePicker,
     Textarea,
     IftaLabel,
     Image,

booklore-ui/src/app/features/metadata/component/bulk-metadata-update/bulk-metadata-update-component.html

@@ -91,7 +91,19 @@
             <label for="clearPublishedDate" class="text-sm text-gray-300 cursor-pointer">Clear</label>
           </div>
         </label>
-        <p-datepicker id="publishedDate" formControlName="publishedDate" [disabled]="clearFields.publishedDate" dateFormat="yy-mm-dd" showIcon></p-datepicker>
+        <p-datepicker
+          class="w-full md:min-w-[9rem]"
+          formControlName="publishedDate"
+          inputId="publishedDate"
+          dataType="string"
+          dateFormat="yy-mm-dd"
+          [disabled]="clearFields.publishedDate"
+          [keepInvalid]="true"
+          [showIcon]="true"
+          [iconDisplay]="'input'"
+          fluid="true"
+          appendTo="body">
+        </p-datepicker>
       </div>
 
       <!-- Series Total -->