Overview
Purpose: adds locale-dependent date support to an element, typically for
- use in creating calendar components such as CalendarMonth.
This mixin works in the middle of the Elix render pipeline:
events → methods ➞ setState → render DOM → post-render
Expects the component to provide:
setStatemethod, usually supplied by ReactiveMixin.
Provides the component with:
dateproperty for the date that should be shown by the element.localeproperty for the language and region that should be used by the element.
Usage
import CalendarElementMixin from "elix/src/base/CalendarElementMixin.js";
class MyElement extends CalendarElementMixin(HTMLElement) {}
Example
API
Used by classes CalendarDay, CalendarDayButton, CalendarDays, CalendarMonth, CalendarMonthNavigator, CalendarMonthNavigator, CalendarMonthYearHeader, DateComboBox, DateInput, PlainCalendarDay, PlainCalendarDayButton, PlainCalendarDays, PlainCalendarMonth, PlainCalendarMonthNavigator, PlainCalendarMonthNavigator, PlainCalendarMonthYearHeader, PlainDateComboBox, and PlainDateInput.
date property
The date that should be shown by the element. For elements that show a range of dates (a month, a week, etc.), the referenced date will be included in the range.
This property can be set as a string, which will be parsed and converted
to a JavaScript Date.
If not specified, the default date value is the current date.
Type: Date
datechange event
Raised when the date property changes.
locale property
A string that identifies a language and a region using a BCP 47
language tag. This is the same format used by to identify a
locale in the standard Intl internationalization API.
See the
locales argument
documentation for details.
Calendar elements are region-sensitive, so language alone is insufficient. Accordingly, the locale should identify at least a language and a region. Examples: "en-US" identifies US English, while "en-GB" identifies English in Great Britain. The use of "en" on its own would be insufficient.
Type: string