Skip to content

Latest commit

 

History

History
273 lines (214 loc) · 30.4 KB

README.md

File metadata and controls

273 lines (214 loc) · 30.4 KB

intl-datetimeformat elements

A custom element for Intl.DateTimeFormat

intl-datetimeformat elements can be used to format dates and times with language sensitivity. Use <time> elements with datetime attributes to pass the date and time to be formatted.

Example

Format a date and time:

<intl-datetimeformat locales="hi" option-datestyle="long"
  option-timestyle="long">
  <p>
    <intl-datetimeformat-format>
      <time datetime="2023-01-01T00:00:00Z">
        Midnight on January 1, 2023
      </time>
    </intl-datetimeformat-format>
  </p>
</intl-datetimeformat>

Format a date range:

<intl-datetimeformat locales="ar" option-datestyle="long"
  option-timestyle="long">
  <p>
    <intl-datetimeformat-formatrange>
      <time slot="start" datetime="2023-01-01T00:00:00Z">
        Midnight on January 1, 2023
      </time>
      ~
      <time slot="end" datetime="2024-12-31T23:59:59Z">
        Midnight on December 31, 2023
      </time>
    </intl-datetimeformat-formatrange>
  </p>
</intl-datetimeformat>

<intl-datetimeformat> (HTMLIntlDateTimeFormatElement)

Learn more about Intl.DateTimeFormat()

Attributes

Name Type Default Required? Description Property
locales string | undefined undefined locales
locales-from string | undefined undefined localesFrom
option-calendar Intl.DateTimeFormatOptions['calendar'] | undefined undefined optionCalendar
option-datestyle Intl.DateTimeFormatOptions['dateStyle'] | undefined undefined optionDateStyle
option-day Intl.DateTimeFormatOptions['day'] | undefined undefined optionDay
option-dayperiod Intl.DateTimeFormatOptions['dayPeriod'] | undefined undefined optionDayPeriod
option-era Intl.DateTimeFormatOptions['era'] | undefined undefined optionEra
option-formatmatcher Intl.DateTimeFormatOptions['formatMatcher'] undefined optionFormatMatcher
option-fractionalseconddigits Intl.DateTimeFormatOptions['fractionalSecondDigits'] | undefined undefined optionFractionalSecondDigits
option-hour Intl.DateTimeFormatOptions['hour'] | undefined undefined optionHour
option-hour12 Intl.DateTimeFormatOptions['hour12'] | undefined undefined optionHour12
option-hourcycle Intl.DateTimeFormatOptions['hourCycle'] | undefined undefined optionHourCycle
option-localematcher Intl.RelativeTimeFormatLocaleMatcher | undefined undefined optionLocaleMatcher
option-minute Intl.DateTimeFormatOptions['minute'] | undefined undefined optionMinute
option-month Intl.DateTimeFormatOptions['month'] | undefined undefined optionMonth
option-numberingsystem Intl.DateTimeFormatOptions['numberingSystem'] | undefined undefined optionNumberingSystem
option-second Intl.DateTimeFormatOptions['second'] | undefined undefined optionSecond
option-timestyle Intl.DateTimeFormatOptions['timeStyle'] | undefined undefined optionTimeStyle
option-timezone Intl.DateTimeFormatOptions['timeZone'] | undefined undefined optionTimeZone
option-timezonename Intl.DateTimeFormatOptions['timeZoneName'] | undefined undefined optionTimeZoneName
option-weekday Intl.DateTimeFormatOptions['weekday'] | undefined undefined optionWeekday
option-year Intl.DateTimeFormatOptions['year'] | undefined undefined optionYear

Properties

