Time fields provide a time picker input.

You can customize the minute increment and optionally choose minimum and maximum times that should be allowed.

If you have an existing Date field that you wish to convert to a Time field, you may need to update its existing values to compensate for the fact that Date fields store their values in UTC, whereas Time field values are timezone-less.

For example, if your system timezone is set to UTC-7 (PDT), and you have a Date field value whose time is set to 10:00 AM, its actual value in the database will be 17:00 (5:00 PM), because that’s what 10:00 AM PDT is in UTC.

First visit Settings → General and check your system timezone. If it’s set to UTC, you have nothing to worry about. Go ahead and convert your field type.

Otherwise, take note of the timezone offset, then execute one of the following SQL queries, depending on the database engine you’re using:

::: code

UPDATE `content`
SET `field_myFieldHandle` = CONVERT_TZ(`field_myFieldHandle`, '+00:00', '-07:00')
WHERE `field_myFieldHandle` IS NOT NULL

UPDATE "content"
SET "field_myFieldHandle" = "field_myFieldHandle" at time zone 'UTC' at time zone '-07:00'
WHERE "field_myFieldHandle" IS NOT NULL

:::

(Replace myFieldHandle with your Date field handle, and -07:00 with your system timezone offset. You may also need to change the table name and/or column name prefix as well, depending on the field’s context and your tablePrefix DB connection setting.)

Once you’ve updated your existing field values, go ahead and convert your field type.

When querying for elements that have a Time field, you can filter the results based on the Time field data using a query param named after your field’s handle.

Possible values include:

::: code

{# Fetch entries with with a selected time before 10:00 AM #}
{% set entries = craft.entries()
  .myFieldHandle('< 10:00')
  .all() %}

// Fetch entries with with a selected time before 10:00 AM
$entries = \craft\elements\Entry::find()
    ->myFieldHandle('< 10:00')
    ->all();

:::

If you have an element with a Time field in your template, you can access its value by its handle:

::: code

{% set value = entry.myFieldHandle %}

$value = $entry->myFieldHandle;

:::

That will give you a DateTime object that represents the selected time (with the date implicitly set to today), or null if no time was selected.

If it’s set, you can output a formatted time based on its value using the time filter.

::: code

{% if entry.myFieldHandle %}
  Selected time: {{ entry.myFieldHandle|time('short') }}
{% endif %}

if ($entry->myFieldHandle) {
    $selectedTime = \Craft::$app->getFormatter()->asTime(
        $entry->myFieldHandle, 
        'short'
    );
}

:::

If you have an element form, such as an entry form, that needs to contain a Time field, you can create a time input.

{% set currentValue = entry is defined and entry.myFieldHandle
  ? entry.myFieldHandle|date('H:i')
  : '' %}

<input type="time" name="fields[myFieldHandle]" value="{{ currentValue }}">

By default, Craft will assume the date is posted in the system timezone. You can post dates in a different timezone by changing the input name to fields[myFieldHandle][time] and adding a hidden input named fields[myFieldHandle][timezone], set to a valid PHP timezone:

{# Set a specific timezone #}
{% set tz = 'America/Los_Angeles' %}

{% set currentValue = entry is defined and entry.myFieldHandle
  ? entry.myFieldHandle|date('H:i', timezone=tz)
  : '' %}

<input type="time" name="fields[myFieldHandle][time]" value="{{ currentValue }}">
{{ hiddenInput('fields[myFieldHandle][timezone]', tz) }}

Or you can let users decide which timezone the date should be posted in:

{% set currentValue = entry is defined and entry.myFieldHandle
  ? entry.myFieldHandle|date('H:i', timezone='UTC')
  : '' %}

<input type="time" name="fields[myFieldHandle][time]" value="{{ currentValue }}">

<select name="fields[myFieldHandle][timezone]">
  <option value="UTC" selected>UTC</option>
  <option value="America/Los_Angeles">Pacific Time</option>
  <!-- ... -->
</select>