Date Components

Date Components is a versatile field formatter for the popular date field module. It provides precise control over date formatting and HTML markup with each date element wrapped in a tag with semantic class names and attributes. It can be easily customised directly within the related field settings for your content type or indeed any other fieldable bundle.

In standard Drupal date formats are controlled under Regional and Language settings. To add new formats you have to use syntax understood by PHP’s date function, which is fine for expert users, but not ideal for normal content administrators. This module exposes this functionality in a date field’s display settings.

In your CSS you can style individual components such as day names, month day numbers, months, year, hours, minutes and seconds.

Structure

Each date time field is broken into components:

1. Optional overall wrapper, containing both start and end date/time elements. Only useful for date ranges.
2. Optional outer tag for each date/time element, wrapping both the date and time components.
3. Date container element, required, with inner elements for dayname, day, month and year with optional separator elements
4. Time conatiner element, required if time is displayed, with inner elements for hours, minutes, seconds and AM/PM suffix.

Semantic class names

The outermost wrapper of each date and time element has a set a class names you may use to highlight dates:

• lang-it: language identifier, an undefined language will default en for English
• to-datetime, to-date, from-datetime, from-date: indicates whether element contains a to or fraom date with or without time component
• month–12 => month number class
• day–4 => weekday number class 1 = Monday, 7 = Sunday
• yesterday, today, tomorrow
• future => simple flag for future or past (time-sensitive)
• days-offset–1 => days away from today
• week–52 => week number
• prev-week, this-week, next-week => last week
• week-offset–1 => weeks away from present
• prev-month, this-month, next-month => is in this month and year
• month-offset–0 => months away from present
• year–2014 = year
• prev-year, this-year, next-year => this

Here are some examples of how to use these classes in your CSS

/* Highlight all weekends in yellow */
.day–6, .day–7 {
background-color: yellow;
}

/* Highlight this week in light green, last week in yellow and next week in light blue */
.field-name-field-date .last-week {
background-color: yellow;
}

.field-name-field-date .this-week {
background-color: #66ff66;
}

.field-name-field-date .next-week {
background-color: #6666ff;
}

/* Make day names for this week only larger */
.this-week .dayname {
font-size: 1.5em;
}

Minute and Second Display Modes

1. Contextual minute display: Minutes are displayed if not on the hour, e.g. 7pm but 7:15pm. In 24 hour mode am/pm is replaced by h when no minutes are displayed.
2. Contextual second display: Seconds are only displayed where times are not rounded to nearest minute, however, minutes are always displayed.
3. Contextual minute and second display: Both minutes and seconds are only displayed where required.
4. Constant minute display: Hours and minutes are always displayed, zeropadded in 24 hour mode.
5. Hours only.

Localisation

The module full respects your site's regional date and language settings.

Date Order

It will use the long date format as a template for default settings, e.g. to decide whether to display dates as day / month / year, month / day / year or year / month / day. Day names, when enabled, precede d/m/Y and m/d/Y variants, but come after Y/m/d variants.

Language

If your site's default language is not set to English, the module uses a language-sensitive date formatter to ensure long and short forms of day and month names reflect your language settings. To do this you need to enable and configure the locale module.

PHP's native date() and date_format function will only output English day and month names. However, this module uses strftime() that will translate a timestamp to the appropriate language if the locale module is enabled.