Time Picker


The Time Picker field creates a jQuery time selection popup.



  • Added in version 5.3.9.


  • Display Format
    The time format that is displayed when selecting a date.

  • Return Format
    The time format that is returned when loading the value.

Template usage

The Time Picker field returns a string value using the Return Format setting.

Display value

This example demonstrates how to display a time value.

<p>Monday: <?php the_field('monday_open_time'); ?> - <?php the_field('monday_close_time'); ?></p>

Query posts within time range

This example demonstrates how to query posts for all stores that are open.

It assumes a custom post type called ‘store’ exists with a custom field for each day’s open and close time in the following naming convention: ‘monday_open_time’, ‘monday_close_time’, ‘tuesday_open_time’, etc.

When working with the meta_query array, remember that WordPress reads this as $meta $compare $value (eg. ‘monday_open_time’ < $time)


// Find today's day of the week.
$today = date('l');
$today = strtolower( $today );

// Find current time.
$time = date('H:i:s'); 

// Query events using custom fields in meta_query.
$posts = get_posts(array(
    'posts_per_page'    => -1,
    'post_type'         => 'store',
    'meta_query'        => array(
        'relation'          => 'AND',
            'key'           => $today.'_open_time',
            'compare'       => '<=',
            'value'         => $time,
            'type'          => 'TIME'
            'key'           => $today.'_close_time',
            'compare'       => '>=',
            'value'         => $time,
            'type'          => 'TIME'

if( $posts ): ?>

    <h2>Stores open now</h2>
    <ul id="events">
        <?php foreach( $posts as $p ): ?>
                <strong><?php echo $p->post_title; ?></strong>: 
                <?php echo $today; ?> <?php the_field( $today.'_open_time', $p->ID ); ?> -  <?php the_field( $today.'_close_time', $p->ID ); ?>
        <?php endforeach; ?>

<?php endif; ?>


Database format

The value selected can be returned and displayed in different formats but will be saved to the database as ‘H:i:s’. This format is used throughout the WordPress database tables and will allow for straight-foward database querying.

Time format strings

To customize the Display Format and Return Format settings further, refer to the full list of time format strings within the PHP date() documentation.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.