Class IgxDateRangePickerComponent

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

It displays the range selection in a single or two input fields. The default template displays a single readonly input field while projecting igx-date-range-start and igx-date-range-end displays two editable input fields.

Example

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

Hierarchy

Hierarchy

  • PickerBaseDirective
    • IgxDateRangePickerComponent

Implements

  • OnChanges
  • OnInit
  • AfterViewInit
  • OnDestroy
  • ControlValueAccessor
  • Validator

Constructors

Properties

closed: EventEmitter<IBaseEventArgs> = ...

Emitted after the calendar has closed.

Example

<igx-date-picker (closed)="handleClosed($event)"></igx-date-picker>
closing: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

Emitted when the calendar has started closing, cancelable.

Example

<igx-date-picker (closing)="handleClosing($event)"></igx-date-picker>
densityChanged: EventEmitter<IDensityChangedEventArgs> = ...
disabled: boolean = false

Enables or disables the picker.

Example

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

The format used when editable inputs are not focused.

Remarks

Uses Angular's DatePipe.

Example

<igx-date-range-picker displayFormat="EE/M/yy"></igx-date-range-picker>
displayMonthsCount: number = 2

The number of displayed month views.

Remarks

Default is 2.

Example

<igx-date-range-picker [displayMonthsCount]="3"></igx-date-range-picker>
element: ElementRef<any>
formatter: ((val) => string)

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

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>

Type declaration

    • (val): string
    • Parameters

      Returns string

hideOutsideDays: boolean

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

Remarks

Default value is false.

Example

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

The expected user input format and placeholder.

Remarks

Default is "'MM/dd/yyyy'"

Example

<igx-date-range-picker inputFormat="dd/MM/yy"></igx-date-range-picker>
mode: PickerInteractionMode = PickerInteractionMode.DropDown

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

Remarks

Default mode is dropdown

Example

<igx-date-picker mode="dialog"></igx-date-picker>
opened: EventEmitter<IBaseEventArgs> = ...

Emitted after the calendar has opened.

Example

<igx-date-picker (opened)="handleOpened($event)"></igx-date-picker>
opening: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

Emitted when the calendar has started opening, cancelable.

Example

<igx-date-picker (opening)="handleOpening($event)"></igx-date-picker>
outlet: ElementRef<any> | IgxOverlayOutletDirective

Gets/Sets the container used for the popup element.

Remarks

outlet is an instance of IgxOverlayOutletDirective or an ElementRef.

Example

<div igxOverlayOutlet #outlet="overlay-outlet"></div>
//..
<igx-date-range-picker [outlet]="outlet"></igx-date-range-picker>
//..
overlaySettings: OverlaySettings

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

Example

<igx-date-range-picker [overlaySettings]="customOverlaySettings"></igx-date-range-picker>
placeholder: string = ''

Sets the placeholder for single-input IgxDateRangePickerComponent.

Example

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

Show/hide week numbers

Remarks

Default is false.

Example

<igx-date-range-picker [showWeekNumbers]="true"></igx-date-range-picker>
``
tabIndex: string | number

Gets/Sets the default template editor's tabindex.

Example

<igx-date-picker [tabIndex]="1"></igx-date-picker>
valueChange: EventEmitter<DateRange> = ...

Emitted when the picker's value changes. Used for two-way binding.

Example

<igx-date-range-picker [(value)]="date"></igx-date-range-picker>

Accessors

Methods

  • Sets the --component-size CSS variable based on the value of Display Density

    Returns "var(--ig-size, var(--ig-size-small))" | "var(--ig-size, var(--ig-size-medium))" | "var(--ig-size, var(--ig-size-large))"

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

    Example

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

    Parameters

    • startDate: Date
    • Optional endDate: Date

    Returns void