Provides the ability to select a range of dates from a calendar UI or editable inputs.
Igx Module
IgxDateRangeModule
Igx Theme
igx-input-group-theme, igx-calendar-theme, igx-date-range-picker-theme
Igx Keywords
date, range, date range, date picker
Igx Group
scheduling

Remarks

[object Object]

Example

<igx-date-range-picker mode="dropdown"></igx-date-range-picker>

Constructors

Section titled "Constructors"

IgxDateRangePickerComponent

new IgxDateRangePickerComponent(): IgxDateRangePickerComponent

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:640

Returns IgxDateRangePickerComponent

Properties

Section titled "Properties"

closed

Section titled "closed"

Inherited from: PickerBaseDirective

Emitted after the calendar has closed.

 
closed: EventEmitter<IBaseEventArgs>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:278

Example

<igx-date-picker (closed)="handleClosed($event)"></igx-date-picker>

closing

Section titled "closing"

Inherited from: PickerBaseDirective

Emitted when the calendar has started closing, cancelable.

 
closing: EventEmitter<IBaseCancelableBrowserEventArgs>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:267

Example

<igx-date-picker (closing)="handleClosing($event)"></igx-date-picker>

customRanges

Section titled "customRanges"

Custom ranges rendered as chips.

 
customRanges: CustomDateRange[] = []

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:411

Example

<igx-date-range-picker [(usePredefinedRanges)]="true"></igx-date-range-picker>
``

disabled

Section titled "disabled"

Inherited from: PickerBaseDirective

Enables or disables the picker.

 
disabled: boolean = false

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:144

Example

<igx-date-picker [disabled]="'true'"></igx-date-picker>

element

Section titled "element"

Inherited from: PickerBaseDirective 

element: ElementRef<any>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:31

formatter

Section titled "formatter"

A custom formatter function, applied on the selected or passed in date.

 
formatter: object

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:174

Example

private dayFormatter = new Intl.DateTimeFormat("en", { weekday: "long" });
private monthFormatter = new Intl.DateTimeFormat("en", { month: "long" });

public formatter(date: Date): string {
 return `${this.dayFormatter.format(date)} - ${this.monthFormatter.format(date)} - ${date.getFullYear()}`;
}
<igx-date-range-picker [formatter]="formatter"></igx-date-range-picker>

headerOrientation

Section titled "headerOrientation"

Inherited from: PickerBaseDirective

Gets/Sets the orientation of the IgxDatePickerComponent header.

 
headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:111

Example

<igx-date-picker headerOrientation="vertical"></igx-date-picker>

hideHeader

Section titled "hideHeader"

Inherited from: PickerBaseDirective

Gets/Sets whether the header is hidden in dialog mode.

 
hideHeader: boolean = false

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:122

Example

<igx-date-picker mode="dialog" [hideHeader]="true"></igx-date-picker>

hideOutsideDays

Section titled "hideOutsideDays"

Gets/Sets whether dates that are not part of the current month will be displayed.

 
hideOutsideDays: boolean

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:155

Remarks

Default value is false.

Example

<igx-date-range-picker [hideOutsideDays]="true"></igx-date-range-picker>

hint

Section titled "hint" 
hint: IgxHintDirective

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:435

label

Section titled "label" 
label: IgxLabelDirective

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:432

mode

Section titled "mode"

Inherited from: PickerBaseDirective

Can be dropdown with editable input field or dialog with readonly input field.

 
mode: PickerInteractionMode = PickerInteractionMode.DropDown

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:100

Remarks

Default mode is dropdown

Example

<igx-date-picker mode="dialog"></igx-date-picker>

opened

Section titled "opened"

Inherited from: PickerBaseDirective

Emitted after the calendar has opened.

 
opened: EventEmitter<IBaseEventArgs>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:256

Example

<igx-date-picker (opened)="handleOpened($event)"></igx-date-picker>

opening

Section titled "opening"

Inherited from: PickerBaseDirective

Emitted when the calendar has started opening, cancelable.

 
opening: EventEmitter<IBaseCancelableBrowserEventArgs>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:245

Example

<igx-date-picker (opening)="handleOpening($event)"></igx-date-picker>

orientation

Section titled "orientation"

Gets/Sets the orientation of the multiple months displayed in the picker's calendar's days view.

 
orientation: PickerCalendarOrientation = PickerCalendarOrientation.Horizontal

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:141

Example

<igx-date-range-picker orientation="vertical"></igx-date-range-picker>

outlet

Section titled "outlet"

Inherited from: PickerBaseDirective

The container used for the pop-up element.

 
outlet: IgxOverlayOutletDirective | ElementRef<any>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:204

Example

<div igxOverlayOutlet #outlet="overlay-outlet"></div>
<!-- ... -->
<igx-date-picker [outlet]="outlet"></igx-date-picker>
<!-- ... -->

