amasty/module-date-picker

Note:

This free solution helps align the Magento calendar with WCAG 2.2 AA accessibility requirements. Accessibility matters to us across all of our work, not just within our modules. That is why we created this module to enhance Magento’s native date picker with an improved version that addresses known accessibility issues.

The updated date picker is compatible with screen readers and improves element contrast for a more accessible user experience.

Currently, amasty/module-date-picker is included in the suggestions for the Gift Card extension. We are also working on adding it to the suggestions for other modules.

Installation

To install the package, run the following commands:

See more details in the Composer User Guide.

Usage

Open the template file used for the datepicker component.

Find the div element that contains the datepicker component.

Add the CSS class am-datepicker-observed to this div element.

Example: Applying the Date Picker Observer Class

The following is an example of how the am-datepicker-observed class can be added to a date picker template.

In this example, we use the Magento customer date of birth template:

Within this template, locate the div that contains the date picker component and add the following class to it:

After saving the changes, the date picker in this example will be applied according to the configured settings.