Angular Date Range Picker Component

Date Range Picker

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

Available in Other JavaScript Frameworks

CoreUI Angular Date Range 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, DateRangePickerComponent, RowComponent } from '@coreui/angular';

@Component({
  selector: 'docs-date-range-picker-example',
  templateUrl: './date-range-picker-example.component.html',
  imports: [RowComponent, ColComponent, DateRangePickerComponent]
})
export class DateRangePickerExampleComponent {
  date = new Date();
  startDate = new Date(this.date.getFullYear(), this.date.getMonth(), 11);
  endDate = new Date(this.date.getFullYear(), this.date.getMonth(), 17);
}

<c-row>
  <c-col lg="5">
    <c-date-range-picker selectAdjacentDays />
  </c-col>

  <c-col lg="5">
    <c-date-range-picker [startDate]="startDate" [endDate]="endDate" />
  </c-col>
</c-row>

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

@Component({
  selector: 'docs-date-range-picker-with-footer',
  templateUrl: './date-range-picker-with-footer.component.html',
  imports: [
    RowComponent,
    ColComponent,
    DateRangePickerComponent,
    TemplateIdDirective,
    ButtonDirective,
    DropdownCloseDirective,
    DatePipe
  ]
})
export class DateRangePickerWithFooterComponent {
  public date = new Date();
  readonly startDate = signal<Date | null>(new Date(new Date().setDate(this.date.getDate() + 1)));
  readonly endDate = signal<Date | null>(new Date(new Date().setDate(this.date.getDate() + 3)));
  readonly calendarDate = signal(new Date(Date.now()));

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

  onClear() {
    this.startDate.set(null);
    this.endDate.set(null);
  }
}

<c-row>
  <c-col lg="5">
    <c-date-range-picker
      #dateRangePicker="cDateRangePicker"
      [(endDate)]="endDate"
      [(startDate)]="startDate"
      [calendarDate]="calendarDate()"
    >
      <ng-template cTemplateId="datePickerFooter" let-dropdown>
        <button (click)="onToday()" cButton class="me-auto" color="danger" size="sm" variant="ghost">Today</button>
        <button (click)="onClear()" cButton color="primary" size="sm">Clear</button>
        <button [disabled]="!endDate" [dropdownComponent]="dropdown" cButton cDropdownClose color="primary"size="sm">OK</button>
      </ng-template>
    </c-date-range-picker>
  </c-col>
  <c-col class="d-flex align-items-center">
    {{startDate() | date}} {{ startDate() ? '->' : ''}} {{endDate() | date}}
  </c-col>
</c-row>

Sizing

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

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

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

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

<c-row>
  <c-col lg="4">
    <c-date-range-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, DateRangePickerComponent, RowComponent } from '@coreui/angular';

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

<c-row>
  <c-col lg="5">
    <c-date-range-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, DateRangePickerComponent, RowComponent } from '@coreui/angular';

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

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

Disabled dates

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

@Component({
  selector: 'docs-date-range-picker-disabled-dates',
  templateUrl: './date-range-picker-disabled-dates.component.html',
  imports: [RowComponent, ColComponent, DateRangePickerComponent]
})
export class DateRangePickerDisabledDatesComponent {
  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="5">
    <c-date-range-picker
      [calendarDate]="calendarDate"
      [dateFilter]="dateFilter"
      [disabledDates]="disabledDates"
      [maxDate]="maxDate"
      [minDate]="minDate"
      locale="de-AT"
    />
  </c-col>
</c-row>

Custom ranges

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

@Component({
  selector: 'docs-date-range-picker-custom-ranges',
  templateUrl: './date-range-picker-custom-ranges.component.html',
  imports: [RowComponent, ColComponent, DateRangePickerComponent]
})
export class DateRangePickerCustomRangesComponent {
  public customRanges = {
    Today: [new Date(), new Date()],
    Yesterday: [
      new Date(new Date().setDate(new Date().getDate() - 1)),
      new Date(new Date().setDate(new Date().getDate() - 1))
    ],
    'Last 7 Days': [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date())],
    'Last 30 Days': [new Date(new Date().setDate(new Date().getDate() - 29)), new Date(new Date())],
    'This Month': [new Date(new Date().setDate(1)), new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)],
    'Last Month': [
      new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1),
      new Date(new Date().getFullYear(), new Date().getMonth(), 0)
    ]
  };
}

<c-row>
  <c-col lg="5">
    <c-date-range-picker
      [ranges]="customRanges"
      rangesButtonsColor="primary"
    />
  </c-col>
</c-row>

Non-english locale

