{"id":108926,"date":"2018-01-15T05:22:28","date_gmt":"2018-01-15T05:22:28","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=108926"},"modified":"2026-02-10T12:01:44","modified_gmt":"2026-02-10T12:01:44","slug":"jquery-datepicker","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/jquery-datepicker\/","title":{"rendered":"jQuery Datepicker"},"content":{"rendered":"\n

Date selection is a common requirement in Magento 2 forms.
Whether it\u2019s for delivery dates, bookings, or custom attributes, a datepicker improves user experience and accuracy.<\/p>\n\n\n\n

Magento 2 already includes jQuery and jQuery UI.
To use the Datepicker<\/a> correctly, you should rely on Magento\u2019s RequireJS-based approach.<\/p>\n\n\n

\n

Why Use Magento\u2019s Built-In Datepicker<\/h3>\n<\/div>\n

Magento 2 manages JavaScript dependencies using RequireJS<\/a>.
This ensures optimized loading and avoids conflicts between libraries.<\/p>\n

By using Magento\u2019s native modules, you keep your implementation stable, future-proof, and aligned with best practices.<\/p>\n\n

\n

Adding Datepicker to an HTML Element<\/h3>\n<\/div>\n

You can easily attach a Datepicker to any input field.
All you need is a simple HTML element and RequireJS initialization.<\/p>\n

Example HTML Input Field<\/h4>\n
<input type=\"text\" id=\"date-input\" \/><\/pre>\n
This input will act as the Datepicker field.<\/p>\n\n
\n
Initializing Datepicker Using RequireJS<\/h3>\n<\/div>\n
Magento allows you to load only the required jQuery UI module.
This keeps the frontend lightweight and efficient.<\/p>\n
JavaScript Code<\/h4>\n
<script>\nrequire([\n    'jquery',\n    'jquery-ui-modules\/datepicker'\n], function ($) {\n    $('#date-input').datepicker({\n        dateFormat: 'dd\/mm\/yy',\n        showButtonPanel: true,\n        changeMonth: true,\n        changeYear: true\n    });\n});\n<\/script><\/pre>\n
Once executed, the Datepicker will appear when the input field gains focus.<\/p>\n
\"jquery-datepicket\"<\/p>\n\n
\n
Common Datepicker Configuration Options<\/h3>\n<\/div>\n
Magento supports all standard jQuery UI Datepicker options.
You can easily customize the behavior as per your requirement.<\/p>\n
Some useful options include:<\/p>\n