On this page
Angular Date Picker Component
Create consistent cross-browser and cross-device Angular date picker.
Examples
Loading...
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();}With footer
Loading...
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; }}Sizing
Set heights usingsize property likesize="lg" andsize="sm".
Loading...
Disabled
Add thedisabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.
Loading...
Readonly
Add theinputReadOnly boolean attribute to prevent modification of the input value.
Loading...
Format
Control the format of the date displayed in the input using theformat property according tolocale rules.Makes the date input read-only.
Loading...
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 {}Disabled dates
Add dates user cannot select using thedisabledDates property.
Loading...
Loading...
Non-english locale
Auto
Loading...
Chinese
Loading...
Japanese
Loading...
Korean
Loading...
Right to left support
RTL support is built-in and can be explicitly controlled through the$enable-rtl variables in scss.
Hebrew
Loading...
Persian
Loading...
Forms
Angular handles user input through reactive and template-driven forms.CoreUI Date Picker supports both options.
Reactive
Form value: { "datePicker": "2025-10-02T22:00:00.000Z"}
datePicker value: 10/3/2025
Loading...
Loading...
Template-driven
Form value: { "datePicker": "2025-10-03T22:00:00.000Z"}
datePicker value: Saturday, October 4, 2025
Loading...
Loading...
API reference
DatePicker Module
import { DatePickerModule, DropdownModule, SharedModule} from '@coreui/angular';@NgModule({ imports: [ DatePickerModule, DropdownModule, SharedModule ]})export class AppModule() { }c-date-picker
component
Inputs
| name | description | type | default |
|---|---|---|---|
date | Initial selected date. | Date | undefined |
calendarDate | Default date month of the component. | Date | undefined |
cleaner | Toggle visibility or set the content of the cleaner button. | boolean | true |
closeOnSelect | Determine if dropdown should be closed when component value is set. | boolean | false |
disabled | Toggle the disabled state for the component. | boolean | false |
disabledDates | List of dates that cannot be selected. | (Date |Date[])[] | undefined |
firstDayOfWeek | Sets the day of start week. | number | 1 |
format4.5.26+ | Formats a date display. See:DatePipe format options. Makes the input read-only. | string | undefined |
disabled | Toggle the disabled state for the component. | boolean | false |
indicator | Toggle visibility or set the content of the input indicator. | boolean | true |
inputReadOnly | Toggle the readonly state for the input. | boolean | false |
locale | Sets the default locale for components. If not set, it is inherited from the browser. | string | default |
maxDate | Max selectable date. | Date | undefined |
minDate | Min selectable date. | Date | undefined |
navYearFirst | Reorder year-month navigation, and render year first. | boolean | false |
navigation | Show arrows navigation. | boolean | true |
placeholder | Specifies hint visible in date input. | string | Select date |
size | Size the component input small or large. | sm |lg | undefined |
dayFormat | Set the format of day number. | numeric |2-digit |(date: Date) => string | number | numeric |
weekdayFormat | Set length or format of day name, | number |long |narrow |short | 2 |
selectAdjacentDays4.5.5+ | Days in adjacent months shown before or after the current month are selectable. This only applies if theshowAdjacentDays option is set totrue. | boolean | false |
showAdjacentDays4.5.5+ | Display dates in adjacent months (non-selectable) at the start/end of the current month. | boolean | true |
valid | Set input validation visual feedback. | boolean | undefined |
showWeekNumber | Display ISO week numbers in month view. | boolean | undefined |
weekNumbersLabel | Label displayed over week numbers in the calendar. | string | undefined |
inputDateFormat | Custom function to format the selected date into a string according to a custom format. | (date: Date) => string | undefined |
inputDateParse | Custom function to parse the input value into a valid Date object. | `(date: string | Date) => Date` |
Outputs
| name | description | type |
|---|---|---|
dateChange | Event emitted ondate change | Date |
calendarCellHover | Event emitted on calendar cell hover | Date |
calendarDateChange | Event emitted on calendar month change | Date |
valueChange | Event emitted onvalue change | Date |