Format Date (fw-format-date)

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

The date attribute determines the date/time to use when formatting. It must be a string that Date.parse() (opens new window) can interpret or a Date (opens new window) object set via JavaScript. By default current date/time is used.

When using strings, avoid ambiguous dates such as 05/04/2021 which can be interpreted as May 4 or April 5 depending on the user's browser and locale. Instead, always use a valid ISO 8601 date time string (opens new window) to ensure the date will be parsed correctly.

Localization is handled by the browser's Intl.DateTimeFormat API (opens new window).

Demo

Show Code

Formatting options

Show Code

Hour Format

12 hour format

24 hour format

Show Code

Locale

English

Great Britain

Show Code

Usage

DateFormatController

You can use DateFormatController to format date by passing the below set of DateFormatOptions.

Javascript - import { DateFormatController } from "@freshworks/crayons"
React - import { DateFormatController } from "@freshworks/crayons/react"

 const formattedDate= DateFormatController({
     date: // defaults to current date
     locale: // defaults to browser's default locale
    //...Date Format Options
 });

DateFormatOptions

interface dateOptions {
  weekday?: 'narrow' | 'short' | 'long';

  /** The format for displaying the year. */
  year?: 'numeric' | '2-digit';

  /** The format for displaying the month. */
  month?: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long';

  /** The format for displaying the day. */
  day?: 'numeric' | '2-digit';

  /** The format for displaying the hour. */
  hour?: 'numeric' | '2-digit';

  /** The format for displaying the minute. */
  minute?: 'numeric' | '2-digit';

  /** The format for displaying the second. */
  second?: 'numeric' | '2-digit';

  /** When set, 12 hour time will be used. */
  hour12?: boolean;

  /** The format for displaying the time. */
  timeZoneName?: 'short' | 'long';

  /** The time zone to express the time in. */
  timeZone?: string;
}

Properties

Property	Attribute	Description	Type	Default
date	date	The date/time to format. If not set, the current date and time will be used.	Date \| number \| string	new Date()
day	day	The format for displaying the day.	"2-digit" \| "numeric"	undefined
hour	hour	The format for displaying the hour.	"2-digit" \| "numeric"	undefined
hourFormat	hour-format	When set, 24 hour time will always be used.	"12" \| "24" \| "auto"	'auto'
locale	locale	The locale to use when formatting the date/time.	string	undefined
minute	minute	The format for displaying the minute.	"2-digit" \| "numeric"	undefined
month	month	The format for displaying the month.	"2-digit" \| "long" \| "narrow" \| "numeric" \| "short"	undefined
second	second	The format for displaying the second.	"2-digit" \| "numeric"	undefined
timeZone	time-zone	The time zone to express the time in.	string	undefined
timeZoneName	time-zone-name	The format for displaying the time.	"long" \| "short"	undefined
weekday	weekday	The format for displaying the weekday.	"long" \| "narrow" \| "short"	undefined
year	year	The format for displaying the year.	"2-digit" \| "numeric"	undefined

---

Built with ❤ at Freshworks