Date Picker

Overview

The date picker field creates a jquery date selection popup. This field is useful for setting dates to use in your theme. eg. An event’s start and end date.

Please note that previous versions of ACF contained a setting called ‘Save Format’. This setting allowed the developer to change the format saved in the DB. Although useful, this setting created many issues and has been removed in favor of a set format of ‘YYYYMMDD’.

Screenshots

Settings

Name Description
Display Format The date format that is displayed when selecting a date
Return format The date format that is returned when loading the value. Please note that the value is always saved as YYYYMMDD in the DB.
Week Starts On Specify a day to start the week on

Template usage

The date picker field will return a string containing your date value in the format provided in the field’s settings. Please note the following examples assume a field exists called ‘date’.

Basic

This example shows how to display a date value.

<p>Event Date: <?php the_field('date'); ?></p>

Advanced

This example shows how to get the raw value (saved in format YYYYMMDD) and convert it to a numeric value to then modify it further.

<?php 

// get raw date
$date = get_field('date', false, false);


// make date object
$date = new DateTime($date);

?>
<p>Event start date: <?php echo $date->format('j M Y'); ?></p>
<?php 

// increase by 1 day
$date->modify('+1 day');
	
?>
<p>Event end date: <?php echo $date->format('j M Y'); ?></p>

Translations

If you require the date to be displayed in a non English language, WordPress contains a function called date_i18n() which will perform the translation for you.

<?php

$dateformatstring = "l d F, Y";
$unixtimestamp = strtotime(get_field('date_picker'));

echo date_i18n($dateformatstring, $unixtimestamp);

?>

Order posts

This example shows how you can sort and order a WP posts query by a custom field.

<?php 

// get posts
$posts = get_posts(array(
	'post_type'	=> 'event',
	'meta_key'	=> 'date',
	'orderby'	=> 'meta_value_num',
	'order'		=> 'ASC'
));


// loop
if( $posts ) {
	
	foreach( $posts as $post ) {
		
		setup_postdata( $post );

		// do something

	}

	wp_reset_postdata();
	
}

?>

Query posts based on date

This example shows how you can use the WP_Query object to find posts where a ‘start_date’ and ‘end_date’ indicate that the post is ‘active’ (today is between the start and end dates).

<?php 

$today = date('Ymd');

$args = array (
    'post_type' => 'post',
    'meta_query' => array(
		array(
	        'key'		=> 'start_date',
	        'compare'	=> '>=',
	        'value'		=> $today,
	    ),
	     array(
	        'key'		=> 'end_date',
	        'compare'	=> '<=',
	        'value'		=> $today,
	    )
    ),
);

// get posts
$posts = get_posts($args);
?>