---
title: "Time Picker Field - Advanced Custom Fields"
description: "Select a time with ease via a user-friendly and fancy time picker. Perfect for scheduling appointments, meetings and more!"
url: "https://www.tassos.gr/docs/advanced-custom-fields/fields/timepicker"
date: "2026-04-29T13:05:28+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/index.php?option=com_content&view=category&layout=blog&id=24&Itemid=1088) / [ Advanced Custom Fields ](https://www.tassos.gr/index.php?option=com_content&view=category&id=44) / [ Fields Types ](https://www.tassos.gr/index.php?option=com_content&view=category&id=64)

#  Time Picker Field

##  Select a time with ease via a user-friendly and fancy time picker. Perfect for scheduling appointments, meetings and more!

The Timepicker Custom Field gives you the ability to create a field which can display the time using PHP's Time Formats.[](#how_to_add_a_timepicker_custom_field_to_joomla_articles)

## [How to add a Timepicker Custom Field to Joomla! Articles](#how_to_add_a_timepicker_custom_field_to_joomla_articles)

The Timepicker field allows you to set the format of the date.

![acf-timepicker-field-settings](https://www.tassos.gr/images/acf-timepicker-field-settings.png)

 | Name | Description |
|---|---|
| Name | The name will be used to identify the field. Leave this blank and Joomla will fill in a default value from the title. |
| Label | The label of the field to display. |
| Description | A description of the field that will be displayed in the label tooltip. |
| Required | Is this a mandatory field? |
| Time format | Choose the time format you'd like to see on the frontend. It uses PHP's time format characters. |

For example, if you want to display the hour in a single digit notation for hours and minutes then you can use the PHP Time Format *H:i*. If you want a double digit notation then use *HH:ii* and so forth.

## [Usage](#usage)

Its usage is really simple. Once you set it up then while in the article edit screen you can click the time field and select the time through the dialog which popups up above.

![acf-timepicker-field-usage](https://www.tassos.gr/images/acf-timepicker-field-usage.png)

## [Frontend Display](#frontend)

Take a look at the screenshot below to see how it could be displayed in your frontend.

![acf-timepicker-frontend](https://www.tassos.gr/images/acf-timepicker-frontend.png)

## [Frequently Asked Questions](#faq)

### [How can I override the layout of "ACF - Timepicker" custom field?](#how-can-i-override-the-layout-of-acf-timepicker-custom-field)

To override the "ACF - Timepicker" custom field, read here: [How to override the "ACF - Timepicker" custom field](https://www.tassos.gr/joomla-extensions/advanced-custom-fields/docs/how-to-create-an-alternative-layout-for-joomla-custom-fields#override_render_layout).

 Last updated on Mar 4th 2025 10:03

## Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.tassos.gr"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "Home",
            "item": "https://www.tassos.gr/docs"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "Advanced Custom Fields",
            "item": "https://www.tassos.gr/docs/advanced-custom-fields"
        },
        {
            "@type": "ListItem",
            "position": 4,
            "name": "Fields Types",
            "item": "https://www.tassos.gr/docs/advanced-custom-fields/fields"
        },
        {
            "@type": "ListItem",
            "position": 5,
            "name": "Timepicker Field",
            "item": "https://www.tassos.gr/docs/advanced-custom-fields/fields/timepicker"
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.tassos.gr/docs/advanced-custom-fields/fields/timepicker"
    },
    "headline": "Timepicker Field",
    "image": {
        "@type": "ImageObject",
        "url": "https://www.tassos.gr/"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Tassos",
        "logo": {
            "@type": "ImageObject",
            "url": "https://www.tassos.gr/https://www.tassos.gr/media/brand/logo-text.png"
        }
    },
    "author": {
        "@type": "Person",
        "name": "Sotiris Katsaniotis",
        "url": "https://www.tassos.gr/docs/advanced-custom-fields/fields/timepicker"
    },
    "datePublished": "2017-10-07T14:17:47+03:00",
    "dateCreated": "2017-10-07T14:17:47+03:00",
    "dateModified": "2025-03-04T10:29:44+02:00"
}
```

```json
{
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
        {
            "@type": "Question",
            "name": "How can I override the layout of "ACF - Timepicker" custom field?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "To override the "ACF - Timepicker" custom field, read here: How to override the "ACF - Timepicker" custom field."
            }
        }
    ]
}
```