Time

The Time field displays a time on Index and Show pages and provides a flatpickr time picker without a calendar on New and Edit pages. Use it for a time of day; use DateTime when the date matters too.

# app/avo/resources/event.rb
field :starting_at,
  as: :time,
  picker_format: "H:i",
  format: "HH:mm",
  time_24hr: true

Without extra configuration, times use the browser's timezone, the display format is TT, and the picker format is H:i:S. The picker uses AM/PM selection by default.

Change how times look

Set format for Index and Show using Luxon formatting tokens. Set picker_format separately for New and Edit using flatpickr tokens, as in the example above. To change it for every field at once, set config.time_format in the initializer.

Enable time_24hr for 24-hour picker controls. This does not change the Index or Show format.

Keep the same clock time for everyone

If a time must stay fixed rather than shift with the viewer's timezone, set relative to false.

# app/avo/resources/event.rb
field :starting_at, as: :time, relative: false

If everyone should instead see the time in one specific timezone, leave conversion enabled and set timezone:

# app/avo/resources/event.rb
field :starting_at, as: :time, timezone: "America/Los_Angeles"

For a record-specific timezone, use timezone: -> { record.timezone }.

Time-only conversion

With relative: true, Avo uses today's date when converting the time from UTC. The timezone offset can therefore change with daylight saving time. Use DateTime for a timestamp tied to a particular date.

Customize the time picker

Pass additional flatpickr options through picker_options. For example, restrict the hours offered by the picker:

# app/avo/resources/event.rb
field :starting_at,
  as: :time,
  picker_options: { minTime: "09:00", maxTime: "17:00" }

These settings constrain the picker, not server-side model validation. See the reference for settings Avo controls separately.

To use flatpickr instead of the native mobile picker, set disable_mobile to true. See flatpickr's mobile support.

Use common field options

The field also supports common field options, including link_to_record to link the Index value to the record.