# Date

The `Date` field may be used to display date values.

```ruby
field :birthday,
  as: :date,
  first_day_of_week: 1,
  picker_format: "F J Y",
  format: "yyyy-LL-dd",
  placeholder: "Feb 24th 1955"
```

## 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>

---