DateRangeInputComponent class

A date-range-input is two date inputs glued together.

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.

Annotations
  • @Component(changeDetection: ChangeDetectionStrategy.onPush, selector: 'date-range-input', template: r''' <material-input dateParsing [dateFormat]="startDateFormat" [maxDate]="startMaxDate" [minDate]="minDate" [required]="isDateInputRequired" [label]="startDateMsg" [class.active]="isStartActive" [(date)]="start" (focus)="onStartFocused()" [disabled]="disabled" class="start date-input"> </material-input> <span class="separator">—</span> <material-input dateParsing [dateFormat]="endDateFormat" [maxDate]="maxDate" [minDate]="endMinDate" [required]="isDateInputRequired" [label]="endDateMsg" [class.active]="isEndActive" [(date)]="end" [rangeEnd]="true" (focus)="onEndFocused()" [disabled]="disabled" class="end date-input"> </material-input> ''', styleUrls: ['date_range_input.scss.css'], directives: [DateInputDirective, materialInputDirectives])

Constructors

DateRangeInputComponent(ChangeDetectorRef _changeDetector)

Properties

activeDateFormat ↔ DateFormat
The DateFormat used to format dates when the input is active.
getter/setter pair
dateFormat ↔ DateFormat
The DateFormat used to format dates. Defaults to yMMMd, e.g. "Jul 31, 2015".
getter/setter pair
disabled ↔ bool
Whether the input field is disabled.
getter/setter pair
end ↔ Date?
getter/setter pair
endDateFormat → DateFormat
no setter
endDateMsg → String
final
endMinDate → Date
no setter
hashCode → int
The hash code for this object.
no setterinherited
isClearRangeSelected ← bool
Internal use only.
no getter
isDateInputRequired → bool
Whether date input is required. Since the input date is null, after clearing date range, isDateInputRequired should be false when _isClearRangeSelected is true to avoid unnecessary input error check.
no setter
isEndActive → bool
no setter
isStartActive → bool
no setter
maxDate ↔ Date
The latest recognized date, inclusive. Defaults to Dec 31, 9999 -- i.e., limited to 4-digit years.
getter/setter pair
minDate ↔ Date
The earliest recognized date, inclusive. Defaults to Jan 1, 1000 -- i.e., limited to 4-digit years.
getter/setter pair
range ↔ DateRange
The selected date range.
getter/setter pair
rangeChange → Stream<DateRange>
Fired when the selected date range changes. Text input only triggers this if both inputs are valid dates
no setter
rangeId ↔ String?
ID of the range this date-range-input controls.
getter/setter pair
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
start ↔ Date?
getter/setter pair
startDateFormat → DateFormat
no setter
startDateMsg → String
final
startMaxDate → Date
no setter
state ↔ CalendarState?
An object describing the entire state of the calendar -- what's selected on the calendar, and whether or not the selection is currently "active".
getter/setter pair
stateChange → Stream<CalendarState?>
Fired when the calendar state changes -- e.g. when the user starts dragging the selected date range.
no setter

Methods

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
onEndFocused() → void
onStartFocused() → void
toString() → String
A string representation of this object.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited