DateTime

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.

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.

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