# Time A time picker field **** - Read more: - Source: **** The time field is perfect for events or any other kind of time-based field content. It creates a select box with all available times of the date defined by certain interval.
## Example ```yaml fields: time: label: Time type: time ``` ## Field properties
Name Type Default Description
after mixed null Optional text that will be shown after the input
autofocus bool null Sets the focus on this field when the form loads. Only the first field with this label gets
before mixed null Optional text that will be shown before the input
default mixed null Sets the default time when a new page/file/user is created
disabled bool null If true, the field is no longer editable and will not be saved
display mixed null Custom format (dayjs tokens: HH, hh, mm, ss, a) that is used to display the field in the Panel
format string null Defines a custom format that is used when the field is saved
help mixed null Optional help text below the field
icon string 'clock' Changes the clock icon
label mixed null The field label can be set as string or associative array with translations
max string null Latest time, which can be selected/saved (H:i or H:i:s)
min string null Earliest time, which can be selected/saved (H:i or H:i:s)
notation int 24 12 or 24 hour notation. If 12, an AM/PM selector will be shown. If display is defined, that option will take priority.
required bool null If true, the field has to be filled in correctly to be saved.
step mixed null Round to the nearest: sub-options for unit (minute) and size (5)
translate bool true If false, the field will be disabled in non-default languages and cannot be translated. This is only relevant in multi-language setups.
when mixed null Conditions when the field will be shown (since 3.1.0)
width string '1/1' The width of the field in the field grid, e.g. 1/1, 1/2, 1/3, 1/4, 2/3, 3/4
## Display format You can define the format of the time via the `display` option: ```yaml display: HH:mm display: hh:mm A display: h.m.s a ``` | Token | Output | Description | |--|--|--| | `H` | 0-23 | Hour | `HH` | 00-23 | Hour, 2-digits | `h` | 1-12 | Hour, 12-hour clock | `hh` | 01-12 | Hour, 12-hour clock, 2-digits | `m` | 0-59 | Minute | `mm` | 00-59 | Minute, 2-digits | `s` | 0-59 | Second | `ss` | 00-59 | Second, 2-digits | `A` | AM PM | | | `a` | am pm | | The field will parse any input by matching it to the display format. `display: HH:ss` will match an input of `09:35`. It will also match partials or slight variations, e.g. `09`, `9`. The base for partials will be the current time. ## Notation You can choose between the 12 hour (AM/PM) and the 24 hour format. The default is the 24 hour format. ```yaml fields: time: label: Time type: time notation: 12 ``` If you specify the `display` option, this will take priority (whether it includes `A`/`a`). ## Step The `step` option allows you to define intervals of valid values. Any input to the field gets rounded to the nearest interval step. The default is 5 minutes. Possible values for unit are `hour`, `minute` and `second`. ```yaml step: unit: minute size: 15 # only unit, size will default to `1` step: hour # only size, unit will default to `minute` step: 10 ``` ## Default value The default value can either be set to a specific time (e.g. `17:00`) – and will be matched with the closest interval option – or as `now`. ```yaml fields: time: label: Time type: time default: now ``` ## How to use in templates/snippets The field stores its value in a standardized format in the content file: `H:i:s`. To output the field value as is: ```php time() ?> ``` Render time in 24 hour format ```php time()->toDate('H:i') ?> ``` With timezone identifier: ```php time()->toDate('H:i e') ?> ``` Render the time in 12 hour format with am/pm: ```php time()->toDate('g:i a'); ```