Special tricks using Zenbu: decorate your date fields

With the arrival of the custom date format in Zenbu, which lets you format your entry date, expiration date, edit date and date-type custom fields using EE's date variable nomenclature (eg. %Y-%m-%d), I noticed during development that more can be done than simply playing with date variables. Similarly to decorating your custom field labels, HTML can be used to give color or generally give style to date fields.

In Zenbu, in Display settings, find the "Date format" option for columns displaying date. For example, %Y-%m-%d displays 2011-06-24 in Zenbu. Let's give it some Japanese style like this:

%Y年%n月%d日

which will display

2011年6月24日

Unfortunately, the above tends to wrap in tight result tables (eg. tables with many columns set to be displayed). Try this to avoid line wrapping:

<span style="white-space: nowrap;">%Y-%m-%d</span>

To the left is a comparison of date formatted with (right) and without (left) word wrap. Text alignment and line breaks, for example to break the year and rest of the date into two or three lines, would probably work as well.

How about some color? Try:

<span style="color: green;">%Y-%m-%d</span>

This will give green color to your text, which can be handy to differentiate entry date with expiration date, for example. Depending on your control panel's theme, bold, italicized, underline, etc text should also work well.

Images could be used as a visual cue as well:

<img src="/img/icons/calendar-exclamation-mark.png" /> %Y-%m-%d

This trick might come in handy to visually distinguish entries with or without expiration dates, for example. Feel free to experiment with different ways to display date and time, and if you happen to have an interesting use of custom date display, feel free to let me know. Hope you enjoy this extra little feature in the most flexible addon for entry data for EE2!

---

Share

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Comments

---

Please leave a comment

Name:
Email:
URL:
Your comment:
Remember my personal information
Notify me of follow-up comments?

Please enter the word you see in the image below:

Send