Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class IgxDateRangePickerComponent

Provides the ability to select a range of dates from a calendar UI or editable inputs.

@igxmodule

IgxDateRangeModule

@igxtheme

igx-input-group-theme, igx-calendar-theme, igx-date-range-picker-theme

@igxkeywords

date, range, date range, date picker

@igxgroup

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

Implements

  • DoCheck
  • OnInit
  • IToggleView
  • OnChanges
  • OnInit
  • AfterViewInit
  • OnDestroy
  • ControlValueAccessor
  • Validator

Constructors

Properties

Accessors

Methods

Constructors

constructor

Properties

disabled

disabled: boolean = false

Enables/Disables the IgxDateRangePickerComponent.

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

displayFormat

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>

doneButtonText

doneButtonText: string = "Done"

The default text of the calendar dialog done button.

@remarks

Default value is Done. The button will only show up in dialog mode.

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

element

element: ElementRef

formatter

formatter: function

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

hideOutsideDays

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

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>

label

label: IgxLabelDirective

locale

locale: string

Locale settings used for value formatting and calendar.

@remarks

Uses Angular's LOCALE_ID by default. Affects both input mask and display format if those are not set. If a locale is set, it must be registered via registerLocaleData. Please refer to https://angular.io/guide/i18n#i18n-pipes. If it is not registered, Intl will be used for formatting.

@example
<igx-date-range-picker locale="jp"></igx-date-range-picker>

mode

mode: string = InteractionMode.Dialog

Display calendar in either dialog or dropdown mode.

@remarks

Default mode is dialog

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

monthsViewNumber

monthsViewNumber: number = 2

The number of displayed month views.

@remarks

Default is 2.

@example
<igx-date-range-picker [monthsViewNumber]="3"></igx-date-range-picker>

onClosed

onClosed: EventEmitter<IBaseEventArgs> = new EventEmitter<IBaseEventArgs>()

Emitted when the IgxDateRangeComponent is closed.

@example
<igx-date-range-picker (onClosed)="handleClosed($event)"></igx-date-range-picker>

onClosing

onClosing: EventEmitter<IBaseCancelableBrowserEventArgs> = new EventEmitter<IBaseCancelableBrowserEventArgs>()

Emitted when the calendar starts closing, cancelable.

@example
<igx-date-range-picker (onClosing)="handleClosing($event)"></igx-date-range-picker>

onDensityChanged

onDensityChanged: EventEmitter<IDensityChangedEventArgs> = new EventEmitter<IDensityChangedEventArgs>()

onOpened

onOpened: EventEmitter<IBaseEventArgs> = new EventEmitter<IBaseEventArgs>()

Emitted when the IgxDateRangeComponent is opened.

@example
<igx-date-range-picker (onOpened)="handleOpened($event)"></igx-date-range-picker>

onOpening

onOpening: EventEmitter<IBaseCancelableBrowserEventArgs> = new EventEmitter<IBaseCancelableBrowserEventArgs>()

Emitted when the calendar starts opening, cancelable.

@example
<igx-date-range-picker (onOpening)="handleOpening($event)"></igx-date-range-picker>

overlaySettings

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

placeholder: string = ""

Sets the placeholder for single-input IgxDateRangePickerComponent.

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

rangeSelected

rangeSelected: EventEmitter<DateRange> = new EventEmitter<DateRange>()

Emitted when a range is selected.

@example
<igx-date-range-picker (rangeSelected)="handleSelected($event)"></igx-date-range-picker>

weekStart

weekStart: WEEKDAYS = WEEKDAYS.SUNDAY

The start day of the week.

@remarks

Can be assigned to a numeric value or to WEEKDAYS enum value.

@example
<igx-date-range-picker [weekStart]="1"></igx-date-range-picker>

Accessors

collapsed

  • get collapsed(): boolean

displayDensity

maxValue

  • get maxValue(): Date | string
  • set maxValue(value: Date | string): void

minValue

  • get minValue(): Date | string
  • set minValue(value: Date | string): void

value

Methods

close

  • close(): void

ngDoCheck

  • ngDoCheck(): void

open

selectRange

  • selectRange(startDate: Date, endDate?: Date): void

toggle