Angular Date Picker Component

Date Picker

Create consistent cross-browser and cross-device Angular date picker.

Available in Other JavaScript Frameworks

CoreUI Angular Date Picker Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:

On this page

About

The Angular Date Picker lets users pick a date from a calendar or type it into the input, and works with Angular reactive, template-driven and signal forms. It shows dates in any locale supported by the JavaScript Internationalization API and supports right-to-left layouts, and its look can be adjusted with CSS variables and Sass.

Its inputs control the value, the visible month, which dates can be picked, and whether a day, a week, a month or a year is picked. The date picker can be used with the keyboard alone, and its calendar and clear buttons can be named in the language of your page, see Accessibility.

Examples

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

@Component({
  selector: 'docs-date-picker-example',
  templateUrl: './date-picker-example.component.html',
  imports: [RowComponent, ColComponent, DatePickerComponent]
})
export class DatePickerExampleComponent {
  public date = new Date();
}

<c-row>
  <c-col class="mb-3 mb-lg-0" lg="4">
    <c-date-picker closeOnSelect />
  </c-col>

  <c-col lg="4">
    <c-date-picker [date]="date" [showAdjacentDays]="false"/>
  </c-col>
</c-row>

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

@Component({
  selector: 'docs-date-picker-with-footer',
  templateUrl: './date-picker-with-footer.component.html',
  imports: [
    RowComponent,
    ColComponent,
    DatePickerComponent,
    TemplateIdDirective,
    ButtonDirective,
    DropdownCloseDirective,
    DatePipe
  ]
})
export class DatePickerWithFooterComponent {
  readonly date = signal<Date | null>(new Date());
  readonly calendarDate = signal(new Date(Date.now()));

  protected onToday() {
    this.calendarDate.set(new Date(Date.now()));
    this.date.set(this.calendarDate());
  }

  protected onCancel() {
    this.date.set(null);
  }
}

<c-row>
  <c-col lg="4">
    <c-date-picker
      [(date)]="date"
      #datePicker="cDatePicker"
      [calendarDate]="calendarDate()"
    >
      <ng-template cTemplateId="datePickerFooter" let-dropdown>
        <button cButton color="danger" variant="ghost" size="sm" (click)="onToday();" class="me-auto">Today</button>
        <button cButton color="primary" size="sm" (click)="onCancel()" cDropdownClose [dropdownComponent]="dropdown">Cancel</button>
        <button cButton color="primary" size="sm" [disabled]="!date" cDropdownClose [dropdownComponent]="dropdown">OK
        </button>
      </ng-template>
    </c-date-picker>
  </c-col>
  <c-col class="d-flex align-items-center">
    {{date() | date}}
  </c-col>
</c-row>

Weeks

Set selectionType to week to pick a whole week, and add showWeekNumber to show the week numbers in the calendar. Since 5.7.38 the input shows a week as 2025W07, numbered as its row in the week number column, and reads that text back.

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

@Component({
  selector: 'docs-date-picker-weeks',
  templateUrl: './date-picker-weeks.component.html',
  imports: [RowComponent, ColComponent, DatePickerComponent]
})
export class DatePickerWeeksComponent {
  readonly date = new Date(2025, 1, 10);
}

<c-row>
  <c-col class="mb-3 mb-sm-0" sm="6" lg="5">
    <c-date-picker locale="en-US" selectionType="week" showWeekNumber />
  </c-col>
  <c-col sm="6" lg="5">
    <c-date-picker [calendarDate]="date" [date]="date" locale="en-US" selectionType="week" showWeekNumber />
  </c-col>
</c-row>

Months

Set selectionType to month to pick a whole month. Since 5.7.38 the input shows a month as 2022-08 and reads that text back.

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

@Component({
  selector: 'docs-date-picker-months',
  templateUrl: './date-picker-months.component.html',
  imports: [RowComponent, ColComponent, DatePickerComponent]
})
export class DatePickerMonthsComponent {
  readonly date = new Date(2022, 7, 1);
}

