Documentation

Date Picker

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

Creating a date picker field

The date picker field contains options to customize your field:

• Save Format: A string based representation of the date format. This will be the format in which your date is saved to the database and returned by the API. If you intend to use this field to order your posts by, please leave the format as yymmdd. Also note that the JS number format string is slightly different from a PHP version.
• Display Format: A string based representation of the date format. This will be the format in which your date is displayed to the user. This format does not effect the database value. Also note that the JS number format string is slightly different from a PHP version.

Edit screen

Template usage

The API will return a string containing the date in the format provided earlier.
Tip: You can use the php date / dateTime function for more control over the returned value.

If you plan to output your date in a different format, please note that the JS date format (entered in the field options screen) is different to the PHP date format.

• JS Date Format – http://docs.jquery.com/UI/Datepicker/formatDate
• PHP Date Format – http://www.php.net/manual/en/function.date.php

Source code

<?php
 
/*
*  Displaying single value
*/
 
?>
<p>Posted on: <?php the_field('date_picker'); ?></p>
 
<?php
 
/*
*  Create PHP DateTime object from Date Piker Value
*  this example expects the value to be saved in the format: yymmdd (JS) = Ymd (PHP)
*/
 
$date = DateTime::createFromFormat('Ymd', get_field('date_picker'));
echo $date->format('d-m-Y');
 
/*
*  Order Posts based on Date Picker value
*  this example expects the value to be saved in the format: yymmdd (JS) = Ymd (PHP)
*/
 
$posts = get_posts(array(
	'meta_key' => 'custom_order', // name of custom field
	'orderby' => 'meta_value_num',
	'order' => 'ASC'
));
 
if( $posts )
{
	foreach( $posts as $post )
	{
		setup_postdata( $post );
 
		// ...
 
	}
 
	wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly
}
 
/*
*  Format examples
*/
 
$js = "yymmdd"
$php = "Ymd"
 
$js = "dd/mm/yy"
$php = "d/m/Y"
 
$js = "yy_mm_dd"
$php = "Y_m_d"
 
?>