MaterialDatepickerComponent class

A material-design-styled single date picker -- a date parsing input and calendar picker. Users can type in their own custom dates, or click on the calendar to select a date.

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.

See also material-date-range-picker if you want to choose date ranges.

Implemented types

HasDisabled

Mixed-in types

Annotations

@Component(selector: 'material-datepicker', directives: [AutoFocusDirective, ButtonDirective, DateInputDirective, DeferredContentDirective, DropdownButtonComponent, FocusTrapComponent, KeyboardOnlyFocusIndicatorDirective, MaterialCalendarPickerComponent, materialInputDirectives, MaterialListItemComponent, MaterialPopupComponent, MaterialSelectItemComponent, NgClass, NgFor, NgIf, PopupSourceDirective], providers: [ExistingProvider(HasDisabled, MaterialDatepickerComponent)], styleUrls: ['material_datepicker.scss.css'], templateUrl: 'material_datepicker.html', changeDetection: ChangeDetectionStrategy.onPush)

Constructors

MaterialDatepickerComponent(HtmlElement element, @Attribute('popupClass') String? popupClass, @Optional() @Inject(datepickerClock) Clock? clock)

Properties

ariaLabelForDropdownButton ↔ String?: aria-label attached to the dropdown button that opens the date picker.
getter/setter pair
calendar ↔ CalendarState: getter/setter pair
calendarWeekRowsStyle → String: no setter
compact ↔ bool: Whether to enable compact calendar styles.
getter/setter pair
date ↔ Date?: The selected date.
getter/setter pair
dateChange → Stream<Date?>: Publishes events when the selected date changes.
no setter
disabled ↔ bool: Whether changing the selected date should be disabled.
getter/setter pairoverride
dropdownButton ↔ DropdownButtonComponent?: getter/setter pair
error ↔ String?: An error displayed below the closed date picker.
getter/setter pair
focusable ← Focusable?: no getterinherited
formattedDate → String: no setter
hashCode → int: The hash code for this object.
no setterinherited
isRtl ↔ bool?: Whether the direction of the component is RTL.
getter/setter pairinherited
labelMsg ↔ String?: Label of the datepicker
getter/setter pair
maxDate ↔ Date?: Dates later than maxDate cannot be chosen.
getter/setter pair
minDate ↔ Date?: Dates earlier than minDate cannot be chosen.
getter/setter pair
numCalendarWeekRows ← int: Sets the number of weeks the calendar should show.
no getter
onFocus → Stream<FocusEvent>: Event when the element is focused.
no setterinherited
outputFormat ↔ DateFormat: The format used to format dates.
getter/setter pair
placeholderMsg ↔ String: Gets the i18n'ed "Enter date" placeholder text.
getter/setter pair
popupClassName → String: CSS classes from the root element, passed to the popup to allow scoping of mixins.
final
popupVisible ↔ bool: Opens or closes the datepicker.
getter/setter pair
popupVisibleChange → Stream<bool>: Publishes events when the popupVisible changes.
no setter
preferredPositions ↔ List<RelativePosition>: Preferred positions for alignment.
getter/setter pair
presetDates ↔ List<SingleDayRange>: A list of preset dates which the user can choose from.
getter/setter pair
required ↔ bool: False if null dates are allowed.
getter/setter pair
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
selectDatePlaceHolderMsg ↔ String: Gets the i18n'ed "Select a date" placeholder text.
getter/setter pair
textInput ↔ MaterialInputComponent?: getter/setter pair

Methods

focus() → void: Item/component focuses itself
inherited
handleBackspaceKey(KeyboardEvent event) → void: inherited
handleCharCodeKey(KeyboardEvent event) → void: inherited
handleDeleteKey(KeyboardEvent event) → void: inherited
handleDownKey(KeyboardEvent event) → void: inherited
handleEndKey(KeyboardEvent event) → void: inherited
handleEnterKey(KeyboardEvent event) → void: inherited
handleEscapeKey(KeyboardEvent event) → void: override
handleFocus(FocusEvent event) → void: inherited
handleHomeKey(KeyboardEvent event) → void: inherited
handleLeftKey(KeyboardEvent event) → void: inherited
handlePageDown(KeyboardEvent event) → void: inherited
handlePageUp(KeyboardEvent event) → void: inherited
handleRightKey(KeyboardEvent event) → void: inherited
handleSpaceKey(KeyboardEvent event) → void: inherited
handleUpKey(KeyboardEvent event) → void: inherited
isPresetDateSelected(SingleDayRange presetDate) → bool
ngAfterViewInit() → void
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
onKeyDown(KeyboardEvent event) → void: Keydown callback used to handle arrow keys.
inherited
onKeyPress(KeyboardEvent event) → void: Keypress callback used to handle enter and space keys.
inherited
onKeyUp(KeyboardEvent event) → void: Keyup callback used to handle escape keys.
inherited
onPresetClicked(SingleDayRange selected) → void
onTrigger() → void: Opens the calendar picker popup if not in a disabled state.
setDateFromInput(Date newDate) → void
toString() → String: A string representation of this object.
inherited

Operators

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

Static Properties

customDateMsg → String: Gets the i18n'ed "Custom" label text.
final