You are browsing docs for Avo 2: go to Avo 3

Skip to content

DateTime

DateTime field

The DateTime field is similar to the Date field with two new attributes. time_24hr tells flatpickr to use 24 hours format and timezone to tell it in what timezone to display the time. By default, it uses your browser's timezone.

ruby
field :joined_at,
  as: :date_time,
  name: "Joined at",
  picker_format: "Y-m-d H:i:S",
  format: "yyyy-LL-dd TT",
  time_24hr: true,
  timezone: "PST"

Options

format

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

Default

yyyy-LL-dd TT

Possible values

Use luxon formatting tokens.

picker_format

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

Default

Y-m-d H:i:S

Possible values

Use flatpickr formatting tokens.

time_24hr

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

Default

false

Possible values

true, false

timezone

Select in which timezone the values should be cast.

Default

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

Possible values

TZInfo identifiers.

ruby
field :started_at, as: :date_time, timezone: "EET"
# Or
field :started_at, as: :date_time, timezone: -> { record.timezone }

picker_options

Passes the options here to [flatpickr](https://flatpickr.js.org/).

Default

{}

Possible values

Use flatpickr options.

WARNING

These options may override other options like time_24hr.

first_day_of_week

Set which should be the first date of the week in the picker calendar. Flatpickr [documentation](https://flatpickr.js.org/localization/) on that. 1 is Monday, and 7 is Sunday.

Default value

1

Possible values

1, 2, 3, 4, 5, 6, and 7

disable_mobile

By default, flatpickr is [disabled on mobile](https://flatpickr.js.org/mobile-support/) 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 value

false

Possible values

true, false