<c-row>
  <c-col class="mb-3 mb-sm-0" sm="6" lg="5">
    <c-date-picker locale="en-US" selectionType="month" />
  </c-col>
  <c-col sm="6" lg="5">
    <c-date-picker [calendarDate]="date" [date]="date" locale="en-US" selectionType="month" />
  </c-col>
</c-row>

Years

Set selectionType to year to pick a whole year. Since 5.7.38 the input shows a year as 2022 and reads that text back.

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

@Component({
  selector: 'docs-date-picker-years',
  templateUrl: './date-picker-years.component.html',
  imports: [RowComponent, ColComponent, DatePickerComponent]
})
export class DatePickerYearsComponent {
  readonly date = new Date(2022, 0, 1);
}

<c-row>
  <c-col class="mb-3 mb-sm-0" sm="6" lg="5">
    <c-date-picker locale="en-US" selectionType="year" />
  </c-col>
  <c-col sm="6" lg="5">
    <c-date-picker [calendarDate]="date" [date]="date" locale="en-US" selectionType="year" />
  </c-col>
</c-row>

Sizing

Set heights using size property like size="lg" and size="sm".

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

@Component({
  selector: 'docs-date-picker-sizing',
  templateUrl: './date-picker-sizing.component.html',
  imports: [RowComponent, ColComponent, DatePickerComponent]
})
export class DatePickerSizingComponent {}

<c-row class="mb-4">
  <c-col lg="5">
    <c-date-picker size="lg" />
  </c-col>
</c-row>

<c-row>
  <c-col lg="4">
    <c-date-picker size="sm" />
  </c-col>
</c-row>

Disabled

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.

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

@Component({
  selector: 'docs-date-picker-disabled',
  templateUrl: './date-picker-disabled.component.html',
  imports: [RowComponent, ColComponent, DatePickerComponent]
})
export class DatePickerDisabledComponent {}

<c-row>
  <c-col lg="4">
    <c-date-picker disabled />
  </c-col>
</c-row>

Readonly

Add the inputReadOnly boolean attribute to prevent modification of the input value.

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

@Component({
  selector: 'docs-date-picker-readonly',
  templateUrl: './date-picker-readonly.component.html',
  imports: [RowComponent, ColComponent, DatePickerComponent]
})
export class DatePickerReadonlyComponent {}

<c-row>
  <c-col lg="4">
    <c-date-picker inputReadOnly />
  </c-col>
</c-row>

Preview date on hover

Added in v5.7.38

By default, while no date is picked, the date picker shows the hovered or focused calendar date in the input. To disable this feature, set [previewDateOnHover]="false".

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

@Component({
  selector: 'docs-date-picker-preview-date-on-hover',
  templateUrl: './date-picker-preview-date-on-hover.component.html',
  imports: [RowComponent, ColComponent, DatePickerComponent]
})
export class DatePickerPreviewDateOnHoverComponent {}

<c-row>
  <c-col class="mb-3 mb-sm-0" sm="6">
    <div class="form-label">With preview (default)</div>
    <c-date-picker locale="en-US" />
  </c-col>
  <c-col sm="6">
    <div class="form-label">Without preview</div>
    <c-date-picker [previewDateOnHover]="false" locale="en-US" />
  </c-col>
</c-row>

Format

Control the format of the date displayed in the input using the format property according to locale rules. Makes the date input read-only. format is applied only when locale is set and its Angular locale data is registered with registerLocaleData, as in the example below; with the default locale the input shows the date in the browser format. To write your own format and keep the input editable, use inputDateFormat with inputDateParse. See Custom formats.

import { 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-picker-format',
  templateUrl: './date-picker-format.component.html',
  imports: [RowComponent, ColComponent, DatePickerComponent]
})
export class DatePickerFormatComponent {}

<c-row>
  <c-col lg="4">
    <c-date-picker locale="es" format="dd MMMM yyy" closeOnSelect />
  </c-col>
