The goal of this tutorial is to demonstrate the comparison between two WordPress Flutter Date Fields, display them and if only one date is necessary, show only the first date. This method is currently being used by Grand Idea Studio on the Events page. The issue was that some events were several days in length while others lasted only a single day. Not wanting to put the client through the process of manually entering individual dates for each event we determined the Flutter Date Field was the perfect solution and with a little PHP we were able to make exceptions to event lengths.

To start the tutorial we need to cover the basic concept of echoing the date from the Date Field. Start by creating a Custom Write Panel group within a Custom Write Panel Page or Post and name it “Event Dates". We are using the group because we will be adding a second Custom Field later. Next, create a Custom Field within the group and Name it “start_date" with a Label of “Start". Select “Date" from the radio buttons and then choose your date formatting. Start your new Custom Panel Post or Page and within the WordPress Loop insert the following code to display the date.

Create a Custom Write Panel Group

Custom Group: Name: Event Dates
Custom Field 1: Name: start_date Label: Start

<?php echo get(‘start_date’); ?>

If we only needed to display the day of the month or wanted access to a display format not provided by Flutter, then we need to alter the function.

<?php $MyVariableName = get(‘start_date’);
$timestamp = strtotime($MyVariableName);
echo date(‘j/M’, $timestamp);
?>

Above we are displaying the day of the month indicated by the use of a lowercase “j" and the full month name indicated by the use of the uppercase “M". If you are unfamiliar with PHP date parameters there is a great list at php.net. Any number of separators are allowed between the day, month and year. In our example above, we are using a backslash “/". It could just as easily be periods “j.M.Y". Don’t be afraid to experiment with different parameters and separators.

Localization is accomplished by adding the reference/date function i18n. More about retrieving the date in localized format can be read at the following WordPress Codex page (thank you to Monika for pointing this out).

<?php $MyVariableName = get(‘start_date’);
$timestamp = strtotime($MyVariableName);
echo date_i18n(‘j/M’, $timestamp);
?>

In order to make a comparison, we need to add a second Custom Field. Create a second Custom Field within the “Event Dates" group and Name it “end_date" with a Label of “End". Select “Date" from the radio buttons and then choose your date formatting. Revisit your post or page and delete the functions from above. We are starting fresh from this point. Insert the following code within the WordPress Loop.

Custom Field 2: Name: end_date Label: End

<?php
$FirstDate = get(‘start_date’);
$SecondDate = get(‘end_date’);

$End = strtotime($SecondDate);
$Start = strtotime($FirstDate); 

if ($End <= $Start) {
echo “some text here";
} else {
echo “- “;
echo get(‘end_date’);
} ?>

Line 2-3:

We need to start the function by assigning variables to both the start and end dates. Above we have selected the variable name $FirstDate and $SecondDate and set it equal to the information provided by us in the Start and End Custom Fields.

$FirstDate = get(‘start_date’);
$SecondDate = get(‘end_date’);

Line 5-6:

Next, we rename those variables as $End and $Start because we want to set these to the strtotime() function which parses an English textual date or time into a Unix timestamp. Not really something we need to worry about, just know that it needs to happen.

$End = strtotime($SecondDate);
$Start = strtotime($FirstDate); 

Line 8:

The function begins by checking the End Date and whether or not it is equal to the Start Date.

if ($End <= $Start) {

Line 9:

If the End Date is in the past when compared to the Start Date, then echo “some text here". In the case of Grand Idea Studio, we simply left this blank to reflect a single day event.

echo “some text here";

Line 10:

Here we are telling the function that if the End Date is in the future when compared to the Start Date, something else should occur.

} else {

Line 11:

We then add a dash and a space to display between the two dates.

echo “- “;

Line 12:

And then process the information from the End Date field and echo it after the dash from Line 11.

echo get(‘end_date’);

Line 13:

Lastly end the function.

} ?>