---
schema_version: "1"
id: 8601c7d77088b59cda0a9fb23f03324bbed62999341697f64b4a79fbb405377d
title: Formatted Date Time
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/formattedDateTime/lightning-formatted-date-time.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-formatted-date-time.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 2055658e7873f6354b7edd52d7b14378c2d9df1998701ea8d6c4456a7d04952a
products:
  - Lightning Component Reference
---

# Formatted Date Time

**`lightning-formatted-date-time`**

Displays formatted date and time.

**For Use In**

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="formattedDateTime" model="lwc" namespace="lightning"}


:::::

:::::tab

A `lightning-formatted-date-time` component shows formatted date and time.
This component uses the Intl.DateTimeFormat JavaScript object to format date
values. The locale set in the Salesforce user preferences determines the
default formatting. This component supports these input values.

- Date object
- ISO8601 formatted string
- Timestamp

An ISO8601 formatted string matches one of the these patterns.

- YYYY
- YYYY-MM
- YYYY-MM-DD
- YYYY-MM-DDThh:mmTZD
- YYYY-MM-DDThh:mm:ssTZD
- YYYY-MM-DDThh:mm:ss.sTZD

`YYYY` is the year in the Gregorian calendar, `MM` is the month between 01 and
12, and `DD` is the day between 01 and 31. `hh` is the number of hours that
have passed since midnight, `mm` is the number of minutes that have passed
since the start of the hour, and `ss` is the number of seconds since the start
of the minute.

`TZD` is the time zone designator, like `Z`, `+hh:mm` or `-hh:mm`. To indicate
that a time is measured in Universal Time (UTC), append a `Z` to a time.

## Default Formatting

When no attributes other than `value` are specified, the component uses the default "medium" date format based on the user's locale in Salesforce.

The locale determines the order and format of the month, day, and year. For example, the English (United States) locale's medium date format is Oct 14, 2020 and the French (France) locale's medium date format is 14 Oct 2020. The locale doesn't determine the time zone. Time zone is a separate setting.

To override the medium date format, pass in the `short` or `long` format to
the `date-style` attribute. For the previous example, the short format in English (United States) is 10/14/2020 while the long format is October 14, 2020.

The locale also determines whether to display time as 24-hour time or 12-hour time with AM and PM. You can override the locale default with the `hour12` attribute. See [Date and Time Display Examples](#date-and-time-display-examples) for more information.

Specify optional attributes listed in the Specification tab to modify the date and time display, overriding the locale's default formatting.

## Time Zone Considerations

Two different attributes affect the time zone display.

The `time-zone-name` attribute specifies how to display the time zone. Set it to `short` to display
a code such as EST, or `long` to display a description such as Eastern Standard Time.

The `time-zone` attribute sets a particular time zone to use to display the date and time,
instead of the user device's time zone setting. Specify a
time zone from the [IANA Time Zone Database](https://www.iana.org/time-zones), such as
`America/New_York`, `Europe/London`, or `Asia/Tokyo`. You can’t use a time zone short code such as
EST to set the `time-zone` attribute. You can use the code UTC however, as it's the only short code that browsers
must recognize.

When using the component to display a date only, without time, include `time-zone="UTC"` to ensure the correct date displays
in all time zones. This requirement is especially important if you specify a timestamp for the `value`. Because timestamps contain time and date information, the component converts the date to the time zone in effect on the user's device and then displays the date.

## Date and Time Display Examples

Here are some examples based on a locale of en-US.

Displays: Jan 11, 2019

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-date-time value="1547250828000" time-zone="UTC">
    </lightning-formatted-date-time>
</template>
```
<!-- prettier-ignore-end -->

Displays: January 11, 2019

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-date-time value="1547250828000" date-style="long" time-zone="UTC">
    </lightning-formatted-date-time>
</template>
```
<!-- prettier-ignore-end -->

Displays: Friday, Jan 11, 19

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-date-time
        value="1547250828000"
        year="2-digit"
        month="short"
        day="2-digit"
        weekday="long"
        time-zone="UTC"
    >
    </lightning-formatted-date-time>
</template>
```
<!-- prettier-ignore-end -->

Displays: 1/11/2019, 3:53 PM PST (if user is in PST time zone)

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-date-time
        value="1547250828000"
        year="numeric"
        month="numeric"
        day="numeric"
        hour="2-digit"
        minute="2-digit"
        time-zone-name="short"
    >
    </lightning-formatted-date-time>
</template>
```
<!-- prettier-ignore-end -->

Displays: 1/11/2019, 6:53 PM EST

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-date-time
        value="1547250828000"
        year="numeric"
        month="numeric"
        day="numeric"
        hour="2-digit"
        minute="2-digit"
        time-zone-name="short"
        time-zone="America/New_York"
    >
    </lightning-formatted-date-time>
</template>
```
<!-- prettier-ignore-end -->

Displays: 1/11/2019, 18:53 EST

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-date-time
        value="1547250828000"
        year="numeric"
        month="numeric"
        day="numeric"
        hour="2-digit"
        hour12={ampm}
        minute="2-digit"
        time-zone-name="short"
        time-zone="America/New_York"
    >
    </lightning-formatted-date-time>
</template>
```
<!-- prettier-ignore-end -->

Set the `hour12` attribute using a variable. If set to `false` or any other string directly, the component interprets its value as true.

```js
import { LightningElement } from "lwc";

export default class FormattedDateTimeHour12 extends LightningElement {
  ampm = false;
}
```

## Date and Time Stored in Salesforce

Salesforce uses the ISO8601 format `YYYY-MM-DD` to store date fields, which store a date without time, and includes no time zone information.
When formatting dates without time, include `time-zone="UTC"` to ensure the correct date displays.

Salesforce uses the ISO8601 format `YYYY-MM-DDThh:mm:ss.SZ` for date/time fields, which stores date/time in UTC.

Assuming a user is in the en-US locale and Pacific time zone, here are two examples for a date field with
the value `1965-04-09`.

Displays: Apr 9, 1965

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-date-time value={contact.Birthdate} time-zone="UTC">
    </lightning-formatted-date-time>
</template>
```
<!-- prettier-ignore-end -->

Displays: April 09, 1965

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-date-time
        value={contact.Birthdate}
        year="numeric"
        day="2-digit"
        month="long"
        time-zone="UTC"
    >
    </lightning-formatted-date-time>
</template>
```
<!-- prettier-ignore-end -->

Assuming an en-US locale and a Pacific time zone,
here's an example for a date/time field with the value
`2017-12-03T20:00:00.000+00:00`.

Displays: December 03, 2017, 12:00 PM

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-date-time
        value={contact.Next_Meeting__c}
        year="numeric"
        day="2-digit"
        month="long"
        hour="2-digit"
        minute="2-digit"
    >
    </lightning-formatted-date-time>
</template>
```
<!-- prettier-ignore-end -->

## Usage Considerations

This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.

## LWC Recipes

The [LWC Recipes GitHub repository](https://github.com/trailheadapps/lwc-recipes) contains code examples for Lightning Web Components that you can test in an org.

For a recipe that uses `lightning-formatted-date-time`, see the `c-clock` component.

## See Also

[_Object Reference for the Salesforce Platform_: Field Types](https://developer.salesforce.com/docs/atlas.en-us.object_reference.meta/object_reference/field_types.htm)


:::::

:::::tab
::component-specification{component="formattedDateTime" model="lwc" namespace="lightning"}

:::::

::::::