</c-row>

Disabled dates

Add dates user cannot select using the disabledDates property.

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

@Component({
  selector: 'docs-date-picker-disabled-dates',
  templateUrl: './date-picker-disabled-dates.component.html',
  imports: [RowComponent, ColComponent, DatePickerComponent]
})
export class DatePickerDisabledDatesComponent {
  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;
  };
}

<c-row>
  <c-col lg="4">
    <c-date-picker
      [calendarDate]="calendarDate"
      [disabledDates]="disabledDates"
      locale="de-AT"
      [maxDate]="maxDate"
      [minDate]="minDate"
      [dateFilter]="dateFilter"
    />
  </c-col>
</c-row>

Disabling weekends

Pass a function to dateFilter to decide which dates can be picked: it receives a date and returns true when the date is selectable. To disable weekends, return false for Sunday (0) and Saturday (6).

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

@Component({
  selector: 'docs-date-picker-disabling-weekends',
  templateUrl: './date-picker-disabling-weekends.component.html',
  imports: [RowComponent, ColComponent, DatePickerComponent]
})
export class DatePickerDisablingWeekendsComponent {
  readonly disableWeekends = (date: Date): boolean => {
    const day = date.getDay();
    return day !== 0 && day !== 6;
  };
}

<c-row>
  <c-col lg="4">
    <c-date-picker [dateFilter]="disableWeekends" locale="en-US" />
  </c-col>
</c-row>

Non-english locale

The input reads a typed date in the numeric format it shows for the locale, with ., /, - or a space between the parts. Since 5.7.40 it also reads the digits of the locale and, in th-TH, the Buddhist year, and the spaces and the closing mark of the format may be left out. In other calendars, such as Persian (fa-IR) or the Japanese eras (ja-JP-u-ca-japanese), and in a format that shows an era, typed text is reported as datePickerParse: give inputDateFormat with inputDateParse to read it, or set inputReadOnly.

Auto

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

@Component({
  selector: 'docs-date-picker-auto',
  templateUrl: './date-picker-auto.component.html',
  imports: [RowComponent, ColComponent, DatePickerComponent]
})
export class DatePickerAutoComponent {}

<c-row>
  <c-col lg="4">
    <c-date-picker />
  </c-col>
</c-row>

Chinese

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

@Component({
  selector: 'docs-date-picker-chinese',
  templateUrl: './date-picker-chinese.component.html',
  imports: [RowComponent, ColComponent, DatePickerComponent]
})
export class DatePickerChineseComponent {}

<c-row>
  <c-col lg="4">
    <c-date-picker placeholder="入住日期" locale="zh-CN" />
  </c-col>
</c-row>

Japanese

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

@Component({
  selector: 'docs-date-picker-japanese',
  templateUrl: './date-picker-japanese.component.html',
  imports: [RowComponent, ColComponent, DatePickerComponent]
})
export class DatePickerJapaneseComponent {}

<c-row>
  <c-col lg="4">
    <c-date-picker placeholder="日付を選択" locale="ja" />
  </c-col>
</c-row>

Korean

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

@Component({
  selector: 'docs-date-picker-korean',
  templateUrl: './date-picker-korean.component.html',
  imports: [RowComponent, ColComponent, DatePickerComponent]
})
export class DatePickerKoreanComponent {}

<c-row>
  <c-col lg="4">
    <c-date-picker placeholder="날짜 선택" locale="ko" navYearFirst />
  </c-col>
</c-row>

Right to left support

RTL support is built-in and can be explicitly controlled through the $enable-rtl variables in scss.

Hebrew

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

@Component({
  selector: 'docs-date-picker-hebrew',
  templateUrl: './date-picker-hebrew.component.html',
  imports: [RowComponent, ColComponent, DatePickerComponent]
})
export class DatePickerHebrewComponent {}

