Show navigationHide navigation

Datetime

Date or date-time picker using the native browser input. Use for publish dates, event schedules, deadlines, and timestamps.

Usage#

typescriptpublishedAt: { label: 'Published', format: 'datetime' },

Options#

Option	Type	Default	Description
`required`	`boolean`	`false`	Must have a valid date
`dateOnly`	`boolean`	`false`	Calendar date only (no time picker). Stored as `YYYY-MM-DD`.
`defaultNow`	`boolean`	`false`	Prefill with the current date/time when creating a new entry
`hint`	`string`	—	Helper text below the field

When optional and left empty, the value is null.

Example: Event schedule#

Schema — events with a date, start time, and optional registration deadline:

typescript// cms/octocms.config.ts
event: {
  label: 'Event',
  hasMany: true,
  fields: {
    name: { label: 'Name', format: 'string', entryTitle: true, required: true },
    date: {
      label: 'Event Date',
      format: 'datetime',
      dateOnly: true,
      required: true,
    },
    startsAt: {
      label: 'Start Time',
      format: 'datetime',
      required: true,
      hint: 'Full date and time of the event start.',
    },
    registrationDeadline: {
      label: 'Registration Deadline',
      format: 'datetime',
      hint: 'Leave empty for no deadline.',
    },
  },
},

Query + render:

tsx// src/app/events/page.tsx
import { query } from 'cms/__generated__/query';

export default async function EventsPage() {
  const now = new Date().toISOString();

  const upcoming = await query('event')
    .filter((e) => e.fields.startsAt > now)
    .sort('startsAt', 'asc')
    .toArray();

  return (
    <ul>
      {upcoming.map((e) => (
        <li key={e.sys.id}>
          <strong>{e.fields.name}</strong>
          <time>{new Date(e.fields.startsAt).toLocaleDateString('en-US', {
            weekday: 'long', year: 'numeric', month: 'long', day: 'numeric',
          })}</time>
        </li>
      ))}
    </ul>
  );
}

Storage#

Full date-time — ISO 8601 in UTC:

json{ "startsAt": "2025-06-15T14:00:00.000Z" }

Date only (dateOnly: true) — calendar date string:

json{ "date": "2025-06-15" }

Optional empty fields store null.

Query result#

Returned as an ISO 8601 string — format with new Date(), Intl.DateTimeFormat, or your preferred date library.

Date-only values (YYYY-MM-DD) are interpreted as the first minute on that calendar date in the SITE_TIMEZONE zone (defaults to America/New_York). Full date-times are absolute UTC instants.

Number

Image