how do I add extra classes to a date field at views?

Question

I am using Drupal 7. I created a view, that is using a date field. I would like to create extra classes to the date field for that specific view.

For example,

<div class="field-content">
 <span class="date">10</span>
 <span class="month">June</span>
 <span class="year">2011</span>
 <span class="time"> 8:00 </span>
</div>

Now I have a code:

<div class="field-content">
 <span class="date-display-single">10 June 2011, 8:00</span>
</div>

How can I do it step by step?

Answer 1

1. You need to install token module (latest beta version includes field tokens) and custom formatters module from http://drupal.org/project/custom_formatters.

2. Then enable it from modules page.

3. Go to admin->structure->formatters.

4. Add a new formatter, put it a name that you like.

5. Format: HTML + Tokens

6. Field type: Date

7. Formatter:

   <span class="day">[node:source:field-datefieldname:custom:j]</span>
   <span class="month">[node:source:field-datefieldname:custom:F]</span>
   <span class="year">[node:source:field-datefieldname:custom:Y]</span>
   

8. Save

Now, you have created a custom date formatter, that you may use at your view!

Answer 2

You can do this without any additional modules.

1. Add the date field. Exclude this from the display. Choose custom, and write d in the box (as in php date for the day). Change the 'Style Settings' - Customize field HMTL (set to none) and Customize field and label wrapper HTML (set to none).
2. Add the date field again. Exclude this also from the display. Choose custom, and write M in the box (as in php date for the month). Change the 'Style Settings' - Customize field HMTL (set to none) and Customize field and label wrapper HTML (set to none).
3. Add the date field again. Exclude this also from the display. Choose custom, and write Y in the box (as in php date for the year). Change the 'Style Settings' - Customize field HMTL (set to none) and Customize field and label wrapper HTML (set to none).
4. Add the date field again (LAST TIME!). DO NOT EXCLUDE THIS FROM THE DISPLAY. Choose custom, and write G:i (as in php date for the hours and minutes). Change the 'Style Settings' - Customize field HMTL (set to none) and Customize field and label wrapper HTML (set to none).

5. Rewrite the results of this final date field. Using the replacement patterns, you can then write something like this:

   <div class="date">
     <span class="day">
       [created]
     </span>
     <span class="month">
       [created_1]
     </span>
     <span class="year">
       [created_2]
     </span>
   </div>
   

Answer 3

A reasonably quick (if you can write php), but slightly hackish solution would be to override the template for that field (see Views theming basics), process the raw date value with php to take out the separate pieces and then glue them together with the HTML of your choice.

Alternatively, I think you could write a custom date field formatter (here is someone who did that for D6). That would be a nice solution in case you want to re-use the custom formatter in your nodes.

Answer 4

This is not possible using the Views UI. You would need a rather complex bit of code, and I'd be curious about your use case before encouraging you to embark on figuring that out.

If you asked how to add classes to the field as a whole, the answer would be something like this:

1. Click on the field in the Views interface.

2. Expand the "Style Settings" fieldset.

3. Check the "Customize field HTML" checkbox, then the "Create a CSS class" checkbox.

4. Enter your desired class.

Perhaps that solution will be enough. Otherwise, I wish you luck.

Answer 5

This is really easy, (once you know how)

Use a display suite custom field

Go to admin/structure/ds/fields

(In the menu: Structure -> Display Suite -> Fields)

Click add a code field

For my use case I entered the following

Label

Anything

Entities

Node

Limit field

Left blank

Field code

<div>
  <span class="mf-month">[node:created:custom:M]</span> 
  <span class="mf-day">[node:created:custom:d]</span>
</div>

Token

checked

Once you've created the field, then go to the manage display page for the content type and view mode that you're adjusting and select the new custom field.

Screenshot of the setup above