<c-row>
  <c-col lg="4">
    <div dir="rtl">
      <c-date-picker locale="he-IL" placeholder="בחר תאריך" weekdayFormat="narrow" />
    </div>
  </c-col>
</c-row>

Persian

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

@Component({
  selector: 'docs-date-picker-persian',
  templateUrl: './date-picker-persian.component.html',
  imports: [RowComponent, ColComponent, DatePickerComponent]
})
export class DatePickerPersianComponent {}

<c-row>
  <c-col lg="4">
    <div dir="rtl">
      <c-date-picker inputReadOnly locale="fa-IR" placeholder="تاریخ شروع" weekdayFormat="narrow" />
    </div>
  </c-col>
</c-row>

Custom formats

Use inputDateFormat to write the date into the input in a format of your choice, and inputDateParse to read the typed text back into a Date. Unlike format, these keep the input editable. The examples below use the format and parse functions from date-fns, with the English and Spanish patterns 'MMMM dd, yyyy' and 'yyyy MMMM dd'.

import { format, parse } from 'date-fns';
import { es } from 'date-fns/locale';

import { Component } from '@angular/core';
import { format, parse } from 'date-fns';
import { es } from 'date-fns/locale';

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

@Component({
  selector: 'docs-date-picker-custom-formats',
  templateUrl: './date-picker-custom-formats.component.html',
  imports: [RowComponent, ColComponent, DatePickerComponent]
})
export class DatePickerCustomFormatsComponent {
  readonly date = new Date(2022, 7, 17);

  readonly formatEn = (date: Date) => format(date, 'MMMM dd, yyyy');
  readonly parseEn = (value: string | Date) => parse(String(value), 'MMMM dd, yyyy', new Date());
  readonly formatEs = (date: Date) => format(date, 'yyyy MMMM dd', { locale: es });
  readonly parseEs = (value: string | Date) => parse(String(value), 'yyyy MMMM dd', new Date(), { locale: es });
}

<c-row>
  <c-col class="mb-3 mb-lg-0" lg="6">
    <c-date-picker
      [calendarDate]="date"
      [date]="date"
      [inputDateFormat]="formatEn"
      [inputDateParse]="parseEn"
      locale="en-US"
    />
  </c-col>
  <c-col lg="6">
    <c-date-picker
      [calendarDate]="date"
      [date]="date"
      [inputDateFormat]="formatEs"
      [inputDateParse]="parseEs"
      locale="es-ES"
      placeholder="Seleccionar fecha"
    />
  </c-col>
</c-row>

Weeks

Set selectionType to week and give inputDateFormat and inputDateParse a week-based pattern, such as 'Io RRRR' (the ISO week number and its year). Add showWeekNumber to show the week numbers in the calendar.

import { Component } from '@angular/core';
import { format, parse } from 'date-fns';
import { es } from 'date-fns/locale';

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

@Component({
  selector: 'docs-date-picker-custom-formats-weeks',
  templateUrl: './date-picker-custom-formats-weeks.component.html',
  imports: [RowComponent, ColComponent, DatePickerComponent]
})
export class DatePickerCustomFormatsWeeksComponent {
  readonly date = new Date(2022, 2, 7);

  readonly formatEn = (date: Date) => format(date, 'Io RRRR');
  readonly parseEn = (value: string | Date) => parse(String(value), 'Io RRRR', new Date());
  readonly formatEs = (date: Date) => format(date, 'Io RRRR', { locale: es });
  readonly parseEs = (value: string | Date) => parse(String(value), 'Io RRRR', new Date(), { locale: es });
}

<c-row>
  <c-col class="mb-3 mb-lg-0" lg="6">
    <c-date-picker
      [calendarDate]="date"
      [date]="date"
      [inputDateFormat]="formatEn"
      [inputDateParse]="parseEn"
      locale="en-US"
      selectionType="week"
      showWeekNumber
    />
  </c-col>
  <c-col lg="6">
    <c-date-picker
      [calendarDate]="date"
      [date]="date"
      [inputDateFormat]="formatEs"
      [inputDateParse]="parseEs"
      locale="es-ES"
      placeholder="Seleccionar fecha"
      selectionType="week"
      showWeekNumber
    />
  </c-col>
