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