ng-mat-daterange-picker/src/app/modules/ngx-mat-drp/picker-overlay/picker-overlay.component.html

[](https://circleci.com/gh/ashishgkwd/ngx-mat-daterange-picker) [](https

<div [@transformPickerOverlay]="shouldAnimate" class="ngx-mat-drp-calendar-container">

  <div class="ngx-mat-drp-calendar-item">
    <calendar-wrapper 
    [prefixLabel]="startDatePrefix"
    [selectedDate]="fromDate"
    [minDate]="fromMinDate"
    [maxDate]="fromMaxDate"
    (selectedDateChange)="updateFromDate($event)">
  </calendar-wrapper>
  </div>
  <div class="ngx-mat-drp-calendar-item">
    <calendar-wrapper 
    [prefixLabel]="endDatePrefix"
    [selectedDate]="toDate"
    [minDate]="toMinDate"
    [maxDate]="toMaxDate" 
    (selectedDateChange)="updateToDate($event)">
  </calendar-wrapper>
  </div>
  <div class="ngx-mat-drp-calendar-item">
    <div class="ngx-mat-drp-menu">
      <mat-drp-presets [presets]="presets" (presetChanged)="updateRangeByPreset($event)"></mat-drp-presets>
      <div class="ngx-mat-drp-controls">
        <button mat-button color="primary" (click)="applyNewDates($event)">{{applyLabel}}</button>
        <button mat-button (click)="discardNewDates($event)">{{cancelLabel}}</button>
      </div>
    </div>
  </div>
</div>