Component

Datetime fields

Use the datetime fields component to help users enter a datetime for a specific event.

This differs from the Date fields component in a few notable ways: 1. In addition, to day, month and year, it also takes hour and minute 2. It generates select fields in place of inputs 3. As this uses the ActionView::Helpers::DateHelper helpers you must provide a prefix and field_name to construct the fields - the prefix must be the downcased and underscored model name - the field_name is the attribute for the model

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Date (required)

Time

:

How to call this component

<%= render "components/datetime_fields", {
  prefix: "edition",
  field_name: "first_published_at"
} %>

Accessibility acceptance criteria

The component must:

• accept focus
• be focusable with a keyboard
• be usable with a keyboard
• be usable with touch
• indicate when they have focus
• be recognisable as form select elements
• have correctly associated labels

Other examples

With heading level and size (preview)

Date (required)

Time

:

<%= render "components/datetime_fields", {
  prefix: "edition",
  field_name: "first_published_at",
  heading_level: 1,
  heading_size: "l"
} %>

With hint text (preview)

Date (required)

For example, 01 August 2022

Time

For example, 09:30 or 19:30

:

<%= render "components/datetime_fields", {
  prefix: "edition",
  field_name: "first_published_at",
  date_hint: "For example, 01 August 2022",
  time_hint: "For example, 09:30 or 19:30"
} %>

With custom ids (preview)

Date (required)

Time

:

<%= render "components/datetime_fields", {
  prefix: "edition",
  field_name: "first_published_at",
  year: {
    id: "edition_first_published_year",
    name: "Year",
    width: 4
  },
  month: {
    id: "edition_first_published_month",
    name: "Month",
    width: 2
  },
  day: {
    id: "edition_first_published_day",
    name: "Day",
    width: 2
  },
  hour: {
    id: "edition_first_published_hour"
  },
  minute: {
    id: "edition_first_published_minute"
  }
} %>

With values (preview)

Date (required)

Time

:

<%= render "components/datetime_fields", {
  prefix: "edition",
  field_name: "first_published_at",
  year: {
    name: "Year",
    value: 2022,
    width: 4
  },
  month: {
    name: "Month",
    value: 1,
    width: 2
  },
  day: {
    name: "Day",
    value: 1,
    width: 2
  },
  hour: {
    value: 9
  },
  minute: {
    value: 30
  }
} %>

With a prepopulated time (preview)

Date (required)

Time

:

<%= render "components/datetime_fields", {
  prefix: "edition",
  field_name: "first_published_at",
  hour: {
    value: 10,
    id: "myhour"
  },
  minute: {
    value: 51,
    id: "myminute"
  }
} %>

With error items (preview)

Date (required)

Descriptive error 1
Descriptive error 2

Time

:

<%= render "components/datetime_fields", {
  prefix: "edition",
  field_name: "first_published_at",
  error_items: [
    {
      text: "Descriptive error 1"
    },
    {
      text: "Descriptive error 2"
    }
  ]
} %>

With data attributes (preview)

Date (required)

Time

:

<%= render "components/datetime_fields", {
  prefix: "edition",
  field_name: "first_published_at"
} %>

With date only option (preview)

This is used to render the component to display only the date input fields.

An optional heading for the date fields

<%= render "components/datetime_fields", {
  prefix: "edition",
  field_name: "first_published_at",
  date_heading: "An optional heading for the date fields",
  date_only: true
} %>