Time

The Time field is similar to the DateTime field. It uses the time picker of flatpickr (without the calendar).

field :starting_at,
  as: :time,
  picker_format: 'H:i',
  format: "HH:mm",
  relative: true,
  picker_options: {
    time_24hr: true
  }

Options

-> format

Format the date shown to the user on the Index and Show views.

Default

TT

Possible values

Use luxon formatting tokens.

-> picker_format

Format the date shown to the user on the Edit and New views.

Default

H:i:S

Possible values

Use flatpickr formatting tokens.

-> picker_options

Passes the options here to flatpickr.

Default

{}

Possible values

Use flatpickr options.

-> disable_mobile

By default, flatpickr is disabled on mobile because the mobile date pickers tend to give a better experience, but you can override that using disable_mobile: true (misleading to set it to true, I know. We're just forwarding the option). So that will override that behavior and display flatpickr on mobile devices too.

Default

false

Possible values

true, false

-> time_24hr

Displays time picker in 24-hour mode or AM/PM selection.

Default

false

Possible values

true, false

-> relative

If true, the time will be relative to the configured timezone. If the timezone is not configured, the browser's timezone will be used.

If false, the time will be displayed as absolute in UTC and not change based on the browser's or configured timezone.

Default

true

Possible values

true, false

-> timezone

Select in which timezone the values should be cast.

WARNING

This option is only taken into account if the relative option is true.

Default

If nothing is selected, the browser's timezone will be used.

Possible values

TZInfo identifiers.

field :start, as: :time, relative: true, timezone: "EET"
# Or
field :start, as: :time, relative: true, timezone: -> { record.timezone }