Rendering the Timestamp 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 Timestamp field allows content writers to add a date and time.

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 Timestamp field

Here's an example of how to retrieve the date from a Timestamp field. The raw timestamp the API provides comes in this format YYYY-MM-DDTHH:MM:SS+0000. and using the prismic-react Date method we can create a more usable date object. In this example the API ID of the Timestamp field is event_date.

Copy
import { Date } from 'prismic-reactjs'

const dateString = Date(document.event_date)
// Outputs as "Tue Mar 24 2020 12:00:00 GMT+0100"

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
import { Date } from 'prismic-reactjs'

const timestamp = Date(document.event_date).toString()
// Outputs as "Tue Mar 24 2020 12:00:00 GMT+0100 (CET)"

Format the Timestamp

In order to get your Timestamp field into an even more customizable 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
import { Date } from 'prismic-reactjs'

const timestamp = Date(document.event_date)
const formattedDate = Moment(timestamp).format('lll')
// Outputs as "Mar 24, 2020 12:00 AM"

If you don't want to use external libraries and you require only some simple date and time formatting, you may use the built-in DateTimeFormat method instead.

Copy
import { Date } from 'prismic-reactjs'

const timestamp = Date(document.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 as "Mar 24, 2020, 12:00:00 AM"

A full example

Now let's take a look at a full page component example. Here you can see how the Timestamp field is requested in the query for a document with the UID of test-page, and rendered on the page. Again in this example the API ID of the Timestamp field is event_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 = prismicContent.node

  const timestamp = Date(document.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)

  return (
    <h3 className="formatted-timestamp">{formattedTimestamp}</h3>
  )
}

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

export default Page