Name Type Default Required? Read only? Description Attribute
intlObject Intl.DateTimeFormat undefined Yes
localeList DOMTokenList undefined Yes
locales string | undefined undefined locales
localesFrom string | undefined undefined locales-from
localesFromElements HTMLIntlLocaleElement[] undefined Yes
optionCalendar Intl.DateTimeFormatOptions['calendar'] | undefined undefined option-calendar
optionDateStyle Intl.DateTimeFormatOptions['dateStyle'] | undefined undefined option-datestyle
optionDay Intl.DateTimeFormatOptions['day'] | undefined undefined option-day
optionDayPeriod Intl.DateTimeFormatOptions['dayPeriod'] | undefined undefined option-dayperiod
optionEra Intl.DateTimeFormatOptions['era'] | undefined undefined option-era
optionFormatMatcher Intl.DateTimeFormatOptions['formatMatcher'] undefined option-formatmatcher
optionFractionalSecondDigits Intl.DateTimeFormatOptions['fractionalSecondDigits'] | undefined undefined option-fractionalseconddigits
optionHour Intl.DateTimeFormatOptions['hour'] | undefined undefined option-hour
optionHour12 Intl.DateTimeFormatOptions['hour12'] | undefined undefined option-hour12
optionHourCycle Intl.DateTimeFormatOptions['hourCycle'] | undefined undefined option-hourcycle
optionLocaleMatcher Intl.RelativeTimeFormatLocaleMatcher | undefined undefined option-localematcher
optionMinute Intl.DateTimeFormatOptions['minute'] | undefined undefined option-minute
optionMonth Intl.DateTimeFormatOptions['month'] | undefined undefined option-month
optionNumberingSystem Intl.DateTimeFormatOptions['numberingSystem'] | undefined undefined option-numberingsystem
optionSecond Intl.DateTimeFormatOptions['second'] | undefined undefined option-second
optionTimeStyle Intl.DateTimeFormatOptions['timeStyle'] | undefined undefined option-timestyle
optionTimeZone Intl.DateTimeFormatOptions['timeZone'] | undefined undefined option-timezone
optionTimeZoneName Intl.DateTimeFormatOptions['timeZoneName'] | undefined undefined option-timezonename
optionWeekday Intl.DateTimeFormatOptions['weekday'] | undefined undefined option-weekday
optionYear Intl.DateTimeFormatOptions['year'] | undefined undefined option-year

Methods

Name Return Description
resolvedOptions() Intl.ResolvedDateTimeFormatOptions Learn more about Intl.DateTimeFormat.prototype.resolvedOptions()

<intl-datetimeformat-format> (HTMLIntlDateTimeFormatFormatElement)

Learn more about Intl.DateTimeFormat.prototype.format

Attributes

Name Type Default Required? Description Property
provider string | undefined undefined provider

Properties

Name Type Default Required? Read only? Description Attribute
provider string | undefined undefined provider
providerElement HTMLIntlDateTimeFormatElement | undefined undefined Yes
value string undefined Yes

Slots

Name Description
The slotted element must be a <time> element with a valid datetime attribute, and the attribute value must represent a date and optionally a time. Hence, it can only be a date string (YYYY-MM-DD) or a local or global date time string (YYYY-MM-DDTHH:mm:ss.sssZ). See more details in the MDN documentation.

CSS Parts

Name Description
value The <span> element that contains the string of the formatted date and time.

<intl-datetimeformat-formatrange> (HTMLIntlDateTimeFormatFormatRangeElement)

Learn more about Intl.DateTimeFormat.prototype.formatRange

Attributes

Name Type Default Required? Description Property
provider string | undefined undefined provider

Properties

Name Type Default Required? Read only? Description Attribute
provider string | undefined undefined provider
providerElement HTMLIntlDateTimeFormatElement | undefined undefined Yes
value string undefined Yes

Slots

Name Description
The slotted elements must be <time> elements with valid datetime attributes, and the attribute values must represent dates and optionally times. Hence, they can only be date strings (YYYY-MM-DD) or local or global date time strings (YYYY-MM-DDTHH:mm:ss.sssZ). See more details in the MDN documentation. The first slotted <time> element would be used as the start date and the second slotted <time> element would be used as the end date. Alternatively, use the start and end slots, which take higher precedence over the default slotted elements.
end The end date and time. See the default slot for more details.
start The start date and time. See the default slot for more details.

CSS Parts

Name Description
value The <span> element that contains the string of the formatted date and time range.

