# Changing the date field format

**When adding input fields for a date, the simplest choice to head for is to use the input `type="date"` to let the browser handle the date input. When you want to customize things, Loki offers some options out of the box.**

## Using `type="data"`
When you're dealing with input fields in Loki, this field could be created in various ways: It could be a so-called [Loki Field Component](/field-components), where the component block reuses the PHTML template `Loki_FieldComponents::form/field.phtml` (which again requires specific ViewModel methods to be used, guaranteed through the `FieldViewModel` class). Or it could be that there simply is a hard-coded HTML `input` element somewhere. When you want that input to allow for a date-selection, the simplest thing you can do is set the type to `date`.

```html
<input type="date" />
```

For instance, with a [Loki Field Component](/field-components), this could look like the following:

```xml
<block
    name="example"
    template="Loki_FieldComponents::form/field.phtml">
    <arguments>
        <argument name="input_type" xsi:type="string">date</argument>
        <argument name="field_type" xsi:type="string">text</argument>
        <argument name="field_label" xsi:type="string">Date</argument>
    </arguments>
</block>
```

## Limitations of `type="data"`
Unfortunately, there are some limitations to this input type. First of all, the input mechanism that allows for selecting a date (usually via some kind of popup) can be clumsy depending on the browser and the operating system. For instance, with Chrome under Linux, it is quite hard to select a year without resetting the entire input by accident.

Another limitation is that the value shown in the input is formatted by the browser and this is not something that can be customized easily. Note that the value that is shown in the browser (for example `mm/dd/yy`) could be different from the value that is sent to the server, aka Magento (usually `YYYY-mm-dd`).

## Adding the `Loki_Flatpickr` module
To overcome these issues, you could step away from the native `type="date"` and create the popup yourself. One popular library to do this is [Flatpickr](https://flatpickr.js.org/) and the module [Loki_Flatpickr](https://github.com/LokiExtensions/Loki_Flatpickr) integrates this in Magento.

> Note that Flatpickr adds about 51Kb of JavaScript and 17Kb of CSS to pages.

The Magento module adds an Alpine.js directive `x-flatpickr` to the frontend, which then should be used as follows:

```html
<input type="date" x-flatpickr />
```

To add this new HTML attribute to a Loki Field Component, the XML layout argument `field_attributes` can be used:

```xml
<block
    name="example"
    template="Loki_FieldComponents::form/field.phtml">
    <arguments>
        <argument name="input_type" xsi:type="string">date</argument>
        <argument name="field_type" xsi:type="string">text</argument>
        <argument name="field_label" xsi:type="string">Date</argument>
        <argument name="field_attributes" xsi:type="array">
            <item name="x-flatpickr" xsi:type="boolean">true</item>
        </argument>
    </arguments>
</block>
```

## Customizing the customer date-of-birth field
In the checkout, the date field is used for the customer date-of-birth. The following shows an XML layout update to add Flatpickr to that field:

```xml
<referenceBlock name="loki-checkout.customer.customer_dob">
    <arguments>
        <argument name="field_attributes" xsi:type="array">
            <item name="x-flatpickr" xsi:type="boolean">true</item>
        </argument>
    </arguments>
</referenceBlock>
```

## Adding a custom Alpine.js component
Instead of using Flatpickr (which is lightweight but still increases the payload) a possibility could be to add a custom Alpine.js component that allows for the popup to be shown. The approach of `field_attributes` would allow for this as well.