paperless-ngx/src-ui/src/app/components/common/input/date/date.component.html

<div class="mb-3" [class.pb-3]="error">
  <div class="row">
    <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
      <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
      @if (removable) {
        <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
          <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
          </button>
        }
      </div>
      <div class="position-relative" [class.col-md-9]="horizontal">
        <div class="input-group" [class.is-invalid]="error">
          <input #inputField class="form-control" [class.is-invalid]="error" [placeholder]="placeholder" [id]="inputId" maxlength="10"
            (dateSelect)="onChange(value)" (change)="onChange(value)" (keypress)="onKeyPress($event)" (paste)="onPaste($event)"
            name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel" [disabled]="disabled" [footerTemplate]="datePickerFooterTemplate">
          <button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button" [disabled]="disabled">
            <i-bs width="1.2em" height="1.2em" name="calendar"></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)="value = today; onChange(value); datePicker.close()" i18n>Today</button>
              <button type="button" class="btn btn-secondary ms-auto" (click)="datePicker.close()" i18n>Close</button>
            </div>
          </ng-template>
          @if (showFilter) {
            <button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="this.value === null" title="{{ filterButtonTitle }}">
              <i-bs width="1.2em" height="1.2em" name="filter"></i-bs>
            </button>
          }
        </div>
        <div class="invalid-feedback position-absolute top-100" i18n>Invalid date.</div>
        @if (hint) {
          <small class="form-text text-muted">{{hint}}</small>
        }
        @if (getSuggestions().length > 0) {
          <small>
            <span i18n>Suggestions:</span>&nbsp;
            @for (s of getSuggestions(); track s) {
              <a (click)="onSuggestionClick(s)" [routerLink]="[]">{{s}}</a>&nbsp;
            }
          </small>
        }
      </div>
    </div>
  </div>