How to Create a Custom Date Format for Better Theming in Drupal Views

May 12 2010

 Create a Custom Date Format for Better Theming in Drupal Views

In a past post, we covered "How to Customize and Theme Post and Date info in Drupal". That works well for node theming but we were also recently called upon by a client to do this for a view, specifically for an events page that displayed event dates themed the very same way in a nice square block. When the view was created, there seemed to be no way to break apart month, day and year in separate span tags in order to have all the goodness to custom theme a date block in Drupal.

Finally we came across a post on Drupal.org that ultimately led us to do what we wanted. Here are the steps to do this:

  1. Go to "admin/settings/date-time/formats"
  2. In configure go to the bottom of the page and add a new Date format, we used: "Date elements in DIV's"
  3. Click "save configuration"
  4. Go to "add format"
  5. In the "Format string:" box add the following code:

  1. <\d\iv \c\l\a\s\s="\m">M</\d\iv><\d\iv \c\l\a\s\s="\d">d</\d\iv><\d\iv \c\l\a\s\s="\y">Y</\d\iv>

be sure to look for the drop down menu that says Date elements in DIV'sYou now have this date format available system wide in Drupal that will give you a themable date format. Once you choose this format in Views, you can then theme month, day and year as you please with a background or whatever you like. Note that when you choose your date field in your view, be sure to look for the drop down menu that says "Date elements in DIV's"

The only caveat with this is that if you choose to use this format in nodes, you can't use the pop up date picker, rather you will need to use drop downs but the end result is the same.


Holla

Just a big thank you from me to you :) I've used your technique on three separate sites and it's a lot quicker than getting into Views template files. Thanks!

Thank You!

I'm possibly in love with you for posting this. I'm just getting into Drupal, and this is exactly what I needed to make one of my designers happy!

Jennifer, glad to hear this

Jennifer, glad to hear this was helpful!

Great method ... some technical difficulties ...

I really like this method of building these minical date formatters. However, I am currently building a site in D7 and having some trouble when using the formatter in views.

I have a date field which allows for from and to dates. I only want to display the from date here, but this is what I am getting in the output:

  1. <span class="date-display-single">
  2. <div class="m">May</div>
  3. <div class="d">03</div>
  4. <div class="y">2011</div>
  5. <div class="m"></div>
  6. <div class="d"></div>
  7. <div class="y"></div>
  8. </span>

Notice the second set of empty divs. Display is set to From Date only. I am wondering if you know why this happens, or how it can be fixed ...?

Thanks

Michael- Yes, that is a known

Michael- Yes, that is a known issue with this method. I am sure there is a fix, theoretically you could create one format for a single date and another for a from and too, I think that would fix it.

Have a look at this issue as well: http://drupal.org/node/423870#comment-2573580

Thanks! :)

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
X
N
T
m
R
t
S
6
Enter the code without spaces.
To prevent automated spam submissions leave this field empty.