Rendering the Date Field

The Date field allows content writers to add a date that represents a calendar day.

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 Date object

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

Copy
const date = Date(document.data.date);

Convert the Date to a String

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

Copy
const dateString = Date(document.data.date).toString();
// Outputs as "Fri Feb 17 2017 01:00:00 GMT+0100"

Format the Date Object

In order to get your date field into the perfect format, you can pass your Date 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 Date object to a formatted string using Moment.js. In this example the API ID of the Date field is date.

Copy
const date = Date(document.data.date);
const formattedDate = Moment(date).format("LL");
// Outputs as "February 17, 2017"