perfdb/pdb-js/src/app/components/datepicker/date-picker.component.html

<style>
  #date-box {
    width: 23.5em;
  }

  .header-box {
    display: flex;
    justify-content: end;
  }

  .date-picker-overlay {
    width: 500px;
    transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
      0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    background-color: white;
  }

  .tab-quick {
    display: flex;
    flex-direction: row;
    gap: 2em;
  }
  .tab-quick-column {
    display: flex;
    flex-direction: column;
  }

  .date-picker-form-field {
    width: 23.5em;
  }
</style>

<div class="header-box">
  <button
    mat-button
    matTooltip="Date Picker"
    (click)="isOpen = !isOpen"
    cdkOverlayOrigin
    #trigger="cdkOverlayOrigin"
  >
    {{ dateValue.display }}
  </button>
</div>

<ng-template
  cdkConnectedOverlay
  [cdkConnectedOverlayOrigin]="trigger"
  [cdkConnectedOverlayOpen]="isOpen"
>
  <div class="date-picker-overlay">
    <mat-tab-group
      animationDuration="0ms"
      (selectedTabChange)="tabChange()"
      [(selectedIndex)]="selectedTabIndex"
    >
      <mat-tab label="Quick">
        <div class="tab-quick">
          <div class="tab-quick-column">
            <button mat-button (click)="applyQuick('BD/P1D', 'today')">
              Today
            </button>
            <button mat-button (click)="applyQuick('B-1D/P1D', 'yesterday')">
              Yesterday
            </button>
            <button mat-button (click)="applyQuick('BW/EW', 'this week')">
              This Week
            </button>
            <button mat-button (click)="applyQuick('BM/EM', 'this month')">
              This Month
            </button>
            <button mat-button (click)="applyQuick('BQ/EQ', 'this quarter')">
              This Quarter
            </button>
            <button mat-button (click)="applyQuick('BY/EY', 'this year')">
              This Year
            </button>
          </div>
          <div class="tab-quick-column">
            <button mat-button (click)="applyQuick('B-7D/ED', 'last 7 days')">
              Last 7 Days
            </button>
            <button mat-button (click)="applyQuick('B-1W/ED', 'last week')">
              Last Week
            </button>
            <button mat-button (click)="applyQuick('B-30D/ED', 'last 30 days')">
              Last 30 Days
            </button>
            <button mat-button (click)="applyQuick('B-1M/E-1M', 'last month')">
              Last Month
            </button>
            <button
              mat-button
              (click)="applyQuick('B-3M/E-1M', 'last 3 months')"
            >
              Last 3 Months
            </button>
            <button mat-button (click)="applyQuick('B-1Y/E-1Y', 'last year')">
              Last Year
            </button>
          </div>
        </div>
      </mat-tab>

      <mat-tab label="Relative">
        <mat-form-field
          class="pdb-form-number-small"
          (wheel)="scrollRelativeTimeRange($event, 'seconds', 59)"
        >
          <mat-label>Seconds:</mat-label>
          <input
            matInput
            name="relative-time-range-seconds"
            [(ngModel)]="relativeTimeRange.seconds"
            type="number"
            min="0"
            max="59"
          />
        </mat-form-field>
        <mat-form-field
          class="pdb-form-number-small"
          (wheel)="scrollRelativeTimeRange($event, 'minutes', 59)"
        >
          <mat-label>Minutes:</mat-label>
          <input
            matInput
            name="relative-time-range-minutes"
            [(ngModel)]="relativeTimeRange.minutes"
            type="number"
            min="0"
            max="59"
          />
        </mat-form-field>
        <mat-form-field
          class="pdb-form-number-small"
          (wheel)="scrollRelativeTimeRange($event, 'hours', 23)"
        >
          <mat-label>Hours:</mat-label>
          <input
            matInput
            name="relative-time-range-hours"
            [(ngModel)]="relativeTimeRange.hours"
            type="number"
            min="0"
            max="23"
          />
        </mat-form-field>
        <mat-form-field
          class="pdb-form-number-small"
          (wheel)="scrollRelativeTimeRange($event, 'days', 367)"
        >
          <mat-label>Days:</mat-label>
          <input
            matInput
            name="relative-time-range-days"
            [(ngModel)]="relativeTimeRange.days"
            type="number"
            min="0"
            max="367"
          />
        </mat-form-field>
        <mat-form-field
          class="pdb-form-number-small"
          (wheel)="scrollRelativeTimeRange($event, 'months', 11)"
        >
          <mat-label>Months:</mat-label>
          <input
            matInput
            name="relative-time-range-months"
            [(ngModel)]="relativeTimeRange.months"
            type="number"
            min="0"
            max="11"
          />
        </mat-form-field>
        <mat-form-field
          class="pdb-form-number-small"
          (wheel)="scrollRelativeTimeRange($event, 'years', 10)"
        >
          <mat-label>Years:</mat-label>
          <input
            matInput
            name="relative-time-range-years"
            [(ngModel)]="relativeTimeRange.years"
            type="number"
            min="0"
            max="10"
          />
        </mat-form-field>
        <button mat-button (click)="applyRelativeTimeRange()">Apply</button>
      </mat-tab>
      <mat-tab label="Absolute">
        <form [formGroup]="dateRangeFormGroup">
          <mat-form-field class="date-picker-form-field">
            <mat-label>Date Range:</mat-label>
            <input
              matInput
              [formControl]="dateRangeFormGroup.controls.dateRange"
              name="dates"
            />
          </mat-form-field>
          <button mat-button (click)="applyAbsoluteTime()">Apply</button>
        </form>
      </mat-tab>
    </mat-tab-group>
  </div>
</ng-template>