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"

If you require only some simple date and time formatting, you may use the inbuilt DateTimeFormat method instead.

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

var formattedTimestamp = Intl.DateTimeFormat('en-US',{
  year: "numeric",
  month: "short",
  day: "2-digit",
  hour: "numeric",
  minute: "2-digit",
  second: "2-digit"
}).format(timestamp);
// Outputs the date and time in Mon dd, YYYY, H:MM:SS AM/PM format