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

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

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

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 date picker 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:160

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

label

Section titled "label" 
label: IgxLabelDirective

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

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

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

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

placeholder

Section titled "placeholder"

Sets the placeholder for single-input date range picker.

 
placeholder: string = ''

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

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

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

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

Accessors

Section titled "Accessors"

activeDate

Section titled "activeDate"

Gets/Sets the date which is shown in the calendar picker and is highlighted. By default it is the current date, or the value of the picker, if set.

 
get activeDate(): Date

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

Returns Date 

set activeDate(value: Date): void

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

Parameters

  • value: Date

Returns void

cancelButtonText

Section titled "cancelButtonText"

Overrides the default text of the calendar dialog Cancel button.

 
set cancelButtonText(value: string): void

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

Example

<igx-date-range-picker cancelButtonText="取消"></igx-date-range-picker>

Parameters

  • value: string

Returns void

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

Returns boolean

disabledDates

Section titled "disabledDates"

Gets/Sets the disabled dates descriptors.

 
get disabledDates(): DateRangeDescriptor[]

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

Example

let disabledDates = this.dateRangePicker.disabledDates;
this.dateRangePicker.disabledDates = [ {type: DateRangeType.Weekends}, ...];

Returns DateRangeDescriptor[]

displayFormat

Section titled "displayFormat"

The format used to display the picker's value when it's not being edited.

 
get displayFormat(): string

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

Example

<igx-date-picker displayFormat="EE/M/yy"></igx-date-picker>

Returns string

The format used when editable inputs are not focused.

 
set displayFormat(value: string): void

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

Example

<igx-date-range-picker displayFormat="EE/M/yy"></igx-date-range-picker>

Parameters

  • value: string

Returns void

displayMonthsCount

Section titled "displayMonthsCount"

The number of displayed month views.

 
get displayMonthsCount(): number

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

Example

<igx-date-range-picker [displayMonthsCount]="3"></igx-date-range-picker>

Returns number 

set displayMonthsCount(value: number): void

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

Parameters

  • value: number

Returns void

doneButtonText

Section titled "doneButtonText"

Overrides the default text of the calendar dialog Done button.

 
set doneButtonText(value: string): void

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

Example

<igx-date-range-picker doneButtonText="完了"></igx-date-range-picker>

Parameters

  • value: string

Returns void

inputFormat

Section titled "inputFormat"

The editor's input mask.

 
get inputFormat(): string

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

Example

<igx-date-picker inputFormat="dd/MM/yy"></igx-date-picker>

Returns string

The expected user input format and placeholder.

 
set inputFormat(value: string): void

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

Example

<igx-date-range-picker inputFormat="dd/MM/yy"></igx-date-range-picker>

Parameters

  • value: string

Returns void

locale

Section titled "locale"

Gets the locale of the date-range-picker. If not set, defaults to application's locale.

 
get locale(): string

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

Returns string

Sets the locale of the date-picker. Expects a valid BCP 47 language tag.

 
set locale(value: string): void

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

Parameters

  • value: string

Returns void

maxValue

Section titled "maxValue" 
get maxValue(): string | Date

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

Returns string | Date

The maximum value in a valid range.

 
set maxValue(value: string | Date): void

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

Example

<igx-date-range-picker [maxValue]="maxDate"></igx-date-range-picker>

Parameters

  • value: string | Date

Returns void

minValue

Section titled "minValue" 
get minValue(): string | Date

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

Returns string | Date

The minimum value in a valid range.

 
set minValue(value: string | Date): void

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

Example

<igx-date-range-picker [minValue]="minDate"></igx-date-range-picker>

Parameters

  • value: string | Date

Returns void

resourceStrings

Section titled "resourceStrings"

An accessor that sets the resource strings. By default it uses EN resources.

 
set resourceStrings(value: IDateRangePickerResourceStrings): void

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

Parameters

Returns void

specialDates

Section titled "specialDates"

Gets/Sets the special dates descriptors.

 
get specialDates(): DateRangeDescriptor[]

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

Example

let specialDates = this.dateRangePicker.specialDates;
this.dateRangePicker.specialDates = [ {type: DateRangeType.Weekends}, ... ];

Returns DateRangeDescriptor[]

type

Section titled "type"

Inherited from: PickerBaseDirective

Determines how the picker's input will be styled.

 
set type(val: IgxInputGroupType): void

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

Example

<igx-date-picker [type]="'line'"></igx-date-picker>

Parameters

Returns void

value

Section titled "value"

The currently selected value / range from the calendar

 
get value(): DateRange

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

Example

const newValue: DateRange = { start: new Date("2/2/2012"), end: new Date("3/3/2013")};
this.dateRangePicker.value = newValue;

Returns DateRange

weekStart

Section titled "weekStart"

Inherited from: PickerBaseDirective

Gets the start day of the week. Can return a numeric or an enum representation of the week day. If not set, defaults to the first day of the week for the application locale.

 
get weekStart(): number

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

Returns number

Sets the start day of the week. Can be assigned to a numeric value or to WEEKDAYS enum value.

 
set weekStart(value: number): void

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

Parameters

  • value: number

Returns void

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

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

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

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

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

Parameters

Returns void

Example

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

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