Adds locale-sensitive date support


Purpose: adds locale-dependent date support to an element, typically for

This mixin works in the middle of the Elix render pipeline:

events → methodssetState → render DOM → post-render

Expects the component to provide:

Provides the component with:

  • date property for the date that should be shown by the element.
  • locale property for the language and region that should be used by the element.


import CalendarElementMixin from "elix/src/base/CalendarElementMixin.js";
class MyElement extends CalendarElementMixin(HTMLElement) {}


Demo: CalendarElementMixin handles the date and locale of this CalendarMonth


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