Skip to content

Date range formatter#

The Date range (daterange_default) formatter displays a date range in various formatting options with additional time zone settings depending on the date type.

Settings#

Time zone#

Note

Some of these settings are only available for datetime types.

The timezone setting controls the timezone used to display the date and options to display the timezone for datetime types.

Setting Label Description Default
timezone_override Time zone override Optional time zone to always use
timezone_stored Use stored time zone Option to use the stored time zone value when no override is selected FALSE
display_timezone Display time zone Option to display time zone along with the date/time FALSE
timezone_format Time zone format The format of the time zone to use when displayed abbreviation
user_timezone Append date/time in user's time zone Option to also display user's time zone FALSE

Date format#

The date_format_parts setting controls the formatting of the date portion by breaking it into individual sortable components.

Each component can be configured to display in a php date format or hidden. An optional suffix can be appended to the component to serve as a separator.

Month

Setting Label Description Default
format Format Date format F
suffix Suffix Date suffix space

Day

Setting Label Description Default
format Format Date format jS
suffix Suffix Date suffix ,

Year

Setting Label Description Default
format Format Date format Y
suffix Suffix Date suffix

Time format#

Note

These settings are only available for datetime types.

The time_format_parts setting controls the formatting of the time portion by breaking it into individual sortable components.

Each component can be configured to display in a php date format or hidden. An optional suffix can be appended to the component to serve as a separator.

Hour

Setting Label Description Default
format Format PHP date format g
suffix Suffix Text appended after :

Minute

Setting Label Description Default
format Format PHP date format i
suffix Suffix Text appended after

Second

Setting Label Description Default
format Format PHP date format
suffix Suffix Text appended after

AM/PM

Setting Label Description Default
format Format PHP date format a
suffix Suffix Text appended after

Additional settings#

Note

Some of these settings are only available for datetime types.

Setting Label Description Default
date_first First part shown Controls the order to show date and time date
date_time_separator Date/time separator Text to separate date and time space
from_to Display Determines which date values display both
separator Date separator Separator between date values when both are displayed -
end_date_fallback_text End date fallback text Optional text to display when the end date is empty TBD
all_day_label All day label The string to output when date range has been set to run all day All day
all_day_separator All day separator The string to separate the All day label from the dates |

Style settings#

These additional style settings give you complete control over the HTML markup generated by each subfield. This is one of the most powerful features of the Custom Field module for theming.

By customizing the wrapper tags and classes, you can:

  • Create clean, semantic HTML that matches your theme’s design system
  • Target individual subfields precisely with CSS (using subfield name and type)
  • Reduce CSS specificity issues and override battles
  • Improve accessibility and SEO with proper semantic elements (<section>, <article>, <h3>, etc.)
  • Easily integrate with CSS frameworks like Tailwind, Bootstrap, or custom component libraries

Default behavior (when left empty) produces a <div> wrapper with intelligent, predictable classes based on the subfield name and type — giving you excellent theming hooks right out of the box.

Setting Label Description
field_wrapper_tag Field wrapper tag HTML element that wraps the entire field + label
field_wrapper_class Field wrapper class Optional additional classes (space separated)
field_tag Field tag HTML element that wraps only the field value
field_class Field classes Optional field value classes (space separated)
label_tag Label tag HTML element that wraps the label
label_class Label classes Optional label classes (space separated)

Field types#