# DateTime

<Image src="/assets/img/fields/date-time.jpg" width="712" height="416" alt="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

<Option name="`format`">

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

#### Default

`{{ $frontmatter.default_format }}`

#### Possible values

Use [`luxon`](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) formatting tokens.
</Option>

<Option name="`picker_format`">

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

#### Default

`{{ $frontmatter.default_picker_format }}`

#### Possible values

Use [`flatpickr`](https://flatpickr.js.org/formatting) formatting tokens.
</Option>

<Option name="`picker_options`">

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

#### Default

`{}`

#### Possible values

Use [`flatpickr`](https://flatpickr.js.org/options) options.
</Option>

<Option name="`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.

</Option>

<Option name="`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`
</Option>

<Option name="`time_24hr`">

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

</Option>

<Option name="`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.

</Option>

<Option name="`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](https://api.rubyonrails.org/classes/ActiveSupport/TimeZone.html).

```ruby-vue{1,3}
field :start, as: :{{ $frontmatter.field_type }}, relative: true, timezone: "EET"