Tina Docs
Introduction
Core Concepts
Querying Content
Editing
Customizing Tina
Going To Production
Drafts
Guides
Further Reference

type DatetimeField = {
label: string
name: string
type: 'string'
/** See https://tina.io/docs/extending-tina/overview/ for customizing the UI **/
ui?: {
dateFormat: string // eg 'YYYY MM DD'
label?: string
description?: string
component?: FC<any> | string | null
parse?: (value: string, name: string, field: F) => any
format?: (value: string, name: string, field: F) => any
validate?(
value: string,
allValues: any,
meta: any,
field: UIField<F, Shape>
): string | undefined | void
}
}

The return value for a datetime is in ISO string format

Examples

Tina will generate the appropriate component depending on the configuration provided.

Simple

{
type: 'datetime',
name: 'date',
label: 'Date'
}

Custom Format

You can customize the format that the date field use by customizing the dateFormat & parse properties.

{
label: "Date",
name: "date",
type: "datetime",
ui: {
dateFormat: 'YY-MM-DD',
parse: (value) => value && value.format('YY-MM-DD'),
},
}

Using a Time Picker

You can add a timepicker to the date UI by supplying the ui.timeFormat property

{
label: "Date",
name: "date",
type: "datetime",
ui: {
timeFormat: "HH:mm"
},
}

Last Edited: July 27, 2021