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>