On this page
Angular Date Range Picker Component
Create consistent cross-browser and cross-device Angular date range picker.
Examples
Loading...
import { Component } from '@angular/core';import { ColComponent, DateRangePickerComponent, RowComponent } from '@coreui/angular';@Component({ selector: 'docs-date-range-picker01', templateUrl: './date-range-picker01.component.html', standalone: true, imports: [RowComponent, ColComponent, DateRangePickerComponent]})export class DateRangePicker01Component { date = new Date(); startDate = new Date(this.date.getFullYear(), this.date.getMonth(), 11); endDate = new Date(this.date.getFullYear(), this.date.getMonth(), 17);}With footer
Loading...
import { DatePipe } from '@angular/common';import { Component } from '@angular/core';import { ButtonDirective, ColComponent, DateRangePickerComponent, DropdownCloseDirective, RowComponent, TemplateIdDirective} from '@coreui/angular';@Component({ selector: 'docs-date-range-picker02', templateUrl: './date-range-picker02.component.html', standalone: true, imports: [RowComponent, ColComponent, DateRangePickerComponent, TemplateIdDirective, ButtonDirective, DropdownCloseDirective, DatePipe]})export class DateRangePicker02Component { public date = new Date(); public startDate?: Date | null = new Date(new Date().setDate(this.date.getDate() + 1)); public endDate?: Date | null = new Date(new Date().setDate(this.date.getDate() + 3)); public calendarDate = new Date(Date.now()); onToday() { this.calendarDate = new Date(Date.now()); } onClear() { this.startDate = null; this.endDate = 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...
Disabled dates
Loading...
import { Component } from '@angular/core';import { ColComponent, DateRangePickerComponent, RowComponent } from '@coreui/angular';@Component({ selector: 'docs-date-range-picker06', templateUrl: './date-range-picker06.component.html', standalone: true, imports: [RowComponent, ColComponent, DateRangePickerComponent]})export class DateRangePicker06Component { 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; };}Custom ranges
Loading...
Loading...
Non-english locale
Auto
Loading...
Chinese
Loading...
Japanese
Loading...
Korean
Loading...
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 Range Picker supports both possibilities.
Reactive
Form value: { "dateRangePicker": { "startDate": "2025-10-02T22:00:00.000Z", "endDate": "2025-10-08T22:00:00.000Z" }}
dateRangePicker value: 10/3/2025 -> 10/9/2025
Loading...
Loading...
Template-driven
dateRangePicker value: { "startDate": "2025-09-26T22:00:00.000Z", "endDate": "2025-10-02T22:00:00.000Z"}
startDate: Saturday, September 27, 2025->endDate: Friday, October 3, 2025
Loading...
Loading...
API reference
DateRangePicker Module
import { DateRangePickerModule, DropdownModule, SharedModule} from '@coreui/angular';@NgModule({ imports: [ DateRangePickerModule, DropdownModule, SharedModule ]})export class AppModule() { }c-date-range-picker
component
Inputs
| name | description | type | default |
|---|---|---|---|
startDate | Initial selected start date. | Date | undefined |
endDate | Initial selected start 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 |
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[] | Start date,End 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 |
ranges | Predefined date ranges the user can select from. | object | undefined |
rangesButtonsColor | Sets the color context of the cancel button to one of CoreUI themed colors. | Colors | secondary |
rangesButtonsSize | Size the ranges button small or large. | sm |lg | undefined |
rangesButtonsVariant | Set the ranges button variant to an outlined button or a ghost button. | outline |ghost | ghost |
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 |
|---|---|---|
startDateChange | Event emitted onstartDate change | Date |
endDateChange | Event emitted onstartDate change | Date |
calendarCellHover | Event emitted on calendar cell hover | Date |
calendarDateChange | Event emitted on calendar month change | Date |
valueChange | Event emitted onvalue change | {startDate: Date, endDate: Date} |