# 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