Time
A time picker field
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
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:
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.
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
.
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
.
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:
<?= $page->time() ?>
Render time in 24 hour format
<?= $page->time()->toDate('H:i') ?>
With timezone identifier:
<?= $page->time()->toDate('H:i e') ?>
Render the time in 12 hour format with am/pm:
<?= $page->time()->toDate('g:i a');