Enhancement: date picker and date filter dropdown improvements (#9033)

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html

@@ -29,10 +29,17 @@
     <input class="form-control" placeholder="yyyy-mm-dd"
       [(ngModel)]="atom.value"
       ngbDatepicker
-      #d="ngbDatepicker" />
+      #d="ngbDatepicker"
+      [footerTemplate]="datePickerFooterTemplate" />
     <button class="btn btn-sm btn-outline-secondary rounded-end" (click)="d.toggle()" type="button">
       <i-bs name="calendar-event"></i-bs>
     </button>
+    <ng-template #datePickerFooterTemplate>
+      <div class="btn-group-xs border-top p-2 d-flex">
+        <button type="button" class="btn btn-primary" (click)="atom.value = today; d.close()" i18n>Today</button>
+        <button type="button" class="btn btn-secondary ms-auto" (click)="d.close()" i18n>Close</button>
+      </div>
+    </ng-template>
   } @else if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Float || getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Integer) {
     <input class="w-25 form-control rounded-end" type="number" [(ngModel)]="atom.value" [disabled]="disabled">
   } @else if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Boolean) {

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss

@@ -41,3 +41,9 @@
     min-width: 140px;
   }
 }
+
+.btn-group-xs {
+  > .btn {
+    border-radius: 0.15rem;
+  }
+}

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts

@@ -241,6 +241,8 @@ export class CustomFieldsQueryDropdownComponent extends LoadingComponentWithPerm
 
   customFields: CustomField[] = []
 
+  public readonly today: string = new Date().toISOString().split('T')[0]
+
   constructor(protected customFieldsService: CustomFieldsService) {
     super()
     this.selectionModel = new CustomFieldQueriesModel()