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 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
<?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"
?>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);
?>Format value ( PHP < 5.3)
If your server is running a PHP version prior to 5.3, it is most likely that you will not have access to the DateTime class and functions. As a work around, you can use the strtotime and date functions to format the value
<?php
$date = get_field('date');
// $date = 19881123 (23/11/1988)
// extract Y,M,D
$y = substr($date, 0, 4);
$m = substr($date, 4, 2);
$d = substr($date, 6, 2);
// create UNIX
$time = strtotime("{$d}-{$m}-{$y}");
// format date (23/11/1988)
echo date('d/m/Y', $time);
// format date (November 11th 1988)
echo date('F dS Y', $time);
?>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,
)
),
);
?>
