Tutorial: Making the Flutter Date Field work for you

Dale Crum |Doc4|July, 21, 2009

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

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.

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 retreiving the date in localized format can be read at the following WordPress Codex page (thank you to Monika for pointing this out).

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

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.

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.

Line 8:

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

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.

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.

Line 11:

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

Line 12:

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

Line 13:

Lastly end the function.

12 Comments, Questions & Answers

  1. Kay Commented On

    I think I have the same question as Peter. Basically I have posts that I want to order by a Flutter date field, similar to how it's done automatically in WordPress. But the publish date (which is what WordPress uses to sort) would be too confusing for our users to edit. I'm guessing this would involve setting the post_where filter before the loop?

    • Kay,

      I haven't fully verified this code but give it a try. I assume you will need to target a specific category for the reordering. This is making the assumption your meta_key is named "date".

      <?php if ( is_category ('10') ) { $posts = query_posts($query_string. '&orderby=meta_value&meta_key=date&order=DESC&showposts=50' ); } ?>

  2. cakra Commented On

    Do you have any idea to add "time" (start time-end time of event) with flutter and how they work together with date ? For example : sort a same date but have a different time event.

    • Doc4 Commented On


      I'm sure this is possible to arrange the events by date then again by start-time, it seems the easiest way to achieve the time sorting would be by using WordPress' post time stamp.

  3. How is it possible to sort the loop so that the first date will show on top of the loop (that is, sort the loop after the event dates, not after the post dates)?

    • Doc4 Commented On


      Can you clarify this a little? Are you wanting the date outside of the loop or even just wanting to use a single date? Just to clarify, with the Flutter Date it is not functional outside of the loop.

  4. Nick Soper Commented On

    Works a charm. I didn't realise you could simply , I was using the get_post_meta each time. Thanks for the tip(s)

  5. ale | fatbombers Commented On

    do you think it's possible to sort wp posts, based on a flutter custom field?

    • ale | fatbombers,

      How are you wanting to sort the posts, there may be a more effective way of doing this than using Flutter Custom Fields.

  6. Monika Commented On

    I figures it out :-)

    I had to select the *similar* date format for the date picker

    i.e 24-Dec-09
    after this I can use your example *custom field 1* but with this date function
    date_i18n('d. F Y ', $  Start)

    and ..voila I have: 24. Dezember 2009

    My error in reasoning was : date_i18n can't create a new date format -it *translate* the UNIX timestamp-and if this is false … no correct date is shown..

    I hope you can follow my solution and translate it into correct english 😉 Thanks a lot for your code above it was the "Priming" for my solution


  7. Monika Commented On

    Hi I try to convert the timestamp into German date format, but I can do whatever I would like it is in english :(
    setlocale ..nothing date is 01. January 2007 instead of 15.März 2009 (15.March 2009)

    do you have any ideas for me ?
    thanks a lot

  1. Mystery Meat » Displaying Posts with a custom event date using Flutter
  2. wp-popular.com » Blog Archive » Tutorial: Making the Flutter Date Field work for you | Doc4 Advertising Agency