DateTime Field Type

Renders Gutenberg’s DateTimePicker component inside the block.

The type we would use inside the schema’s field_meta property to render this field is “datetime”: "type": "datetime"

If you haven’t already, we suggest you read the “model.json file” and “Field Types” pages before continuing.

Minimum Schema needed to create the field

"event_date_and_time": {
  "type": "object",
  "field_meta": {
    "type": "datetime",
    "label": "Event Date and Time",
  "default": {
    "value": null

This snippet of code will generate a simple DateTime control. The field name will be “event_date_time”, its label will be “Event Date and Time” and it will have a value of null (no date and time selected) by default.

What it would look like inside the block in the editor.

Gutenberg DateTimePicker component theme-redone screenshot

Rendering field’s data on the front-end:

We would use the same property that’s present inside the “default” object; "value", in this case.
In latte, it would look something like this.

<div n:ifcontent>{$event_date_time['value']|date:'j. n. Y'}</div>

Note that we need to use latte’s |date filter to properly format the datetime.

To learn more about the formatting options that you can use, check the DateTime::format page from the official PHP documentation.

Additional / Optional field_meta properties

Besides the field_meta properties we saw above, DateTime Field Type has only two optional properties that all root level Field Types can have.

  1. help – written about on the Field Types page
  2. col – written about on the model.json page
Join Our Newsletter

To get updates about Theme Redone