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

import { JsonPipe } from '@angular/common';
import { Component, OnInit, signal } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { ColComponent, DatePickerComponent, RowComponent } from '@coreui/angular';

interface IDatePickerForm {
  datePicker: FormControl<Date | undefined | null>;
}

@Component({
  selector: 'docs-date-picker13',
  templateUrl: './date-picker13.component.html',
  standalone: true,
  imports: [RowComponent, ColComponent, ReactiveFormsModule, DatePickerComponent, JsonPipe]
})
export class DatePicker13Component implements OnInit {
  date = new Date();

  formGroup!: FormGroup<IDatePickerForm>;

  readonly #toLocaleDateString = signal('');

  get toLocaleDateString() {
    return this.#toLocaleDateString();
  }

  ngOnInit(): void {
    const date = new Date(this.date.getFullYear(), this.date.getMonth(), this.date.getDate());

    this.formGroup = new FormGroup<IDatePickerForm>({
      datePicker: new FormControl(date, { nonNullable: false })
    });

    this.formGroup.valueChanges.subscribe((value) => {
      this.#toLocaleDateString.set(value.datePicker?.toLocaleDateString() ?? '');
    });
  }
}

import { DatePipe, JsonPipe } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ColComponent, DatePickerComponent, RowComponent } from '@coreui/angular';

@Component({
  selector: 'docs-date-picker14',
  templateUrl: './date-picker14.component.html',
  standalone: true,
  imports: [RowComponent, ColComponent, ReactiveFormsModule, FormsModule, DatePickerComponent, JsonPipe, DatePipe]
})
export class DatePicker14Component implements OnInit {
  date!: Date;

  ngOnInit(): void {
    const date = new Date();
    this.date = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
  }
}