As a designer, we've had to pull a lot of design punches because we can't target dates or times separately with CSS. Ideally, we'd be able to style each field of output separately to achieve designs to match any calendar application or printed day planner out there.

For full flexibility, start and end dates would need to be inside their own div or span containers, as parents to the various date components:

start date
day of week
day
month
year
h:
m
am/pm (this could be handled as small caps, e.g.)

end date
day of week
day
month
year
h:
m
am/pm (this could be handled as small caps, e.g.)

Comments

karens’s picture

Status: Active » Closed (works as designed)

First of all, feature requests are not 'critical' (even if they are critical to you, critical on this issue queue means the software is broken without it).

Second, I have gone to great lengths to wrap every possible part of the date output in themes, there are dozens of theme functions and templates in Date and Calendar and they are there so everyone can theme things the way they like. Look in the files labeled 'theme' for some of them. There are themes for each individual part of the date, for the labels, for the titles, for the 'All day' text, for the calendar date box and each individual calendar item and the dates within each calendar item, etc etc etc.

I have discovered that it is totally impossible to come up with any theme that makes everyone happy. If I add all these divs I absolutely guarantee I will immediately get a 'critical' request to remove them (because I've already had requests to get rid of the divs that are already there).

So I've tried to take a middle of the road path and you can override everything in your theme to do something else.

fxarte’s picture

I was also needing to add extra HTML code to the datetime elements and this is what I did:

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

    <\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>

    you must be carefull with the backslashes, they keep the date engine from interpreting them as date formating strings, like the php date function would do.

  6. hit save configuration
  7. now go back to "configure" and look for the "Date format" you enter at the begining, in our case "Date elements in DIV's" and select the "Format string:" you just created. It will show with all the HTML code
  8. hit save configuration
  9. now go and set the display settings of the fields in your content types. You might need to configure your field settings also.

This method has some limitations

  • You can not edit the "Format string" once it is saved
  • The "Format string" box has a limited amount of characters, so you must be careful with your HTML code
fxarte’s picture

I was looking for the theme functions and came down to override the output of "theme_date_display_single", but everything stopped when I found out that the argument of the function: "$date", has the value already formatted, so, if I would, for instance, want this function to render something like the code bellow, it would not be possible.

<div class="time"> 
<div class="hour">h</div> 
<div class="minute">i</div> 
<div class="second">s</div> 
</div> 
<div class="date"> 
<div class="month">M</div> 
<div class="day">d</div> 
</div> 
<div class="year">Y</div> 

One solution, may be, is to include in the function argument the datetime value making $date an array for instance:
$date = array (
'formatted'=>{formatted value, what is now being passed},
'value'=>{raw value},
)

Simsalabim’s picture

I tried the same as fxarte in the comment above. This works well, but has one bug: If you just post a single date (just a start date), for example for concerts, the classes will also appear for the empty end date.
In my HTML-Site the code looks like this:

  <span class="date-display-single">
    <div class="m">Aug</div>
    <div class="d">19</div>
    <div class="y">2010</div> 
    <div class="m"></div>
    <div class="d"></div>
    <div class="y"></div>
</span>

When I now style these CSS-classes, the styles also apply for the empty div-containers. That´s not good.
Has anyone an idea how I could get rid of the empty containers?
Thanks in advance.

danny englander’s picture

This worked great, thanks!

rbrownell’s picture

I strongly disagree with the dismissial of this issue. In fact just reading it offended me. I understand that there is a lot of hard work that goes into this module, but it is important to remember that not everything can/should be themed.

Example? I was trying build a simple shopping cart form with this and other modules, and kept running into problems because CSS styling would end up in inside the value fields and corrupt the HTML.

I had a hard time finding this solution, but once I found it it was as clear as day.

Select "Strip HTML tags" in the options for the field in the view. It worked for me. Hopefully someone can benefit from my 3 hours of searching for this solution.

karens’s picture

I have devoted thousands of hours of (free) work to this module over the last three years and made thousands of commits to this module. I think that gives me the right to say something is not critical without being called arrogant.

Bevan’s picture

woprrr’s picture

Issue summary: View changes

I thinks this solution is good for override render specific format date :

/**
 * Override theme_date_display_single().
 *
 * @param $variables
 *   An array of variables to pass to the theme template.
 */
function theme_date_display_single($variables) {
  if($variables['dates']['format'] == "d M Y"){
    // In this case i keep only start date. For keep end date use value2.
    $date = $variables['dates']['value']['formatted_iso'];
    $timezone = $variables['timezone'];
    $attributes = $variables['attributes'];
    // Set my vars
    $day = format_date(strtotime($date), 'custom', 'd');
    $month = format_date(strtotime($date), 'custom', 'M');
    $year = format_date(strtotime($date), 'custom', 'Y');

    // Wrap the result with the attributes.
    return '<span class="date-display-single"' . drupal_attributes($attributes) . '>' . '<span class="d">' . $day . '</span>' . '<span class="M">' . $month . '</span>' . '<span class="Y">' . $year . '</span>' . $timezone . '</span>';
  }
}