Date & Time Field - Vextro Docs

The datetime field renders a combined date and time picker in the admin UI and stores the selected value as a Unix timestamp in milliseconds (a number). This is the correct field for timestamps like publish dates, event start times, or any value that includes both date and time.

The underlying Convex validator is v.number(), wrapped in v.optional() unless marked as required.

Config options

Option	Type	Default	Description
`required`	`boolean`	`false`	Makes the field required in the schema and admin UI
`readOnly`	`boolean`	`false`	Renders the field as non-editable
`placeholder`	`string`		Placeholder text shown when the field is empty
`label`	`string \| function`	Field name	Custom label for the admin UI
`description`	`string`		Help text displayed below the field label
`locale`	`string`	`"en-US"`	BCP 47 locale for display formatting
`hourCycle`	`12 \| 24`	Derived from locale	12-hour or 24-hour clock display
`condition`	`FieldCondition`		Condition for showing or hiding this field
`sidebar`	`boolean`	`false`	Place this field in the document sidebar
`sidebarSection`	`string`		Group under a named sidebar section
`listColumn`	`boolean`	`false`	Show as a default column in list views
`listColumnWidth`	`"auto" \| "small" \| "medium" \| "large"`		Column width preset for list views

Example usage

import { f, defineVextroCollection } from "vextro";

export const articles = defineVextroCollection({
  slug: "articles",
  label: "Articles",
  collectionType: "content",
  tableName: "articles",
  fields: {
    title: f.text({ required: true }),
    publishedAt: f.datetime({
      label: "Publish Date",
      sidebar: true,
      sidebarSection: "scheduling",
      listColumn: true,
      listColumnWidth: "medium",
    }),
    updatedAt: f.datetime({ readOnly: true, label: "Last Updated" }),
    eventStart: f.datetime({
      required: true,
      hourCycle: 24,
      locale: "de-DE",
      description: "Event start time in 24-hour format",
    }),
  },
});

Admin options

The locale option controls how the date and time are formatted in the admin UI. When set to a locale like "de-DE", dates display in the German format. The hourCycle option overrides the locale default to force either a 12-hour or 24-hour clock.

When readOnly is true, the field displays the formatted timestamp as static text. This is useful for system-managed fields like updatedAt or createdAt.

Conditional display

Show a datetime field based on another field's value:

scheduledPublishAt: f.datetime({
  label: "Scheduled Publish Time",
  condition: { field: "status", equals: "scheduled" },
  sidebar: true,
  sidebarSection: "scheduling",
})