Date
This article explains what the date field is and how to configure it.
A date field in the Page Builder.
The date field allows content writers to select a date that represents a calendar day.
The date is saved in YYYY-MM-DD
format, like 2025-10-08
.
Date field values can be formatted and displayed like any JavaScript date using the asDate()
helper from @prismicio/client
.
import { asDate } from "@prismicio/client";
const date = asDate(slice.primary.release_date);
<span>{date?.toLocaleDateString("en-US")}</span>;
Add a date field to a content model
Open Slice Machine
In your Prismic project, start Slice Machine to begin editing content models.
npx start-slicemachine --open
Add a date field
In Slice Machine, navigate to the slice, page type, or custom type you want to modify. Add a date field.
The label determines the label shown to content writers in the Page Builder. Use an easily understood name.
The API ID determines the property name in the Content API. Use a short, snake-cased name.
Use date fields
Date fields can be used anywhere a date is needed. It is often helpful to first convert the date to a JavaScript Date
object using asDate
from @prismicio/client
.
import { asDate } from "@prismicio/client";
import type { SliceComponentProps } from "@prismicio/react";
function Slice({ slice }: SliceComponentProps) {
const date = asDate(slice.primary.release_date);
return <span>{date?.toLocaleDateString("en-US")}</span>;
}
Check if a date field has a value
Use isFilled.date()
to check if a date field has a value before using it.
import { isFilled } from "@prismicio/client";
if (isFilled.date(slice.primary.my_date_field)) {
// Do something if `my_date_field` has a value.
}
Learn more about isFilled
API response
Here is what a date field looks like from the Content API:
{
"example_date": "2030-01-31"
}