Angular Date Range Picker Component

import { Component } from '@angular/core';
import { ColComponent, DateRangePickerComponent, RowComponent } from '@coreui/angular';

@Component({
  selector: 'docs-date-range-picker01',
  templateUrl: './date-range-picker01.component.html',
  standalone: true,
  imports: [RowComponent, ColComponent, DateRangePickerComponent]
})
export class DateRangePicker01Component {

  date = new Date();
  startDate = new Date(this.date.getFullYear(), this.date.getMonth(), 11);
  endDate = new Date(this.date.getFullYear(), this.date.getMonth(), 17);

}

import { DatePipe } from '@angular/common';
import { Component } from '@angular/core';
import {
  ButtonDirective,
  ColComponent,
  DateRangePickerComponent,
  DropdownCloseDirective,
  RowComponent,
  TemplateIdDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-date-range-picker02',
  templateUrl: './date-range-picker02.component.html',
  standalone: true,
  imports: [RowComponent, ColComponent, DateRangePickerComponent, TemplateIdDirective, ButtonDirective, DropdownCloseDirective, DatePipe]
})
export class DateRangePicker02Component {

  public date = new Date();
  public startDate?: Date | null = new Date(new Date().setDate(this.date.getDate() + 1));
  public endDate?: Date | null = new Date(new Date().setDate(this.date.getDate() + 3));
  public calendarDate = new Date(Date.now());

  onToday() {
    this.calendarDate = new Date(Date.now());
  }

  onClear() {
    this.startDate = null;
    this.endDate = null;
  }
}

import { Component } from '@angular/core';
import { ColComponent, DateRangePickerComponent, RowComponent } from '@coreui/angular';

@Component({
  selector: 'docs-date-range-picker06',
  templateUrl: './date-range-picker06.component.html',
  standalone: true,
  imports: [RowComponent, ColComponent, DateRangePickerComponent]
})
export class DateRangePicker06Component {

  public calendarDate = new Date(2022, 2, 1);
  public disabledDates = [
    [new Date(2022, 2, 4), new Date(2022, 2, 7)], // range of dates that cannot be selected
    new Date(2022, 2, 16), // single date that cannot be selected
    new Date(2022, 3, 16),
    [new Date(2022, 4, 2), new Date(2022, 4, 8)]
  ];
  public maxDate = new Date(2022, 5, 0);
  public minDate = new Date(2022, 0, 1);

  dateFilter = (date: Date | null): boolean => {
    const day = date?.getDay();
    return day !== 0;
  };
}

import { Component } from '@angular/core';
import { ColComponent, DateRangePickerComponent, RowComponent } from '@coreui/angular';

@Component({
  selector: 'docs-date-range-picker07',
  templateUrl: './date-range-picker07.component.html',
  standalone: true,
  imports: [RowComponent, ColComponent, DateRangePickerComponent]
})
export class DateRangePicker07Component {

  public customRanges = {
    Today: [new Date(), new Date()],
    Yesterday: [
      new Date(new Date().setDate(new Date().getDate() - 1)),
      new Date(new Date().setDate(new Date().getDate() - 1))
    ],
    'Last 7 Days': [
      new Date(new Date().setDate(new Date().getDate() - 6)),
      new Date(new Date())
    ],
    'Last 30 Days': [
      new Date(new Date().setDate(new Date().getDate() - 29)),
      new Date(new Date())
    ],
    'This Month': [
      new Date(new Date().setDate(1)),
      new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)
    ],
    'Last Month': [
      new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1),
      new Date(new Date().getFullYear(), new Date().getMonth(), 0)
    ]
  };
}