jQuery Datepicker

Date selection is a common requirement in Magento 2 forms.
Whether it’s for delivery dates, bookings, or custom attributes, a datepicker improves user experience and accuracy.

Magento 2 already includes jQuery and jQuery UI.
To use the Datepicker correctly, you should rely on Magento’s RequireJS-based approach.

Magento 2 manages JavaScript dependencies using RequireJS.
This ensures optimized loading and avoids conflicts between libraries.

By using Magento’s native modules, you keep your implementation stable, future-proof, and aligned with best practices.

You can easily attach a Datepicker to any input field.
All you need is a simple HTML element and RequireJS initialization.

Example HTML Input Field

<input type="text" id="date-input" />

This input will act as the Datepicker field.

Magento allows you to load only the required jQuery UI module.
This keeps the frontend lightweight and efficient.

JavaScript Code

<script>
require([
    'jquery',
    'jquery-ui-modules/datepicker'
], function ($) {
    $('#date-input').datepicker({
        dateFormat: 'dd/mm/yy',
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true
    });
});
</script>

Once executed, the Datepicker will appear when the input field gains focus.

Magento supports all standard jQuery UI Datepicker options.
You can easily customize the behavior as per your requirement.

Some useful options include:

• dateFormat – Controls how the date is displayed
• changeMonth – Adds a month dropdown
• changeYear – Adds a year dropdown
• showButtonPanel – Displays quick action buttons

These options enhance usability, especially for long date ranges.

<script>
require([
    'jquery',
    'jquery-ui-modules/datepicker'
], function ($) {

    var dates = ["20/01/2018", "21/01/2018", "22/01/2018", "23/01/2018"];

    function DisableDates(date) {
    var string = $.datepicker.formatDate('dd/mm/yy', date);
    return [dates.indexOf(string) == -1];
    }
    $('#date-input').datepicker({
        dateFormat: 'dd/mm/yy',
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true,
        beforeShowDay: DisableDates
    });
});
</script>

This will disable the dates mentioned in the array dates.

Follow Magento’s RequireJS structure for JavaScript loading.
Avoid loading external libraries manually.

This approach improves performance, prevents conflicts, and ensures compatibility with Magento upgrades.

Using jQuery Datepicker in Magento 2 is simple when done the right way.
Magento’s built-in RequireJS modules provide a clean and reliable solution.

By following this method, you ensure better performance, cleaner code, and a smoother user experience across your Magento store.