</c-row>

Months

Set selectionType to month and give inputDateFormat and inputDateParse a month pattern, such as 'MMM yyyy'.

import { Component } from '@angular/core';
import { format, parse } from 'date-fns';
import { es } from 'date-fns/locale';

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

@Component({
  selector: 'docs-date-picker-custom-formats-months',
  templateUrl: './date-picker-custom-formats-months.component.html',
  imports: [RowComponent, ColComponent, DatePickerComponent]
})
export class DatePickerCustomFormatsMonthsComponent {
  readonly date = new Date(2022, 7, 1);

  readonly formatEn = (date: Date) => format(date, 'MMM yyyy');
  readonly parseEn = (value: string | Date) => parse(String(value), 'MMM yyyy', new Date());
  readonly formatEs = (date: Date) => format(date, 'MMM yyyy', { locale: es });
  readonly parseEs = (value: string | Date) => parse(String(value), 'MMM yyyy', new Date(), { locale: es });
}

<c-row>
  <c-col class="mb-3 mb-lg-0" lg="6">
    <c-date-picker
      [calendarDate]="date"
      [date]="date"
      [inputDateFormat]="formatEn"
      [inputDateParse]="parseEn"
      locale="en-US"
      selectionType="month"
    />
  </c-col>
  <c-col lg="6">
    <c-date-picker
      [calendarDate]="date"
      [date]="date"
      [inputDateFormat]="formatEs"
      [inputDateParse]="parseEs"
      locale="es-ES"
      placeholder="Seleccionar fecha"
      selectionType="month"
    />
  </c-col>
</c-row>

Years

Set selectionType to year and give inputDateFormat and inputDateParse a year pattern, such as 'yy'.

import { Component } from '@angular/core';
import { format, parse } from 'date-fns';
import { es } from 'date-fns/locale';

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

@Component({
  selector: 'docs-date-picker-custom-formats-years',
  templateUrl: './date-picker-custom-formats-years.component.html',
  imports: [RowComponent, ColComponent, DatePickerComponent]
})
export class DatePickerCustomFormatsYearsComponent {
  readonly date = new Date(2022, 0, 1);

  readonly formatEn = (date: Date) => format(date, 'yy');
  readonly parseEn = (value: string | Date) => parse(String(value), 'yy', new Date());
  readonly formatEs = (date: Date) => format(date, 'yy', { locale: es });
  readonly parseEs = (value: string | Date) => parse(String(value), 'yy', new Date(), { locale: es });
}

<c-row>
  <c-col class="mb-3 mb-lg-0" lg="6">
    <c-date-picker
      [calendarDate]="date"
      [date]="date"
      [inputDateFormat]="formatEn"
      [inputDateParse]="parseEn"
      locale="en-US"
      selectionType="year"
    />
  </c-col>
  <c-col lg="6">
    <c-date-picker
      [calendarDate]="date"
      [date]="date"
      [inputDateFormat]="formatEs"
      [inputDateParse]="parseEs"
      locale="es-ES"
      placeholder="Seleccionar fecha"
      selectionType="year"
    />
  </c-col>
</c-row>

Accessibility

Added in v5.7.38

The calendar button is named by ariaPickerLabel and the picked date (Toggle calendar, Friday, August 14, 2026), so a screen reader reads the pick when focus comes back to it. The date follows locale: set it to the language of the label.
The clear button is named by ariaCleanerLabel. With a value, it shows while focus is in the field and keeps its place while hidden; [cleaner]="false" gives that place back to the input in a narrow layout.
Closing the calendar from inside (Escape, a pick with closeOnSelect, a close button in the footer) returns focus to the input, or to the calendar button that opened it. After a touch an editable input does not get it back, so the on-screen keyboard stays closed; the calendar button takes it when there is one.

