---
title: "Date"
description: "This article explains what the date field is and how to configure it."
meta_title: "Date"
category: "fields"
audience: developers
lastUpdated: "2026-04-23T01:17:46.000Z"
---

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 <Code>{new Date().toLocaleDateString("en-CA")}</Code>.

Date field values can be formatted and displayed like any JavaScript date using the `asDate()` helper from `@prismicio/client`.

**Next.js example:**

```tsx
import { asDate } from "@prismicio/client";

const date = asDate(slice.primary.release_date);

<span>{date?.toLocaleDateString("en-US")}</span>;
```

**Nuxt example:**

```vue-html
<span>{{ $prismic.asDate(slice.primary.release_date)?.toLocaleDateString("en-US") }}</span>
```

**SvelteKit example:**

```svelte
<script lang="ts">
  import { asDate } from "@prismicio/client";
</script>

<span>{asDate(slice.primary.release_date)?.toLocaleDateString("en-US")}</span>
```

> Unlike the [timestamp](https://prismic.io/docs/fields/timestamp.md) field, the date field does not include a time.

# Add a date field to a content model

Date fields are added using the [Type Builder](https://prismic.io/docs/type-builder.md), a tool for building by hand, or the [Prismic CLI](https://prismic.io/docs/cli.md), a tool for AI agents.

* **Type Builder:**

  > **Important**
  >
  > Type Builder is rolling out to new users. If you do not have access, use **Slice Machine**.

  1. **Watch for changes**

     In your local website project, start the Prismic CLI's `sync` command. The CLI will watch for changes in the Type Builder and pull them into your project.

     ```sh
     npx prismic sync --watch
     ```

     > **Tip**: You can pull Type Builder changes at any time using `npx prismic
     >   sync`.

  2. **Add a date field**

     In the Type Builder, navigate to the slice, page type, or custom type you want to modify. Add a **date** field and provide the following:

     * **Label**: The label shown to content writers in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). Use an easily understandable name.
     * **API ID**: The property name in the Content API. Use a short, snake-cased name.

     You can now close the Prismic CLI `sync` command or add your next field.

* **Prismic CLI:**

  > Your AI agent can perform these steps for you. See [Prismic with AI](https://prismic.io/docs/ai.md) for details.

  1. **Add a date field**

     Use the `prismic field add date` command to add a date field to a slice.

     ```sh
     npx prismic field add date release_date --to-slice MySlice
     ```

     Use `--to-type` to add the field to a page type or custom type instead.

     ```sh
     npx prismic field add date release_date --to-type page
     ```

* **Slice Machine:**

  1. **Open Slice Machine**

     In your Prismic project, start Slice Machine to begin editing content models.

     ```sh
     npx start-slicemachine --open
     ```

  2. **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](https://prismic.io/docs/guides/page-builder.md). Use an easily understandable 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`.

**Next.js example:**

```tsx
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>;
}
```

**Nuxt example:**

```vue
<script setup lang="ts">
const { asDate } = usePrismic();

const date = computed(() => asDate(slice.primary.release_date));
</script>

<template>
  <span>{{ date?.toLocaleDateString("en-US") }}</span>
</template>
```

**SvelteKit example:**

```svelte
<script lang="ts">
  import { asDate } from "@prismicio/client";
  import type { SliceComponentProps } from "@prismicio/svelte";

  let { slice }: SliceComponentProps = $props();

  let date = $derived(asDate(slice.primary.release_date));
</script>

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

```ts
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`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#isfilled)

# API response

Here is what a date field looks like from the Content API:

```json
{
  "example_date": "2030-01-31"
}
```