Rendering a Timestamp Field

The Timestamp field allows content writers to add a date and time.

Before Reading

This page assumes that you have already imported the prismic-reactjs library as shown below.

import {Link, RichText, Date} from 'prismic-reactjs';

This page also assumes that you have retrieved your content and stored it in a variable named document.

Get the Timestamp object

Here's an example of how to retrieve the DateTime object from a Timestamp field using the prismic-react Date method. In this example the API ID of the Timestamp field is event_date.

Copy
const eventDate = Date(document.data.event_date);

Convert the Timestamp to a String

Here's an example of how to convert the Timestamp object to a string that can be rendered. In this example the API ID of the Timestamp field is event_date.

Copy
const timestamp = Date(document.data.event_date).toString();
// Outputs as "Fri Feb 17 2017 13:30:00 GMT+0100 (CET)"

Format the Timestamp

In order to get your Timestamp field into the perfect format, you can pass your Timestamp object into a formatting function. You can either build your own or use a library such as Moment.js.

Here's an example of how to convert the Timestamp object to a formatted string using Moment.js. In this example the API ID of the Timestamp field is event_date.

Copy
const timestamp = Date(document.data.event_date);
const formattedDate = Moment(timestamp).format("lll");
// Outputs as "Feb 17, 2017 1:30 PM"