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, 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.

<input type="date" />

For instance, with a Loki Field Component, this could look like the following:

<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 and the module Loki_Flatpickr integrates this in Magento.

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

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

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

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