# Time

<Image src="/assets/img/fields/time.png" width="1674" height="402" alt="" />

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

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

## 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="`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"