95 lines
4.1 KiB
Plaintext
95 lines
4.1 KiB
Plaintext
---
|
|
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>
|