Emitted after the calendar has closed.
Emitted when the calendar has started closing, cancelable.
Custom ranges rendered as chips.
Enables or disables the picker.
A custom formatter function, applied on the selected or passed in date.
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>
Gets/Sets the orientation of the IgxDatePickerComponent header.
Gets/Sets whether the header is hidden in dialog mode.
Gets/Sets whether dates that are not part of the current month will be displayed.
Can be dropdown with editable input field or dialog with readonly input field.
Emitted after the calendar has opened.
Emitted when the calendar has started opening, cancelable.
Gets/Sets the orientation of the multiple months displayed in the picker's calendar's days view.
Gets/Sets the container used for the popup element.
Custom overlay settings that should be used to display the calendar.
Sets the placeholder for single-input IgxDateRangePickerComponent.
Show/hide week numbers
Gets/Sets the default template editor's tabindex.
Whether to render built-in predefined ranges.
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.
Gets calendar state.
let state = this.dateRange.collapsed;
Gets the locale of the date-range-picker.
If not set, defaults to application's locale.
Sets the locale of the date-picker.
Expects a valid BCP 47 language tag.
An accessor that returns the resource strings.
An accessor that sets the resource strings. By default it uses EN resources.
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.
Sets the start day of the week.
Can be assigned to a numeric value or to WEEKDAYS enum value.
Opens the date range picker's dropdown or dialog.
Selects a range of dates. If no endDate is passed, range is 1 day (only startDate)
Toggles the date range picker's dropdown or dialog
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-startandigx-date-range-enddisplays two editable input fields.Example