Keyboard behavior

Key	Action
`Tab`	Input, clear button, calendar button
`Enter` / `Space` on the calendar button	Open or close the calendar
`Alt` + `ArrowDown` (`Option` on macOS) in the input	Open the calendar and move focus into it
`Enter` / `Space` on a date	Pick it; with `closeOnSelect` the calendar closes
`Escape`	Close the calendar
`Enter` / `Space` on the clear button	Clear the date, focus the input
Other keys in the calendar	See Calendar

Forms

Angular handles user input through reactive, template-driven and signal forms. CoreUI Date Picker supports all three.

The control is marked touched when the user leaves the date picker (the focus moves to another element or a click lands outside it) or the date is set while its calendar is open; with updateOn: 'blur' that also commits the value.

Validation

Added in v5.7.40

Text the picker cannot turn into an allowed date stays in the input with aria-invalid="true", the value becomes null and the control reports:

{ datePickerParse: { part: 'start', reason: 'parse' | 'disabled', text: string } }

parse: not a date (an invalid date from the page gives an empty text)
disabled: outside minDate/maxDate, in disabledDates or rejected by dateFilter

Set the value and disabled through the form or through the inputs, not both.

[valid]="false" also sets aria-invalid="true" on the input. aria-describedby on c-date-picker, as a static attribute or bound with [aria-describedby], moves to the input, so the feedback is read with it; [attr.aria-describedby] does not reach the input.

Reactive

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-picker-reactive',
  templateUrl: './date-picker-reactive.component.html',
  imports: [RowComponent, ColComponent, ReactiveFormsModule, DatePickerComponent, JsonPipe]
})
export class DatePickerReactiveComponent 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() ?? '');
    });
  }
}

<c-row>
  <c-col lg="4">
    <form [formGroup]="formGroup">
      <c-date-picker formControlName="datePicker" />
    </form>
  </c-col>
</c-row>
<br>
Form value: {{ formGroup.value | json }}
<br>
datePicker value: {{ toLocaleDateString }}

Template-driven

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

@Component({
  selector: 'docs-date-picker-template-driven',
  templateUrl: './date-picker-template-driven.component.html',
  imports: [RowComponent, ColComponent, ReactiveFormsModule, FormsModule, DatePickerComponent, JsonPipe, DatePipe]
})
export class DatePickerTemplateDrivenComponent implements OnInit {
  readonly date = signal<Date | undefined>(undefined);

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

<c-row>
  <c-col lg="4">
    <form #form="ngForm">
      <c-date-picker [(ngModel)]="date" name="datePicker" />
    </form>
  </c-col>
</c-row>
<br>
Form value: {{ form.value | json }}
<br>
datePicker value: {{ form.value['datePicker'] | date:'fullDate'}}

Signal forms

import { DatePipe } from '@angular/common';
import { Component, signal } from '@angular/core';
import { form, FormField, FormRoot, required } from '@angular/forms/signals';
import { ColComponent, DatePickerComponent, FormFeedbackComponent, RowComponent } from '@coreui/angular';

interface DatePickerFormModel {
  date: Date | null;
}

@Component({
  selector: 'docs-date-picker-signal-forms',
  templateUrl: './date-picker-signal-forms.component.html',
  imports: [ColComponent, DatePickerComponent, DatePipe, FormFeedbackComponent, FormField, FormRoot, RowComponent]
})
export class DatePickerSignalFormsComponent {
  readonly dateModel = signal<DatePickerFormModel>({ date: null });

