MaterialDateRangePickerComponent class
A material-design-styled date range picker.
Users can choose preset date ranges, type in custom date ranges, or select ranges by playing around with the calendar.
When a user types in a date, dates with 2-digit years are handled specially. E.g. 7/7/77 is interpreted as July 7, 1977, not July 7, 77. This logic looks 20 years into the future: right now (August 2015), "35" is interpreted as 2035 but "36" is interpreted as "1936". Next year, "36" will start to be interpreted as 2036.
Since a primary use of this picker is for a global per-app date range, this component can also read from and write to an ObservableReference instance. (The DatepickerModel class is also provided to make using it easier in dependency injection.)
To control the size of the popup, provide a PopupSizeProvider through dependency injection. If no PopupSizeProvider is provided, the maximum height of the popup is 600px.
Attributes:
popupClass-- Class to be added to the range picker popup so that the popup can be styled in an encapsulated way. SeeMaterialPopupfor documentation.
- Implemented types
- Mixed-in types
- Annotations
-
- @Component(selector: 'material-date-range-picker', styleUrls: ['material_date_range_picker.scss.css'], templateUrl: 'material_date_range_picker.html', directives: [ButtonDirective, DateRangeEditorComponent, DeferredContentDirective, DropdownButtonComponent, FocusableDirective, KeyboardOnlyFocusIndicatorDirective, MaterialButtonComponent, MaterialPopupComponent, NextPrevComponent, NgIf, PopupSourceDirective, FocusTrapComponent], providers: [ExistingProvider(DateRangeEditorHost, MaterialDateRangePickerComponent), ExistingProvider(Focusable, MaterialDateRangePickerComponent), ExistingProvider(HasDisabled, MaterialDateRangePickerComponent), ExistingProvider(PopupSizeProvider, MaterialDateRangePickerComponent)])
Constructors
- MaterialDateRangePickerComponent(@Optional() @Inject(datepickerClock) Clock? clock, Clock legacyClock, @Optional() DatepickerConfig? config, @Attribute('popupClass') String? popupClass, @Optional() @SkipSelf() PopupSizeProvider? _popupSizeProvider, HtmlElement element, DomService _domService, NgZone _ngZone)
Properties
- activeDateFormat ↔ DateFormat
-
The
DateFormatused to format dates when the input is active.getter/setter pair - allowHighlightUpdates ↔ bool
-
getter/setter pair
- applyBarVisible ↔ bool
-
getter/setter pair
- applyButtonLabel ↔ String?
-
The label for the 'Apply' button. Set this variable only if you want a
different label other than 'Apply'. If set, the input label should be
internationalized.
getter/setter pair
- applyButtonMsg → String
-
no setter
- compact ↔ bool
-
Whether to enable compact calendar styles.
getter/setter pair
-
comparisonOptions
← List<
ComparisonOption> -
ComparisonOptions the user can choose from.
no getter
- configuration ↔ DateRangePickerConfiguration
-
Date range picker configuration.
getter/setter pair
- dateFormat ↔ DateFormat
-
The
DateFormatused to format dates.getter/setter pair - disabled ↔ bool
-
Whether changing the selected date range should be disabled.
getter/setter pairoverride
- dropdownButtonAriaLabel ↔ String?
-
The ARIA label for the dropdown button.
getter/setter pair
- error ↔ String?
-
An error displayed below the dropdown button.
getter/setter pair
- focusable ← Focusable?
-
no getterinherited
- focusableElement ← ButtonDirective?
-
no getter
- focusOnClose ↔ KeyboardOnlyFocusIndicatorDirective?
-
getter/setter pair
- formattedComparison → String?
-
no setter
- formattedRange → String?
-
no setter
- hasComparison → bool
-
no setter
- hashCode → int
-
The hash code for this object.
no setterinherited
- hasTitle → bool
-
no setter
- isBasic → bool
-
Whether or not this date range picker is basic.
no setter
- isCalendarCreated → bool
-
no setter
- isEditorCreated → bool
-
no setter
- maxDate ↔ Date
-
Dates later than
maxDatecannot be chosen.getter/setter pair - minDate ↔ Date
-
Dates earlier than
minDatecannot be chosen.getter/setter pair - model → DateRangeEditorModel
-
final
- movingStartMaintainsLength ↔ bool
-
For date range selection, whether clicking to move the start date should
also move the end date (preserving the length of the selected range).
getter/setter pair
-
onFocus
→ Stream<
FocusEvent> -
Event when the element is focused.
no setterinherited
-
onPopupVisible
→ Stream<
bool> -
Published when the datepicker popup starts opening or closing.
no setter
- placeHolderMsg ↔ String
-
A placeholder message to display if no date range is selected.
getter/setter pair
- popup ↔ MaterialPopupComponent?
-
getter/setter pair
- popupClassName → String
-
CSS classes from the root element, passed to the popup to allow scoping of
mixins.
final
-
preferredPositions
↔ List<
RelativePosition> -
A list of positions for popup alignment.
getter/setter pair
-
presets
↔ List<
DatepickerPreset> -
A list of preset date ranges which the user can choose from.
getter/setter pair
- range ↔ DatepickerComparison?
-
The selected date range and comparison.
getter/setter pair
-
rangeChange
→ Stream<
DatepickerComparison?> -
Published when the selected date range or comparison range changes.
no setter
- rangeFormatter ↔ RangeFormatter
-
Custom date range formatter function to apply to dropdown button text.
getter/setter pair
- rangeTitle → String
-
no setter
- relativeDaysToToday ↔ bool
-
Whether to use LastNDaysToTodayRange to represent "N days up to today".
getter/setter pair
- requireFullPeriods ↔ bool
-
When 'requireFullPeriods' is true, 'prev/next' button will be disabled
if previous or next period is not a full predefined period, like 'week'.
getter/setter pair
- runtimeType → Type
-
A representation of the runtime type of the object.
no setterinherited
-
selection
↔ ObservableReference<
DatepickerComparison?> -
An ObservableReference of a date range.
getter/setter pair
- showNextPrevButtons ↔ bool
-
Whether or not to show the next and previous buttons.
getter/setter pair
- supportsClearRange ↔ bool
-
Whether or not this date range picker supports clearing date range.
getter/setter pair
- supportsComparison ↔ bool
-
Whether or not this date range picker supports choosing time comparison
ranges.
getter/setter pair
- supportsCustomRange → bool
-
Whether or not this date range picker supports choosing custom range.
no setter
- supportsDaysInputs ↔ bool
-
Whether or not this date range picker includes a section to input 'N days
to today' and 'N days to yesterday' ranges.
getter/setter pair
- useMenuForPresets ↔ bool
-
Whether to use menu-items-groups for presets for improved accessibility.
getter/setter pair
Methods
-
apply(
UIEvent event) → void -
applyAndPreventDefault(
UIEvent event) → void -
cancel(
) → void -
cancelAndPreventDefault(
UIEvent event) → void -
close(
) → void - Close the datepicker popup.
-
dateRangeEditorCreated(
Focusable editor) → void -
override
-
focus(
) → void -
Item/component focuses itself
inherited
-
getMaxHeight(
num positionY, num viewportHeight) → num -
The max height.
override
-
getMaxWidth(
num positionX, num viewportWidth) → num? -
The max width.
override
-
getMinHeight(
num positionY, num viewportHeight) → num? -
The min height.
override
-
getMinWidth(
num positionX, num viewportWidth) → num? -
The min width.
override
-
handleFocus(
FocusEvent event) → void -
inherited
-
initEditor(
) → void -
ngAfterChanges(
) → void -
ngOnDestroy(
) → void - Executed before the directive is removed from the DOM and destroyed.
-
ngOnInit(
) → void - Executed after the first change detection run for a directive.
-
noSuchMethod(
Invocation invocation) → dynamic -
Invoked when a nonexistent method or property is accessed.
inherited
-
onRangeClicked(
UIEvent event) → void -
open(
) → void - Open the datepicker popup.
-
setFocusToDateRangeEditor(
) → void -
toString(
) → String -
A string representation of this object.
inherited
Operators
-
operator ==(
Object other) → bool -
The equality operator.
inherited
Static Properties
- cancelButtonMsg → String
-
final