Auto

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

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

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

Chinese

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

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

<c-row>
  <c-col lg="5">
    <c-date-range-picker
      [placeholder]="['入住日期', '退房日期']"
      locale="zh-Hant"
      weekdayFormat="narrow"
    />
  </c-col>
</c-row>

Japanese

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

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

<c-row>
  <c-col lg="5">
    <c-date-range-picker
      [placeholder]="['日付を選択', '終了日']"
      locale="ja"
    />
  </c-col>
</c-row>

Korean

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

@Component({
  selector: 'docs-date-range-picker-korean',
  templateUrl: './date-range-picker-korean.component.html',
  imports: [RowComponent, ColComponent, DateRangePickerComponent]
})
export class DateRangePickerKoreanComponent {
  dayFormat = (date: Date) => date.getDate();
}

<c-row>
  <c-col lg="5">
    <c-date-range-picker
      [dayFormat]="dayFormat"
      [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, DateRangePickerComponent, RowComponent } from '@coreui/angular';

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

<c-row>
  <c-col lg="5">
    <div dir="rtl">
      <c-date-range-picker
        [placeholder]="['תאריך סיום', 'בחר תאריך']"
        locale="he-IL"
        weekdayFormat="narrow"
      />
    </div>
  </c-col>
</c-row>

Persian

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

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

<c-row>
  <c-col lg="5">
    <div dir="rtl">
      <c-date-range-picker
        [placeholder]="['تاریخ پایان', 'تاریخ شروع']"
        locale="fa-IR"
        weekdayFormat="narrow"
      />
    </div>
  </c-col>
</c-row>

Forms

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

Reactive

import { JsonPipe } from '@angular/common';
import { Component, OnInit, signal } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { ColComponent, DateRangePickerComponent, RowComponent } from '@coreui/angular';

@Component({
  selector: 'docs-date-range-picker-reactive',
  templateUrl: './date-range-picker-reactive.component.html',
  imports: [RowComponent, ColComponent, ReactiveFormsModule, DateRangePickerComponent, JsonPipe]
})
export class DateRangePickerReactiveComponent implements OnInit {
  startDate = new Date();
  endDate = new Date();

  formGroup!: FormGroup;

  readonly #toLocaleDateString = signal('');

  get toLocaleDateString() {
    return this.#toLocaleDateString();
  }

  ngOnInit(): void {
    const startDate = new Date(this.startDate.getFullYear(), this.startDate.getMonth(), this.startDate.getDate());
    const endDate = new Date(this.endDate.getFullYear(), this.endDate.getMonth(), this.endDate.getDate() + 6);

    const dateRange = { startDate, endDate };

    this.formGroup = new FormGroup({
      dateRangePicker: new FormControl(dateRange, { nonNullable: false })
    });

    this.formGroup.valueChanges.subscribe((value) => {
      this.#toLocaleDateString.set(
        value.dateRangePicker.startDate?.toLocaleDateString() +
          ' -> ' +
          value.dateRangePicker.endDate?.toLocaleDateString()
      );
    });
  }
}

<c-row>
  <c-col lg="5">
    <form [formGroup]="formGroup">
      <c-date-range-picker formControlName="dateRangePicker" />
    </form>
  </c-col>
</c-row>
<br>
Form value: {{ formGroup.value | json }}
<br>
dateRangePicker 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, DateRangePickerComponent, RowComponent } from '@coreui/angular';

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

  ngOnInit(): void {
    const date = new Date();
    const startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 6);
    const endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());

    this.value.set({ startDate, endDate });
  }
}

<c-row>
  <c-col lg="5">
    <form #form="ngForm">
      <c-date-range-picker [(ngModel)]="value" name="dateRangePicker" />
    </form>
  </c-col>
</c-row>
<br />
dateRangePicker value: {{ form.value['dateRangePicker'] | json }}
<br />
startDate: {{ $safeNavigationMigration(form.value['dateRangePicker']?.startDate) | date: 'fullDate' }} -> endDate:
{{ $safeNavigationMigration(form.value['dateRangePicker']?.endDate) | date: 'fullDate' }}
<br />

API reference

DateRangePicker Module

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

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

c-date-range-picker

component

jsx

import { DateRangePickerComponent } 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.
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.
startDate	`null`	`Date`, `null`
Initial selected start date.
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`
endDateChange
Emitted when `endDate` changes. `$event` `Date \| null`
startDateChange
Emitted when `startDate` changes. `$event` `Date \| null`
valueChange
Event emitted on `value` change. `$event` `Date \| object \| null \| undefined`