calendar date range random

gistfile1.ts

import {Component, OnInit} from '@angular/core';
import * as moment from 'moment';
import 'rxjs/Rx';
import {Subject} from 'rxjs/Subject';
import {Observable} from 'rxjs/Observable';
import {Subscriber} from 'rxjs/Subscriber';

@Component({
  selector: 'app-date-range',
  template: `<p-calendar
    [ngModel]="startDate$ | async"
    (ngModel)="startDateModel$.next($event)"
    [minDate]="minDateValue"
    [maxDate]="maxDateValue"
    [name]="startDateName"
    (onSelect)="startDateModel$.next($event)"
    dateFormat="dd.mm.yy"
    showTime="showTime"
    hourFormat="24"
  ></p-calendar>


  <p-calendar
    [ngModel]="endDate$ | async"
    (ngModel)="endDateModel$.next($event)"
    [minDate]="minDateValue"
    [maxDate]="maxDateValue"
    [name]="endDateName"
    (onSelect)="endDateModel$.next($event)"
    dateFormat="dd.mm.yy"
    showTime="showTime"
    hourFormat="24"
  ></p-calendar>
  <div>red {{startDate$ | async}}</div>
  <div>red {{endDate$ | async}}</div>

  `
})
export class DateRangeComponent implements OnInit {
  public startDateName = 'Start Date';
  public endDateName = 'End Date';
  public minDateValue: Date = new Date('07-11-2016');
  public maxDateValue: Date = moment().endOf('day').toDate();

  public startDate = new Date('07-10-2017');
  public endDate = new Date();

  public startDateModel$ = new Subject();
  public endDateModelExternal$ = new Subject();

  public endDateModel$ = new Subject();

  public endDate$ = this.endDateModel$.merge(this.endDateModelExternal$)
    .startWith(new Date())
    .distinctUntilChanged();
  public startDate$ = this.startDateModel$
    .startWith(new Date('07-10-2017'))
    .distinctUntilChanged();

  constructor() {
  }

  // TODO - clean up subscriptions in ngOnDestroy
  ngOnInit() {
    const myInterval = Observable.interval(3000);
    myInterval.subscribe(() => this.endDateModelExternal$.next(new Date()));

    Observable.combineLatest(this.startDate$, this.endDate$).subscribe(([startDate, endDate]) => {
      if (moment(endDate).isBefore(moment(startDate).startOf('day'))) {
        this.startDateModel$.next(moment(endDate).startOf('day').toDate());
      }

      if (moment(startDate).isAfter(moment(endDate).startOf('day'))) {
        this.endDateModel$.next(moment(startDate).endOf('day').toDate());
      }
      console.log(startDate, endDate);
    });
  }

  updateStartDate() {
    if (moment(this.startDate).isAfter(moment(this.endDate).startOf('day'))) {
      this.endDate = moment(this.startDate).endOf('day').toDate();
    }
  }

  updateEndDate() {
    if (moment(this.endDate).isBefore(moment(this.startDate).startOf('day'))) {
      this.startDate = moment(this.endDate).startOf('day').toDate();
    }
  }
}