  readonly dateForm = form(this.dateModel, (schemaPath) => {
    required(schemaPath.date, { message: 'Pick a date' });
  });
}

@let ctrl = dateForm.date();

<c-row>
  <c-col lg="4">
    <form [formRoot]="dateForm">
      <c-date-picker [formField]="dateForm.date" [valid]="ctrl.touched() ? !ctrl.invalid() : undefined" />
      @let error = ctrl.touched() ? ctrl.errors()[0] : undefined;
      @if (error) {
        <c-form-feedback [valid]="false">
          {{ error.kind === 'datePickerParse' ? 'Enter a date the picker allows' : error.message }}
        </c-form-feedback>
      }
    </form>
  </c-col>
</c-row>
<br>
datePicker value: {{ ctrl.value() | date: 'fullDate' }}

API reference

DatePicker Module

import { 
  DatePickerModule,
  DropdownModule,
  SharedModule
} from '@coreui/angular';

@NgModule({
    imports: [
      DatePickerModule,
      DropdownModule,
      SharedModule
    ]
})
export class AppModule() { }

c-date-picker

component

jsx

import { DatePickerComponent } from '@coreui/angular-pro'

Props

Property	Default	Type
aria-describedby5.7.40+	`undefined`	`string`, `null`
Ids of the elements that describe the dates, e.g. a hint or the validation message; set on every date input. A validation message hidden by CSS is still read, so bind its id only while the dates are invalid: `[aria-describedby]="invalid ? 'feedback' : null"`. Set it as a static attribute, which is removed from the host, or bind `[aria-describedby]`; `[attr.aria-describedby]` does not reach the inputs.
ariaCleanerLabel5.7.38+	`'Clear date'`	`string`
Accessible name of the button that clears the date.
ariaPickerLabel5.7.38+	`'Toggle calendar'`	`string`
Accessible name of the button that opens and closes the calendar. The picked date (in DateRangePicker the range, once both ends are set) follows it, written in `locale`.
calendarDate	`new Date()`	`Date`
Default date month of the component.
calendars	`2`	`number`
The number of calendars that render on desktop devices.
cleaner	`true`	`boolean`
Toggle visibility or set the content of the cleaner button.
closeOnSelect	`false`	`boolean`
Determine if the dropdown should be closed after value setting.
date	`null`	`Date`, `null`
Selected date. A change from the page writes it without `dateChange`, `valueChange` or a form update.
dateFilter	-	`DateFilterType`
Custom function to determine selectable dates.
dayFormat	`'numeric'`	`DayFormatType`
Set the format of day number.
disabled	`false`	`boolean`
Toggle the disabled state for the component.
disabledDates	`[]`	`(Date \| Date[])[]`
Specify the list of dates that cannot be selected.
endDate	`null`	`Date`, `null`
Selected end date. A change from the page writes it without the `(endDateChange)` output, `valueChange` or a form update.
firstDayOfWeek	`1 (Monday)`	`DaysOfWeek`
Set the first day of the week.
format	-	`string`
Set date format. We use Angular formatDate() function, see: - https://angular.io/api/common/formatDate - https://angular.io/api/common/DatePipe#pre-defined-format-options
indicator	`true`	`boolean`
Toggle visibility or set the content of the input indicator.
inputDateFormatv5.0.0+	-	`object`
Custom function to format the selected date into a string according to a custom format.
inputDateParsev5.0.0+	-	`object`
Custom function to parse the input value into a valid Date object. It is the only reader of typed text: text it rejects with an invalid date is reported as `datePickerParse`, without the built-in reader; empty or whitespace-only text clears the date without calling it. Give it with `inputDateFormat`, so the picker can read back what it shows. With a week, month or year `selectionType`, the date is moved to the first day of its period. A date that ends a range is moved to the last second of its day or period; with `withTime` it then takes the time of the end it replaces.
inputReadOnly	`false`	`boolean`
Toggle the readonly state for the component.
locale	`'default'`	`string`
Sets the default locale for components. If not set, it is inherited from the browser.
maxDate	`null`	`Date`, `null`
Max selectable date.
minDate	`null`	`Date`, `null`
Min selectable date.
monthFormat5.7.38+	`'short'`	`MonthFormatType`
Sets the format of month names in the months view: 'long', 'narrow', 'short', 'numeric' or '2-digit'.
navigation	`true`	`boolean`
Show calendar navigation.
navYearFirst	`false`	`boolean`
Reorder year-month navigation, and render year first.
placeholder	`['Start date', 'End date']`	`string`, `string[]`
Specifies short hints that are visible in start date and end date inputs.
popperOptions	`{ strategy: 'absolute' }`	`Partial<Options>`
Optional popper Options object
previewDateOnHover5.7.38+	`true`	`boolean`
Shows a live preview of the hovered or focused calendar date in the input fields.
range	`true`	`boolean`
Allow range selection.
ranges	-	`ICalendarRanges`
Predefined date ranges the user can select from.
rangesButtonsColor	`'secondary'`	`string`
Sets the color context of the cancel button to one of CoreUI’s themed colors.
rangesButtonsSize	`''`	`''`, `'sm'`, `'lg'`
Size the ranges button small or large.
rangesButtonsVariant	`'ghost'`	`'outline'`, `'ghost'`
Set the ranges button variant to an outlined button or a ghost button.
selectAdjacentDays4.4.10+	`false`	`boolean`
Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacentDays` option is set to true.
selectionType5.0.0+	`'day'`	`SelectionType`
Specify the type of date selection as day, week, month, or year. For a week, month or year the input shows `2025W07`, `2025-02` or `2025` and reads that text back (a week also as `2025-W07`), but not a date typed as a day. `inputDateFormat` with `inputDateParse`, or `format` with a `locale`, change what the input shows; when reading, `inputDateParse`, if given, replaces the built-in reader.
separator	`true`	`boolean`
Default icon or character that separates two dates.
showAdjacentDays4.4.10+	`true`	`boolean`
Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
showWeekNumber5.0.0+	`false`	`boolean`
Set whether to display week numbers in the calendar.
size	`undefined`	`''`, `'sm'`, `'lg'`
Size the component small or large.
timepicker	`false`	`boolean`
Provide an additional time selection by adding select boxes to choose time.
valid	`undefined`	`boolean`
Validation state: `true` valid, `false` invalid, which also sets `aria-invalid="true"` on the inputs, `undefined` none.
value	`null`	`Date`, `object`, `null`
The dates as `{ startDate, endDate }`, or a date for the start date alone. Written without `valueChange`, like a form value.
visible	`false`	`boolean`
Toggle the visibility of the dropdown date-picker component.
weekdayFormat	`'short'`	`WeekdayFormatType`
Set the length or format of the day name.
weekNumbersLabel5.0.0+	`undefined`	`string`
Label displayed over week numbers in the calendar.
withTime	`false`	`boolean`
Keep track of the time with the date value: a picked or typed date keeps the local time of the date it replaces.
yearFormat5.7.38+	`'numeric'`	`YearFormatType`
Sets the format of years in the years view: 'numeric' or '2-digit'.

Events

Event name
calendarCellHover
Event emitted on calendar cell hover. `$event` `Date \| null`
calendarDateChange
Event emitted on calendar month change. `$event` `Date`
dateChange
Event emitted when the user or `startDateModel.set()` changes the date. `$event` `Date \| null`
endDateChange
Event emitted when the user or `endDateModel.set()` changes the end date. `$event` `Date \| null`
valueChange
Event emitted when the user, `startDateModel.set()` or `endDateModel.set()` changes the value. `$event` `Date \| object \| null`

Angular Date Picker Component

Date Picker

Available in Other JavaScript Frameworks

About

Examples

With footer

Weeks

Months

Years

Sizing

Disabled

Readonly

Preview date on hover

Format

Disabled dates

Disabling weekends

Non-english locale

Auto

Chinese

Japanese

Korean

Right to left support

Hebrew

Persian

Custom formats

Weeks

Months

Years

Accessibility

Keyboard behavior

Forms

Validation

Reactive

Template-driven

Signal forms

API reference

DatePicker Module

c-date-picker

Props

Events