8

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?

3
  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!

4

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). Drupal date field
  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>
    

Drupal Rewrite Results

  • 1
    This seems like a great method for the created date, but it appears you cannot select the "Custom Format" if you are using a Date module field added to a content type? – Mark Oct 15 '14 at 3:19
  • 1
    @Mark, if you run into this issue, you can add your date formats using /admin/config/regional/date-time, then steps 1-3 you select the appropriate format from the dropdown instead of custom. – Webdrips Nov 19 '16 at 10:36
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.

1

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.

  • 2
    Thanks for answer, but your solution helps only to change class for all the field, it does not let me to create separate pieces of date. – user1513 Jun 10 '11 at 10:10
  • 1
    Then, writing a custom formatter is likely your only real option, by the time the date gets to the theme layer its completely processed, see Helper function for getting raw and rendered field data. – tim.plunkett Jun 10 '11 at 13:25
1

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

Screenshot of the settings page

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy