daterange.component.html

<!-- <div class="date-range">
  <div class="date-range__presets">
    <button #presetsTrigger
            mat-raised-button
            [matMenuTriggerFor]="presetMenu"
            (click)="$event.stopPropagation()">{{selectedPreset.name}}
      <mat-icon>arrow_drop_down</mat-icon>
    </button>
    <mat-menu #presetMenu="matMenu"
              [overlapTrigger]="false">
      <button mat-menu-item
              class="date-range__preset-item"
              (click)="onPresetSelect(preset)"
              *ngFor="let preset of presets">{{preset.name}}</button>
    </mat-menu>
  </div>
  <div class="date-range__custom-range"
       *ngIf="selectedPreset.name === 'Custom'">
    <div class="date-range__custom-range-control mat-elevation-z1"
         [matMenuTriggerFor]="datepickerMenu">
      <mat-icon>date_range</mat-icon>
      <input type="text"
             class="date-range__custom-range-input"
             [value]="getDisplayDates()[0] + ' - ' +getDisplayDates()[1]">
    </div>
    <mat-menu [overlapTrigger]="false"
              #datepickerMenu>
      <div (click)="$event.stopPropagation()"
           class="pa-2 display-flex">
        <mat-calendar [selected]="selectedPreset.range[0]"
                      class="mr-2"></mat-calendar>
        <mat-calendar [selected]="selectedPreset.range[1]"></mat-calendar>
      </div>
    </mat-menu>
  </div>
</div> -->
<mat-form-field appearance="fill">
  <input type="text"
         matInput
         [ranges]="ranges"
         [locale]="locale"
         [alwaysShowCalendars]="true"
         [showCustomRangeLabel]="true"
         [linkedCalendars]="true"
         ngxDaterangepickerMd
         [(ngModel)]="selectedPreset"
         class="form-control" />
  <mat-icon matSuffix>date_range</mat-icon>
</mat-form-field>

<script>
import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import {
  DateRangePreset,
  TODAY,
  YESTERDAY
} from '@mojo/core/components/date-range/presets.util';
import { format } from 'date-fns';

@Component({
  selector: 'jv-date-range',
  templateUrl: './date-range.component.html',
  styleUrls: ['./date-range.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => DateRangeComponent),
      multi: true
    }
  ]
})
export class DateRangeComponent implements ControlValueAccessor {
  // The format in which the date is to be consumed.
  // Primarily for the purposes of sending data to server.
  @Input() outputFormat;

  // What's the format of the provided input dates.
  @Input() inputFormat;
  // The format in which the selected dates should show up in
  // the triggering Input fields.
  @Input() displayFormat;

  // List of preset ranges that needs to be shown.
  @Input() presets;

  // Min date that a user can select
  @Input() min;

  // Max date that a user can select.
  @Input() max;

  ranges = {};

  @Input() defaultRange: DateRangePreset = YESTERDAY;

  // Initial value of the date range.
  @Input('value') _value = [];

  selectedPreset: DateRangePreset = this.defaultRange;
  locale = {
    format: 'MMM DD, YY'
  };
  propagateChange = (_: any) => {};

  get value() {
    return this._value;
  }
  set value(val) {
    this._value = val;
    this.propagateChange(val);
  }
  ngOnInit() {
    [TODAY, YESTERDAY].forEach(preset => {
      this.ranges[preset.name] = preset.range;
    });
  }
  // ControlValueAccessor stuff!
  writeValue(value: any) {
    if (value) {
      this.value = value;
    }
  }
  registerOnChange(fn) {
    this.propagateChange = fn;
  }
  registerOnTouched() {}

  onPresetSelect(preset) {
    this.selectedPreset = preset;
    this.value = preset.range;
  }

  getDisplayDates() {
    return this.selectedPreset.range.map(date => {
      return format(date, this.displayFormat);
    });
  }
}

</script>