Time Picker

Documentation Field Types Time Picker

Last updated Mar 7, 2022

Description

The Time Picker field creates a jQuery time selection popup.

Screenshots

Changelog

• Added in version 5.3.9.

Settings

• 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)

<?php

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

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

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

if( $posts ): ?>

    <h2>Stores open now</h2>
    <ul id="events">
        <?php foreach( $posts as $p ): ?>
            <li>
                <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 ); ?>
            </li>   
        <?php endforeach; ?>
    </ul>

<?php endif; ?>

Notes

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.