On this page

This component is part of CoreUI PRO – a powerful UI library with over 250 components and 25+ templates, designed to help you build modern, responsive apps faster. Fully compatible with Angular, Bootstrap, React.js, and Vue.js.

Angular Date Range Picker Component

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

Examples


26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	1	2	3	4	5	6


26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	1	2	3	4	5	6


26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	1	2	3	4	5	6

Jun 18, 2025 -> Jun 20, 2025

Sizing

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


26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	1	2	3	4	5	6


26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	1	2	3	4	5	6

Disabled

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


26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	1	2	3	4	5	6

Readonly

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


26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	1	2	3	4	5	6

Disabled dates


28	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3
4	5	6	7	8	9	10

Custom ranges


26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	1	2	3	4	5	6

Non-english locale

Auto


26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	1	2	3	4	5	6

Chinese


26日	27日	28日	29日	30日	31日	1日
2日	3日	4日	5日	6日	7日	8日
9日	10日	11日	12日	13日	14日	15日
16日	17日	18日	19日	20日	21日	22日
23日	24日	25日	26日	27日	28日	29日
30日	1日	2日	3日	4日	5日	6日

Japanese


26日	27日	28日	29日	30日	31日	1日
2日	3日	4日	5日	6日	7日	8日
9日	10日	11日	12日	13日	14日	15日
16日	17日	18日	19日	20日	21日	22日
23日	24日	25日	26日	27日	28日	29日
30日	1日	2日	3日	4日	5日	6日

Korean


26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	1	2	3	4	5	6

Right to left support

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

Hebrew


26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	1	2	3	4	5	6

Persian


۵	۶	۷	۸	۹	۱۰	۱۱
۱۲	۱۳	۱۴	۱۵	۱۶	۱۷	۱۸
۱۹	۲۰	۲۱	۲۲	۲۳	۲۴	۲۵
۲۶	۲۷	۲۸	۲۹	۳۰	۳۱	۱
۲	۳	۴	۵	۶	۷	۸
۹	۱۰	۱۱	۱۲	۱۳	۱۴	۱۵

Forms

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

Reactive


26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	1	2	3	4	5	6

Form value: { "dateRangePicker": { "startDate": "2025-06-16T22:00:00.000Z", "endDate": "2025-06-22T22:00:00.000Z" } }
dateRangePicker value: 6/17/2025 -> 6/23/2025

Template-driven


26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	1	2	3	4	5	6

dateRangePicker value: { "startDate": "2025-06-10T22:00:00.000Z", "endDate": "2025-06-16T22:00:00.000Z" }
startDate: Wednesday, June 11, 2025 -> endDate: Tuesday, June 17, 2025

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
`format`	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
`selectAdjacentDays`	Days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacentDays` option is set to `true`.	`boolean`	false
`showAdjacentDays`	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 on `startDate` change	`Date`
`endDateChange`	Event emitted on `startDate` change	`Date`
`calendarCellHover`	Event emitted on calendar cell hover	`Date`
`calendarDateChange`	Event emitted on calendar month change	`Date`
`valueChange`	Event emitted on `value` change	`{startDate: Date, endDate: Date}`