overlaySettings

Section titled "overlaySettings"

Custom overlay settings that should be used to display the calendar.

 
overlaySettings: OverlaySettings

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:231

Example

<igx-date-range-picker [overlaySettings]="customOverlaySettings"></igx-date-range-picker>

pickerActions

Section titled "pickerActions" 
pickerActions: IgxPickerActionsDirective

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:438

placeholder

Section titled "placeholder"

Sets the placeholder for single-input IgxDateRangePickerComponent.

 
placeholder: string = ''

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:364

Example

<igx-date-range-picker [placeholder]="'Choose your dates'"></igx-date-range-picker>

showWeekNumbers

Section titled "showWeekNumbers"

Show/hide week numbers

 
showWeekNumbers: boolean = false

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:378

Remarks

Default is false.

Example

<igx-date-range-picker [showWeekNumbers]="true"></igx-date-range-picker>
``

tabIndex

Section titled "tabIndex"

Inherited from: PickerBaseDirective

Gets/Sets the default template editor's tabindex.

 
tabIndex: string | number

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:234

Example

<igx-date-picker [tabIndex]="1"></igx-date-picker>

usePredefinedRanges

Section titled "usePredefinedRanges"

Whether to render built-in predefined ranges.

 
usePredefinedRanges: boolean = false

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:401

Example

<igx-date-range-picker [(usePredefinedRanges)]="true"></igx-date-range-picker>
``

valueChange

Section titled "valueChange" 
valueChange: EventEmitter<DateRange>

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:414

activeDate

Section titled "activeDate" 
activeDate: Date

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:476, projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:482

cancelButtonText

Section titled "cancelButtonText" 
cancelButtonText: string

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:212, projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:216

disabledDates

Section titled "disabledDates" 
disabledDates: DateRangeDescriptor[]

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:314, projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:317

displayFormat

Section titled "displayFormat" 
displayFormat: string

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:246, projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:250

displayMonthsCount

Section titled "displayMonthsCount" 
displayMonthsCount: number

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:126, projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:130

doneButtonText

Section titled "doneButtonText" 
doneButtonText: string

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:189, projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:193

inputFormat

Section titled "inputFormat" 
inputFormat: string

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:263, projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:267

locale

Section titled "locale" 
locale: string

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:497, projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:505

maxValue

Section titled "maxValue" 
maxValue: string | Date

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:295, projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:300

minValue

Section titled "minValue" 
minValue: string | Date

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:279, projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:284

resourceStrings

Section titled "resourceStrings" 
resourceStrings: IDateRangePickerResourceStrings

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:344, projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:351

specialDates

Section titled "specialDates" 
specialDates: DateRangeDescriptor[]

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:332, projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:335

type

Section titled "type"

Inherited from: PickerBaseDirective 

type: IgxInputGroupType

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:218, projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:221

value

Section titled "value" 
value: DateRange

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:547, projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:552

weekStart

Section titled "weekStart"

Inherited from: PickerBaseDirective 

weekStart: number

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:176, projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:184

Accessors

Section titled "Accessors"

collapsed

Section titled "collapsed"

Gets calendar state.

let state = this.dateRange.collapsed;
get collapsed(): boolean

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:531

Returns boolean

Methods

Section titled "Methods"

clear

Section titled "clear"

Clears the input field(s) and the picker's value.

clear(): void

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:753

Returns void

Example

this.dateRangePicker.clear();

close

Section titled "close"

Closes the date range picker's dropdown or dialog.

close(): void

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:703

Returns void

Example

<igx-date-range-picker #dateRange></igx-date-range-picker>

<button type="button" igxButton (click)="dateRange.close()">Close Dialog</button>

open

Section titled "open"

Opens the date range picker's dropdown or dialog.

open(overlaySettings: OverlaySettings): void

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:673

Parameters

Returns void

Example

<igx-date-range-picker #dateRange></igx-date-range-picker>

<button type="button" igxButton (click)="dateRange.open()">Open Dialog</button

select

Section titled "select"

Selects a range of dates. If no endDate is passed, range is 1 day (only startDate)

select(startDate: Date, endDate: Date): void

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:739

Parameters

  • startDate: Date
  • endDate: Date

Returns void

Example

public selectFiveDayRange() {
 const today = new Date();
 const inFiveDays = new Date(new Date().setDate(today.getDate() + 5));
 this.dateRange.select(today, inFiveDays);
}

toggle

Section titled "toggle"

Toggles the date range picker's dropdown or dialog

toggle(overlaySettings: OverlaySettings): void

Defined in projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts:719

Parameters

Returns void

Example

<igx-date-range-picker #dateRange></igx-date-range-picker>

<button type="button" igxButton (click)="dateRange.toggle()">Toggle Dialog</button>