use new date inputs for the date filter as well

src-ui/src/app/app.module.ts

@@ -60,7 +60,7 @@ import { NumberComponent } from './components/common/input/number/number.compone
 import { SafePipe } from './pipes/safe.pipe';
 import { CustomDatePipe } from './pipes/custom-date.pipe';
 import { DateComponent } from './components/common/input/date/date.component';
-import { ISODateAdapter } from './utils/ngb-date-adapter';
+import { ISODateTimeAdapter } from './utils/ngb-iso-date-time-adapter';
 import { LocalizedDateParserFormatter } from './utils/ngb-date-parser-formatter';
 
 import localeFr from '@angular/common/locales/fr';
@@ -147,7 +147,7 @@ registerLocaleData(localeEnGb)
     },
     FilterPipe,
     DocumentTitlePipe,
-    {provide: NgbDateAdapter, useClass: ISODateAdapter},
+    {provide: NgbDateAdapter, useClass: ISODateTimeAdapter},
     {provide: NgbDateParserFormatter, useClass: LocalizedDateParserFormatter}
   ],
   bootstrap: [AppComponent]

src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html

@@ -20,9 +20,18 @@
           </div>
 
           <div class="input-group input-group-sm">
-            <input type="date" class="form-control" id="date_after" [(ngModel)]="dateAfter" (change)="onChangeDebounce()">
+            <input class="form-control" [placeholder]="datePlaceHolder" id="dateAfter" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()"
+                    [(ngModel)]="dateAfter" ngbDatepicker #dateAfterPicker="ngbDatepicker">
+            <div class="input-group-append">
+              <button class="btn btn-outline-secondary" (click)="dateAfterPicker.toggle()" type="button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
+                  <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
+                </svg>
+              </button>
             </div>
           </div>
+
+        </div>
         <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
 
           <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
@@ -36,8 +45,17 @@
           </div>
 
           <div class="input-group input-group-sm">
-            <input type="date" class="form-control" id="date_before" [(ngModel)]="dateBefore" (change)="onChangeDebounce()">
-          </div>
+            <input class="form-control" [placeholder]="datePlaceHolder" id="dateBefore" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()"
+                    [(ngModel)]="dateBefore" ngbDatepicker #dateBeforePicker="ngbDatepicker">
+            <div class="input-group-append">
+              <button class="btn btn-outline-secondary" (click)="dateBeforePicker.toggle()" type="button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
+                  <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
+                </svg>
+              </button>
+            </div>
+          </div>
+          
         </div>
     </div>
   </div>

src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts

@@ -1,7 +1,10 @@
 import { formatDate } from '@angular/common';
 import { Component, EventEmitter, Input, Output, OnInit, OnDestroy } from '@angular/core';
+import { NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap';
 import { Subject, Subscription } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { debounceTime } from 'rxjs/operators';
+import { SettingsService } from 'src/app/services/settings.service';
+import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter';
 
 export interface DateSelection {
   before?: string
@@ -16,10 +19,17 @@ const LAST_YEAR = 3
 @Component({
   selector: 'app-date-dropdown',
   templateUrl: './date-dropdown.component.html',
-  styleUrls: ['./date-dropdown.component.scss']
+  styleUrls: ['./date-dropdown.component.scss'],
+  providers: [
+    {provide: NgbDateAdapter, useClass: ISODateAdapter},
+  ]
 })
 export class DateDropdownComponent implements OnInit, OnDestroy {
 
+  constructor(settings: SettingsService) {
+    this.datePlaceHolder = settings.getLocalizedDateInputFormat()
+  }
+
   quickFilters = [
     {id: LAST_7_DAYS, name: $localize`Last 7 days`},
     {id: LAST_MONTH, name: $localize`Last month`},
@@ -27,6 +37,8 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
     {id: LAST_YEAR, name: $localize`Last year`}
   ]
 
+  datePlaceHolder: string
+
   @Input()
   dateBefore: string
 

src-ui/src/app/utils/ngb-iso-date-adapter.ts

@@ -0,0 +1,27 @@
+import { Injectable } from "@angular/core";
+import { NgbDateAdapter, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";
+
+@Injectable()
+export class ISODateAdapter extends NgbDateAdapter<string> {
+
+  fromModel(value: string | null): NgbDateStruct | null {
+    if (value) {
+      let date = new Date(value)
+      return {
+        day : date.getDate(),
+        month : date.getMonth() + 1,
+        year : date.getFullYear()
+      }
+    } else {
+      return null
+    }
+  }
+
+  toModel(date: NgbDateStruct | null): string | null {
+    if (date) {
+      return date.year.toString().padStart(4, '0') + "-" + date.month.toString().padStart(2, '0') + "-" + date.day.toString().padStart(2, '0')
+    } else {
+      return null
+    }
+  }
+}

src-ui/src/app/utils/ngb-iso-date-time-adapter.ts

@@ -2,7 +2,7 @@ import { Injectable } from "@angular/core";
 import { NgbDateAdapter, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";
 
 @Injectable()
-export class ISODateAdapter extends NgbDateAdapter<string> {
+export class ISODateTimeAdapter extends NgbDateAdapter<string> {
 
   fromModel(value: string | null): NgbDateStruct | null {
     if (value) {