Angular Date Picker Component

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

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

  public date = new Date();

}

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

@Component({
  selector: 'docs-date-picker02',
  templateUrl: './date-picker02.component.html',
  standalone: true,
  imports: [
    RowComponent,
    ColComponent,
    DatePickerComponent,
    TemplateIdDirective,
    ButtonDirective,
    DropdownCloseDirective,
    DatePipe
  ]
})
export class DatePicker02Component {
  public date?: Date | null = new Date();
  public calendarDate = new Date(Date.now());

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

  onCancel() {
    this.date = null;
  }
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeEs from '@angular/common/locales/es';

import { ColComponent, DatePickerComponent, RowComponent } from '@coreui/angular';

registerLocaleData(localeEs);     // es-ES

@Component({
  selector: 'docs-date-picker15',
  templateUrl: './date-picker15.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [RowComponent, ColComponent, DatePickerComponent]
})
export class DatePicker15Component {}

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

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

  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;
  };
}