Time Picker

Overview

The time picker field creates a jQuery time selection popup. This field is useful for setting specific times to use in your theme. eg. A store’s open and close times.

The value selected can be returned and displayed in different formats but will always be saved to the database as ‘H:i:s’. This format matches the time part of any datetime value.

Changelog

  • Added in version 5.3.9

Screenshots

Settings

Name Description
Display Format The time format that is displayed when selecting a time. For a full list of time format strings, please see the PHP date() documentation
Return format The time format that is returned when loading the value. For a full list of time format strings, please see the PHP date() documentation

Template usage

The time picker field will return a string value in the format provided in the field’s settings.

Basic

This example shows how to display a time value.

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

Advanced

This example shows how to query posts for all stores that are open. This example assumes a post type called ‘store’ exists with a 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 WP reads this as $meta $compare $value (‘monday_open_time’ < $time) (‘monday_close_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 events
$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; ?>
<h2>Stores open now</h2>
<ul id="events">
	<li>
		<strong>Store 1</strong>:
		monday 9:00 am - 5:30 pm
	</li>
	<li>
		<strong>Store 2</strong>:
		monday 10:00 am - 6:00 pm
	</li>
</ul>

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.