How to install & use Bootstrap DateRangePicker in Angular 7+ versions

Bootstrap Daterangepicker Angular install

Source Origin: https://github.com/dangrossman/daterangepicker/issues/1800#issuecomment-526058328
Special thanks to: https://github.com/ahmadmu

As of Angular 8: You need to install moment, jquery, daterangepicker, and @types/daterangepicker first, import them into your component and then write something similar to this:

<div>
      <input #calender class="form-control col mr-2" id="duration" type="text" formControlName="duration"
             placeholder="Select Time Range"/>
    </div>

import * as $ from 'jquery';
import * as moment from 'moment';
import * as daterangepicker from 'daterangepicker';

...

@ViewChild('calender', {static: true}) calender: ElementRef;

private time = moment().subtract(1, 'days');
private StartTime = new Date(this.time.year(), this.time.month(), this.time.date() - 30, this.time.hour(), this.time.minute());
private EndTime = new Date(this.time.year(), this.time.month(), this.time.date(), this.time.hour() - 6, this.time.minute());

ngOnInit() {
  this.getTimeRange()
}

private getTimeRange() {
    const dp = new daterangepicker(
      this.calender.nativeElement,
      {
        // timePicker: true,
        showDropdowns: true,
        autoApply: true,
        alwaysShowCalendars: true,
        timePicker: true,
        startDate: this.StartTime,
        endDate: this.EndTime,
        ranges: {
          'Today': [moment().startOf('day'), moment().endOf('day')],
          'Yesterday': [moment().subtract(1, 'day').startOf('day'), moment().subtract(1, 'day').endOf('day')],
          'last 7 days': [moment().subtract(7, 'days'), moment()],
          'last 30 days': [moment().subtract(30, 'days'), moment()],
          'This Month': [moment().startOf('month'), moment().endOf('month')],
          'This Year': [moment().startOf('years'), moment().endOf('years')],
          'last 365 days': [moment(), moment().subtract(365, 'days')],
        },
        locale: {
          format: ' DD-MM-YYYY hh:mm A '
        }
      },
      (startDate, endDate, label) => {
        const start = moment(startDate, 'YYYY-MM-DD hh:mm.ss');
        const end = moment(endDate, 'YYYY-MM-DD hh:mm.ss');

        this.StartTime = new Date(Number(start.format('YYYY')), Number(start.format('MM')) - 1, start.date(), start.hour(), start.minute());
        this.EndTime = new Date(Number(end.format('YYYY')), Number(end.format('MM')) - 1, end.date(), end.hour(), end.minute()); // converting string to time

        console.log('StartTime: ' + this.StartTime + '  End: ' + this.EndTime);

      }
    );

  }
  
  
This would probably work as well for earlier and later versions.

https://www.npmjs.com/package/jquery
https://www.npmjs.com/package/moment
https://www.npmjs.com/package/bootstrap-daterangepicker  Or https://www.npmjs.com/package/daterangepicker

### Copy "daterangepicker.css" relative path from node_modules (Like "node_modules/bootstrap-daterangepicker/daterangepicker.css") and paste under styles in angular.json.