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

  <div class="btn-group w-100" ngbDropdown role="group">
  <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="dateBefore || dateAfter ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
    {{title}}
    <app-clearable-badge [selected]="isActive" (cleared)="reset()"></app-clearable-badge><span class="visually-hidden">selected</span>
  </button>
  <div class="dropdown-menu date-dropdown shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
    <div class="list-group list-group-flush">
        <button *ngFor="let rd of relativeDates" class="list-group-item small list-goup list-group-item-action d-flex p-2" role="menuitem" (click)="setRelativeDate(rd.id)">
          <div class="selected-icon">
            <svg *ngIf="relativeDate === rd.id" fill="currentColor" class="buttonicon-sm">
              <use xlink:href="assets/bootstrap-icons.svg#check"/>
          </svg>
          </div>
          <div class="d-flex justify-content-between w-100 align-items-center ps-2">
            <div class="pe-2 pe-lg-4">
              {{rd.name}}
            </div>
            <div class="text-muted small pe-2">
              <span class="small">
                {{ rd.date | customDate:'mediumDate' }} &ndash; <ng-container i18n>now</ng-container>
              </span>
            </div>
          </div>
        </button>
        <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">
            <div i18n>After</div>
            <a *ngIf="dateAfter" class="btn btn-link p-0 m-0" (click)="clearAfter()">
              <svg fill="currentColor" class="buttonicon-sm">
                <use xlink:href="assets/bootstrap-icons.svg#x"/>
              </svg>
              <small i18n>Clear</small>
            </a>
          </div>

          <div class="input-group input-group-sm">
            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
                    maxlength="10" [(ngModel)]="dateAfter" ngbDatepicker #dateAfterPicker="ngbDatepicker">
            <button class="btn btn-outline-secondary" (click)="dateAfterPicker.toggle()" type="button">
              <svg fill="currentColor" class="buttonicon-sm">
                <use xlink:href="assets/bootstrap-icons.svg#calendar"/>
              </svg>
            </button>
          </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">
            <div i18n>Before</div>
            <a *ngIf="dateBefore" class="btn btn-link p-0 m-0" (click)="clearBefore()">
              <svg fill="currentColor" class="buttonicon-sm">
                <use xlink:href="assets/bootstrap-icons.svg#x"/>
              </svg>
              <small i18n>Clear</small>
            </a>
          </div>

          <div class="input-group input-group-sm">
            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
                    maxlength="10" [(ngModel)]="dateBefore" ngbDatepicker #dateBeforePicker="ngbDatepicker">
            <button class="btn btn-outline-secondary" (click)="dateBeforePicker.toggle()" type="button">
              <svg fill="currentColor" class="buttonicon-sm">
                <use xlink:href="assets/bootstrap-icons.svg#calendar"/>
              </svg>
            </button>
          </div>

        </div>
    </div>
  </div>
</div>