Date Time Picker

Overview

The date time picker field creates a jQuery date & time selection popup. This field is useful for setting specific date & times to use in your theme. eg. An event’s start and end date & time.

The value selected can be returned and displayed in different formats but will always be saved to the DB as ‘Y-m-d H:i:s’. This format is used throughout the WP database tables and will allow for easy database querying.

Changelog

  • Added in version 5.3.9

Screenshots

Settings

Name Description
Display Format The date format that is displayed when selecting a date. For a full list of date format strings, please see the PHP date() documentation
Return format The date format that is returned when loading the value. For a full list of date format strings, please see the PHP date() documentation
Week Starts On Specify a day to start the week on

Template usage

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

Basic

This example shows how to display a date-time value.

<p>Event starts: <?php the_field('start_date'); ?></p>

Query posts

This example shows how to query and loop over events ordered by a date time custom field value.

<?php

// query events order
$posts = get_posts(array(
	'posts_per_page'	=> -1,
	'post_type'			=> 'event',
	'order'				=> 'ASC',
	'orderby'			=> 'meta_value',
	'meta_key'			=> 'start_date',
	'meta_type'			=> 'DATETIME'
));

if( $posts ): ?>

	<h2>All Events</h2>
	<ul id="events">
		<?php foreach( $posts as $p ): ?>
			<li>
				<strong><?php echo $p->post_title; ?></strong>: <?php the_field('start_date', $p->ID); ?> -  <?php the_field('end_date', $p->ID); ?>
			</li>	
		<?php endforeach; ?>
	</ul>

<?php endif; ?>

Query posts (now)

This example shows how to query and loop over events which are currently running (they have started, but not yet ended) ordered by a date time custom field value.

When working with the meta_query array, remember that WP reads this as $meta $compare $value (‘start_date’ < $now) (‘end_date’ > $now).

<?php

// find date time now
$date_now = date('Y-m-d H:i:s');


// query events
$posts = get_posts(array(
	'posts_per_page'	=> -1,
	'post_type'			=> 'event',
	'meta_query' 		=> array(
		'relation' 			=> 'AND',
		array(
	        'key'			=> 'start_date',
	        'compare'		=> '<=',
	        'value'			=> $date_now,
	        'type'			=> 'DATETIME'
	    ),
	    array(
	        'key'			=> 'end_date',
	        'compare'		=> '>=',
	        'value'			=> $date_now,
	        'type'			=> 'DATETIME'
	    )
    ),
	'order'				=> 'ASC',
	'orderby'			=> 'meta_value',
	'meta_key'			=> 'start_date',
	'meta_type'			=> 'DATE'
));

if( $posts ): ?>

	<h2>Events on right now</h2>
	<ul id="events">
		<?php foreach( $posts as $p ): ?>
			<li>
				<strong><?php echo $p->post_title; ?></strong>: <?php the_field('start_date', $p->ID); ?> -  <?php the_field('end_date', $p->ID); ?>
			</li>	
		<?php endforeach; ?>
	</ul>

<?php endif; ?>

Query posts (upcoming)

This example shows how to query and loop over upcoming events (in the next 7 days) ordered by a date time custom field value.

<?php

// find date time now
$date_now = date('Y-m-d H:i:s');
$time_now = strtotime($date_now);


// find date time in 7 days
$time_next_week = strtotime('+7 day', $time_now);
$date_next_week = date('Y-m-d H:i:s', $time_next_week);


// query events
$posts = get_posts(array(
	'posts_per_page'	=> -1,
	'post_type'			=> 'event',
	'meta_query' 		=> array(
		array(
	        'key'			=> 'start_date',
	        'compare'		=> 'BETWEEN',
	        'value'			=> array( $date_now, $date_next_week ),
	        'type'			=> 'DATETIME'
	    )
    ),
	'order'				=> 'ASC',
	'orderby'			=> 'meta_value',
	'meta_key'			=> 'start_date',
	'meta_type'			=> 'DATETIME'
));

if( $posts ): ?>

	<h2>Upcoming events this week</h2>
	<ul id="events">
		<?php foreach( $posts as $p ): ?>
			<li>
				<strong><?php echo $p->post_title; ?></strong>: <?php the_field('start_date', $p->ID); ?> -  <?php the_field('end_date', $p->ID); ?>
			</li>	
		<?php endforeach; ?>
	</ul>

<?php endif; ?>

Save as unix timestamp

This example shows how to change the value saved from the standard ‘Y-m-d H:i:s’ string to a unix timestamp number (also compatible). This may be necessary to maintain compatibility with 3rd party date time picker fields.

<?php 

add_filter('acf/update_value/type=date_time_picker', 'my_update_value_date_time_picker', 10, 3);

function my_update_value_date_time_picker( $value, $post_id, $field ) {
	
	return strtotime($value);
	
}

?>

Related

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.