# loki/magento2-flatpickr

> Magento 2 module to add an Alpine.js directive x-flatpickr

`composer require loki/magento2-flatpickr`

Canonical URL: https://packagento.com/loki/magento2-flatpickr

## At a glance

- **Vendor**: Loki Extensions (https://packagento.com/loki.md)
- **Latest version**: 1.0.8 — released 2026-05-19
- **Pricing**: Free
- **Package type**: Magento 2 module
- **Status**: active, accepting new buyers

## Installation

Packagento is licence-gated, so even free packages need a licence on a project before Composer can resolve them.

1. **Sign in or create an account** at https://packagento.com/customer/account/.

2. **Add the package to your account.** Open https://packagento.com/loki/magento2-flatpickr and complete the free checkout. A licence is minted automatically.

3. **Create or pick a project, then activate the licence on it.**
   - Projects represent the Magento installs you deploy to. Manage them at https://packagento.com/projects/.
   - Activate the new licence on the project you'll deploy this package to. Activation is what generates the Composer credentials scoped to that project.

4. **Add the project credentials to your Magento codebase.**

   Grab the project's public + private key from https://packagento.com/projects/ (open the project, then its Credentials tab), and add them to `auth.json`:

   ```json
   {
     "http-basic": {
       "packagento.com": {
         "username": "ppk_live_...",
         "password": "psk_live_..."
       }
     }
   }
   ```

   Add the Packagento Composer repository to `composer.json`:

   ```json
   {
     "repositories": [
       { "type": "composer", "url": "https://packagento.com" }
     ]
   }
   ```

5. **Install and apply.**

   ```bash
   composer require loki/magento2-flatpickr:*
   bin/magento setup:upgrade
   bin/magento setup:di:compile
   bin/magento cache:flush
   ```

## What it does

Magento 2 module to add an Alpine.js directive x-flatpickr

## README

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

#### Installation
```bash
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:
```html
<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:
```xml
<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:

```xml
<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:
```xml
<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/](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](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

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

## Recent Versions

| Version | Released |
|---|---|
| 1.0.8 | 2026-05-19 |
| 1.0.7 | 2026-04-08 |
| 1.0.6 | 2026-01-23 |
| 1.0.5 | 2025-12-12 |
| 1.0.4 | 2025-09-23 |
| 1.0.3 | 2025-09-04 |
| 1.0.2 | 2025-09-03 |
| 1.0.1 | 2025-09-02 |
| 1.0.0 | 2025-08-31 |

## Dependencies

### Require

| Package | Constraint |
|---|---|
| ext-json | * |
| loki/magento2-components | ^2.2 |
| magento/framework | ^103.0 |
| magento/module-store | ^101.0 |

## Quality

Latest release (1.0.8) fails the Packagento QA pipeline. Verdicts below are per-cell (Magento line × PHP version) for the matrixed tools, and run-once for the static / security tiers.


### Compatibility

Each Magento line is installed on its supported PHP versions, then the module is built (DI compile + static-content deploy). Cells show passed / failed / untested; staircase gaps render as `–`.

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | Pass | Pass | – | – |
| 2.4.8 | – | Pass | Pass | – |
| 2.4.9 | – | – | Pass | Pass |


### Code Quality

Advisory checks against the module's source. Never affect the Compatibility verdict — a phpcs finding can't make a module incompatible.

#### Static Analysis

Coding standards (phpcs), mess detection (phpmd), copy-pasted code (cpd), PHP cross-version compatibility, composer.json validity. Each runs once for the whole module.

| Tool | Status | Findings | Summary |
|---|---|---|---|
| PHPCS | Pass | 0 |  |
| PHPMD | Pass | 0 |  |
| Cpd | Pass | 0 |  |
| Composer validate | Info | 1 | valid; 1 advisory note (composer validate --strict) |

#### PHPStan

Type-checks the module against a real Magento install. Re-runs per Magento + PHP version because resolvable symbols differ between releases.

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | 9 | 9 | – | – |
| 2.4.8 | – | 9 | 9 | – |
| 2.4.9 | – | – | 8 | 8 |


### Tests

Unit and integration suites run per Magento + PHP cell. Test failures speak to the module's behaviour, not its compatibility with a line, so they're reported here separately.

#### Unit Tests

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | N/A | N/A | – | – |
| 2.4.8 | – | N/A | N/A | – |
| 2.4.9 | – | – | N/A | N/A |

#### Integration Tests

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | N/A | N/A | – | – |
| 2.4.8 | – | N/A | N/A | – |
| 2.4.9 | – | – | N/A | N/A |


### Security

Dependency-advisory audit (composer audit) plus a source malware scan. A malware detection fails the version outright.

| Tool | Status | Findings | Summary |
|---|---|---|---|
| Composer audit | Pass | 0 |  |
| Malware scan | Pass | 0 |  |

## Licence and pricing

Free. A licence is still minted on checkout and bound to your project for Composer access — no payment step.

Refundable within 14 days of first purchase via https://packagento.com/account/refunds/.

## Install via Claude Code or any MCP client

The Packagento MCP server can run the licence + project + Composer steps above in one tool call:

```
purchase_and_install_packages(
  composer_names=["loki/magento2-flatpickr"],
  project_id="proj_xxx"
)
```

This handles cart, checkout, licence minting, project activation, and writes auth.json credentials. Connect a client with `claude mcp add packagento https://mcp.packagento.com`. Full setup at https://packagento.com/docs/mcp-setup.

## Vendor

Loki Extensions is a Magento 2 vendor on Packagento. See https://packagento.com/loki.md for their full catalogue.