Loki_Flatpickr

This Magento 2 module adds an Alpine.js x-flatpickr directive to transform a simple input field into a Flatpickr date picker.

Installation

composer require loki/magento2-flatpickr
bin/magento module:enable Loki_Flatpickr

Usage

To add Flatpickr to a custom HTML input, just add the x-flatpickr directive to your HTML element:

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

If you want to add Flatpickr to a Loki Field Component, add the x-flatpickr directive via the XML layout:

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

Customization

The Flatpickr directive is inserted via a block loki.directives.flatpickr. If you want to change the options for Flatpickr, you can use the block argument options for this:

<referenceBlock name="loki.directives.flatpickr">
    <arguments>
        <argument name="options" xsi:type="array">
            <item name="altFormat" xsi:type="string">d-m-Y</item>
        </argument>
    </arguments>
</referenceBlock>

Instead of a global configuration, options can also be set per field:

<block name="example" template="Loki_FieldComponents::form/field.phtml">
    <arguments>
        <argument name="input_type" xsi:type="string">date</argument>
        <argument name="field_attributes" xsi:type="array">
            <item name="x-flatpickr" xsi:type="array">
                <item name="altFormat" xsi:type="string">d-m-Y</item>
            </item>
        </argument>
    </arguments>
</block>

For all options, see https://flatpickr.js.org/options/

Note that changing the dateFormat will also change the value sent to Magento. It is probably best to keep this at its default (Y-m-d).

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog,
and this project adheres to Semantic Versioning.

[Unreleased]

[1.0.8] - 19 May 2026

Fixed

• Do not preload Flatpickr CSS

[1.0.7] - 08 April 2026

Fixed

• Properly set first day of week
• Allow setting options per field

[1.0.6] - 23 January 2026

Fixed

• Increase PHPCS_LEVEL to 6
• Add new GitHub Action workflows

[1.0.5] - 12 December 2025

Fixed

• Do not defer CSS
• Update composer keywords
• Update composer keywords
• Update composer keywords

[1.0.4] - 23 September 2025

Fixed

• Rename loki.script from container to block to allow caching
• Rename loki script containers

[1.0.3] - 04 September 2025

Fixed

• Loading Flatpickr JS async does not work
• Remove redundant field_type definition from README

[1.0.2] - 03 September 2025

Fixed

• array_merge_recursive does not work, use array_merge instead
• Add examples to README

[1.0.1] - 02 September 2025

Fixed

• Optimize loading of remote resources
• Allow configuring options from XML layout
• Add additional handle loki_flatpickr for usage outside of Loki Components

[1.0.0] - 31 August 2025

Added

• Initial release