Templating the Date field

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

Default Format

Here's an example of how to access a Date value using the PrismicDOM.date object.

Copy
var PrismicDOM = require('prismic-dom');

var date = PrismicDOM.Date(document.data.postDate);

Custom Format

By saving the Date value as a Date object, you can format it using the built-in locale format function.

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

const formattedDate = new Intl.DateTimeFormat('en-US',{
  year: "numeric",
  month: "short",
  day: "2-digit"
}).format(date);
// Outputs the date in Mon dd, YYYY format

You can also use library such as date-fns-tz to format a date.

Copy
const PrismicDOM = require('prismic-dom');
const DateFnsTZ = require('date-fns-tz');

const date = PrismicDOM.Date(document.data.postDate);
const formattedDate = DateFnsTZ.format(date,'MMMM dd, yyyy');
// Outputs as "February 17, 2017"

Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.