Emitted after the calendar has closed.
Emitted when the calendar has started closing, cancelable.
Enables or disables the picker.
The format used when editable inputs are not focused.
The number of displayed month views.
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 whether dates that are not part of the current month will be displayed.
The expected user input format and placeholder.
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 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.
Emitted when the picker's value changes. Used for two-way binding.
Gets calendar state.
let state = this.dateRange.collapsed;
Overrides the default text of the calendar dialog Done button.
Defaults to the value from resource strings, "Done" for the built-in EN.
The button will only show up in dialog mode.
<igx-date-range-picker doneButtonText="完了"></igx-date-range-picker>
Gets the locale of the date-picker.
If not set, defaults to applciation's locale..
Sets the locale of the date-picker.
Expects a valid BCP 47 language tag.
The maximum value in a valid range.
The minimum value in a valid range.
An accessor that returns the resource strings.
An accessor that sets the resource strings. By default it uses EN resources.
Determines how the picker's input will be styled.
The currently selected value / range from the calendar
The current value is of type DateRange
const newValue: DateRange = { start: new Date("2/2/2012"), end: new Date("3/3/2013")};
this.dateRangePicker.value = newValue;
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.
<igx-date-range-picker #dateRange></igx-date-range-picker>
<button type="button" igxButton (click)="dateRange.open()">Open Dialog</button
Selects a range of dates. If no endDate is passed, range is 1 day (only startDate)
public selectFiveDayRange() {
const today = new Date();
const inFiveDays = new Date(new Date().setDate(today.getDate() + 5));
this.dateRange.select(today, inFiveDays);
}
Toggles the date range picker's dropdown or dialog
<igx-date-range-picker #dateRange></igx-date-range-picker>
<button type="button" igxButton (click)="dateRange.toggle()">Toggle Dialog</button>
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