Date Field - Vextro Docs

The date field renders a date picker in the admin UI and stores the selected value as an ISO 8601 date string (e.g., "2026-02-15"). Use this field when you need a calendar date without a time component, such as a birth date, event date, or deadline.

The underlying Convex validator is v.string(), 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
`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
`searchable`	`boolean`	`false`	Include in full-text search indexing

Example usage

import { f, defineVextroCollection } from "vextro";

export const events = defineVextroCollection({
  slug: "events",
  label: "Events",
  collectionType: "content",
  tableName: "events",
  fields: {
    title: f.text({ required: true }),
    eventDate: f.date({ required: true, label: "Event Date" }),
    registrationDeadline: f.date({
      label: "Registration Deadline",
      description: "Last day to register for this event",
      listColumn: true,
      listColumnWidth: "small",
    }),
    birthDate: f.date({ placeholder: "YYYY-MM-DD" }),
  },
});

Admin options

The date field renders a native date picker input in the admin UI. The stored value is always an ISO date string (YYYY-MM-DD). When readOnly is true, the picker is disabled and the date is displayed as static text.

Use listColumn: true with listColumnWidth: "small" for compact date display in collection list views.

Conditional display

Show a date field only when a specific condition is met:

endDate: f.date({
  label: "End Date",
  condition: { field: "isMultiDay", equals: true },
})

When a condition is applied, the field is always optional in the Convex schema regardless of the required setting. The required validation only applies when the field is visible.