Format date

Formats a date/time using the specified locale and options.
Design Code

Interactive Demo






<nile-format-date date="2024-04-24T09:17:00-04:00"></nile-format-date>

<!-- Human-readable date -->
<nile-format-date month="long" day="numeric" year="numeric"></nile-format-date><br />

<!-- Time -->
<nile-format-date hour="numeric" minute="numeric"></nile-format-date><br />

<!-- Weekday -->
<nile-format-date weekday="long"></nile-format-date><br />

<!-- Month -->
<nile-format-date month="long"></nile-format-date><br />

<!-- Year -->
<nile-format-date year="numeric"></nile-format-date><br />

<!-- No formatting options -->
<nile-format-date></nile-format-date>

Attributes & Properties

Name Description Reflects Type Default
date The date/time to format. If not set, the current date and time will be used. When passing a string, it’s strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format in JavaScript, use date.toISOString(). Date | string new Date()
weekday The format for displaying the weekday. 'narrow' | 'short' | 'long' -
era The format for displaying the era. 'narrow' | 'short' | 'long' -
year The format for displaying the year. 'numeric' | '2-digit' -
month The format for displaying the month. 'numeric' | '2-digit' | 'narrow' | 'short' | 'long' -
day The format for displaying the day. 'numeric' | '2-digit' -
hour The format for displaying the hour. 'numeric' | '2-digit' -
minute The format for displaying the minute. 'numeric' | '2-digit' -
second The format for displaying the second. 'numeric' | '2-digit' -
timeZoneName The format for displaying the time. 'short' | 'long' -
timeZone The time zone to express the time in. string -
hourFormat The format for displaying the hour. 'auto' | '12' | '24' 'auto'
dateSeparator (date-separator) A read-only promise that resolves when the component has finished updating. '-' | '/' '-'