Rendering the Date field

Prismic no longer recommends the gatsby-source-prismic-graphql plugin

With recent changes to Gatsby, Prismic no longer recommends the gatsby-source-prismic-graphql plugin that this documentation uses. Read more about the future of Prismic and Gatsby. We highly recommend using the gatsby-source-prismic instead. The documentation for this plugin can be found in the plugin's github README.

We will leave this documentation here for now, but will change it in the future when we determine the best approach for Prismic & Gatsby.

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

Before Reading

This page assumes that you have saved the document object in a variable named document as shown in the Retrieve the document object page.

Access the Date field value

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 publication_date.

Copy
import { Date } from 'prismic-reactjs'

const date = Date(document.publication_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 publication_date.

Copy
import { Date } from 'prismic-reactjs'

const dateString = Date(document.publication_date).toString()
// Outputs as "Wed Mar 11 2020 01:00:00 GMT+0100"

Format the Date

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 publication_date.

Copy
import { Date } from 'prismic-reactjs'

const date = Date(document.publication_date)
const formattedDate = Moment(date).format('LL')
// Outputs as "Mar 11, 2020"

If you require only some simple date formatting, you may use the built-in DateTimeFormat method instead.

Copy
import { Date } from 'prismic-reactjs'

const date = Date(document.publication_date)
const formattedDate = Intl.DateTimeFormat('en-US',{
  year: 'numeric',
  month: 'short',
  day: '2-digit' }).format(date)
// Outputs as "Mar 11, 2020"

A full example

Now let's take a look at a full page component example. Here you can see how the Date field is included in the query, retrieved, and templated on the page. Again in this example the API ID of the Date field is publication_date.

Copy
import React from 'react'
import { graphql } from 'gatsby'
import { Date } from 'prismic-reactjs'

const Page = ({ data }) => {
  const prismicContent = data.prismic.allPages.edges[0]
  if (!prismicContent) return null
  const document = doc.node

  const date = Date(document.publication_date)
  const formattedDate = Intl.DateTimeFormat('en-US',{
    year: 'numeric',
    month: 'short',
    day: '2-digit' }).format(date)

  return (
    <h3 className="formatted-date">{formattedDate}</h3>
  )
}

export const query = graphql`
query {
  prismic {
    allPages(uid: "test-page") {
      edges {
        node {
          publication_date
        }
      }
    }
  }
}
`

export default Page