Skip to content

Kirby 5.0.4

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');