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

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

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>

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.

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>

Non-english locale

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>

Forms

Angular handles user input through reactive and template-driven forms. CoreUI Date Picker supports both options.

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

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
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`
Initial selected start date.
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`
Initial selected end date.
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.
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.
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
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.
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`
Toggle visual validation feedback.
value	`null`	`Date`, `object`, `null`
-
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.

Events

Event name
calendarCellHover
Event emitted on calendar cell hover. `$event` `Date \| null`
calendarDateChange
Event emitted on calendar month change. `$event` `Date`
dateChange
Emitted when `date` changes. `$event` `Date \| null`
endDateChange
Emitted when `endDate` changes. `$event` `Date \| null`
valueChange
Event emitted on `value` change. `$event` `Date \| object \| null \| undefined`