<intl-datetimeformat-formatrangetoparts> (HTMLIntlDateTimeFormatFormatRangeToPartsElement)

Learn more about Intl.DateTimeFormat.prototype.formatRangeToParts

Attributes

Name Type Default Required? Description Property
provider string | undefined undefined provider

Properties

Name Type Default Required? Read only? Description Attribute
provider string | undefined undefined provider
providerElement HTMLIntlDateTimeFormatElement | undefined undefined Yes
value Intl.DateTimeFormatPart[] undefined Yes

Slots

Name Description
The slotted elements must be <time> elements with valid datetime attributes, and the attribute values must represent dates and optionally times. Hence, they can only be date strings (YYYY-MM-DD) or local or global date time strings (YYYY-MM-DDTHH:mm:ss.sssZ). See more details in the MDN documentation. The first slotted <time> element is used as the start date and the second slotted <time> element is used as the end date. Alternatively, use the start and end slots, which take higher precedence over the default slotted elements.
end The end date and time. See the default slot for more details.
start The start date and time. See the default slot for more details.

CSS Parts

Name Description
day A <span> element that contains the string of a formatted part which type is day.
day-period A <span> element that contains the string of a formatted part which type is dayPeriod.
end-range A <span> element that contains the string of a formatted part which source is endRange.
era A <span> element that contains the string of a formatted part which type is era.
fractional-second A <span> element that contains the string of a formatted part which type is fractionalSecond.
hour A <span> element that contains the string of a formatted part which type is hour.
literal A <span> element that contains the string of a formatted part which type is literal.
minute A <span> element that contains the string of a formatted part which type is minute.
month A <span> element that contains the string of a formatted part which type is month.
related-year A <span> element that contains the string of a formatted part which type is relatedYear.
second A <span> element that contains the string of a formatted part which type is second.
shared A <span> elements that contains the strings of a formatted part which source are shared.
start-range A <span> element that contains the string of a formatted part which source is startRange.
time-zone-name A <span> element that contains the string of a formatted part which type is timeZoneName.
value The <span> element that contains the elements that contain formatted parts of the given date and time range.
weekday A <span> element that contains the string of a formatted part which type is weekday.
year A <span> element that contains the string of a formatted part which type is year.
year-name A <span> element that contains the string of a formatted part which type is yearName.

<intl-datetimeformat-formattoparts> (HTMLIntlDateTimeFormatFormatToPartsElement)

Learn more about Intl.DateTimeFormat.prototype.formatToParts

Attributes

Name Type Default Required? Description Property
provider string | undefined undefined provider

Properties

Name Type Default Required? Read only? Description Attribute
provider string | undefined undefined provider
providerElement HTMLIntlDateTimeFormatElement | undefined undefined Yes
value Intl.DateTimeFormatPart[] undefined Yes

Slots

Name Description
The slotted element must be a <time> element with a valid datetime attribute, and the attribute value must represent a date and optionally a time. Hence, it can only be a date string (YYYY-MM-DD) or a local or global date time string (YYYY-MM-DDTHH:mm:ss.sssZ). See more details in the MDN documentation.

CSS Parts

Name Description
day The <span> element that contains the string of the formatted part which type is day.
day-period The <span> element that contains the string of the formatted part which type is dayPeriod.
era The <span> element that contains the string of the formatted part which type is era.
fractional-second The <span> element that contains the string of the formatted part which type is fractionalSecond.
hour The <span> element that contains the string of the formatted part which type is hour.
literal A <span> element that contains the string of the formatted part which type is literal.
minute The <span> element that contains the string of the formatted part which type is minute.
month The <span> element that contains the string of the formatted part which type is month.
related-year The <span> element that contains the string of the formatted part which type is relatedYear.
second The <span> element that contains the string of the formatted part which type is second.
time-zone-name The <span> element that contains the string of the formatted part which type is timeZoneName.
value The <span> element that contains the elements that contain formatted parts of the given date and time.
weekday The <span> element that contains the string of the formatted part which type is weekday.
year The <span> element that contains the string of the formatted part which type is year.
year-name The <span> element that contains the string of the formatted part which type is yearName.