static-cms/website/content/docs/widget-datetime.mdx

---
group: Widgets
title: DateTime
weight: 13
---

- **Name**: `datetime`
- **UI**: Datetime picker
- **Data type**: [date-fns](https://date-fns.org/) formatted datetime string

The datetime widget translates a datetime picker to a datetime string.

## Widget options

For common options, see [Common widget options](/docs/widgets#common-widget-options).

| Name        | Type                   | Default                        | Description                                                                                                                                                                                                                                                                                                              |
| ----------- | ---------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| default     | string                 | `Current Date and Time`        | _Optional_. The default value for the field. Accepts a datetime string, or an empty string to accept blank input.                                                                                                                                                                                                        |
| format      | string                 | `yyyy-MM-dd'T'HH:mm:ss.SSSXXX` | _Optional_. Sets storage format. Accepts [date-fns tokens](https://date-fns.org/v2.29.3/docs/format)                                                                                                                                                                                                                     |
| date_format | string<br />\| boolean | `true`                         | _Optional_. Sets date display format in UI.<ul><li>`string` - Accepts [date-fns tokens](https://date-fns.org/v2.29.3/docs/format)</li><li>`true` - Uses default locale format</li><li>`false` - If `time_format` is `true` or a string, then date picker is hidden</li></ul>                                             |
| time_format | string<br />\| boolean | `true`                         | _Optional_. Sets time display format in UI.<ul><li>`string` - Accepts [date-fns tokens](https://date-fns.org/v2.29.3/docs/format)</li><li>`true` - Uses default locale format</li><li>`false` - Hides the time picker</li></ul>                                                                                          |
| picker_utc  | boolean                | `false`                        | _Optional_. <ul><li>`true` - The datetime picker will display times in UTC</li><li>`false` - The datetime picker will display times in the user's local timezone</li></ul> When using date-only formats, it can be helpful to set this to `true` so users in all timezones will see the same date in the datetime picker |

## Examples

### Date Time Picker

<CodeTabs>
```yaml
name: 'datetime'
label: 'Datetime'
widget: 'datetime'
date_format: 'dd.MM.yyyy' # e.g. 24.12.2022
time_format: 'HH:mm' # e.g. 21:07
format: 'yyyy-MM-dd HH:mm' # e.g. 2022-12-24 21:07
```

```js
name: 'datetime',
label: 'Datetime',
widget: 'datetime',
date_format: 'dd.MM.yyyy', // e.g. 24.12.2022
time_format: 'HH:mm', // e.g. 21:07
format: 'yyyy-MM-dd HH:mm', // e.g. 2022-12-24 21:07
```

</CodeTabs>

### Date Picker

<CodeTabs>
```yaml
name: 'date'
label: 'Date'
widget: 'datetime'
date_format: 'dd.MM.yyyy' # e.g. 24.12.2022
time_format: false
format: 'yyyy-MM-dd' # e.g. 2022-12-24
```

```js
name: 'date',
label: 'Date',
widget: 'datetime',
date_format: 'dd.MM.yyyy', // e.g. 24.12.2022
time_format: false,
format: 'yyyy-MM-dd', // e.g. 2022-12-24
```

</CodeTabs>

### Time Picker

<CodeTabs>
```yaml
name: 'date'
label: 'Date'
widget: 'datetime'
date_format: false
time_format: 'HH:mm' # e.g. 21:07
format: 'HH:mm' # e.g. 21:07
```

```js
name: 'date',
label: 'Date',
widget: 'datetime',
date_format: false,
time_format: 'HH:mm', // e.g. 21:07
format: 'HH:mm', // e.g. 21:07
```

</CodeTabs>