Skip to content

Kirby 5.1.1

    Search by Algolia

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