{"id":139,"date":"2018-07-23T10:24:25","date_gmt":"2018-07-23T10:24:25","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2018\/07\/23\/add-date-picker-in-magento-2-custom-form\/"},"modified":"2025-05-22T17:25:39","modified_gmt":"2025-05-22T11:55:39","slug":"add-date-picker-in-magento-2-custom-form","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-date-picker-in-magento-2-custom-form\/","title":{"rendered":"How to Add Date Picker in Magento 2 Custom Form"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Date pickers are mainly needed when it is required&nbsp;to pick a not-yet-known date in context for a specific event or schedule some plan. It doesn\u2019t only reduce typing errors but also standardize the format. It also helps to improve&nbsp;the user experience by allowing users to simply selection rather than inputting using the keyboard.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Today, I have come up with the simple custom code to&nbsp;add date picker in&nbsp;Magento 2&nbsp;custom form.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There may be a requirement of date picker in the frontend or the backend form. Usually jQuery is used for the same. But here, we have used Magento 2 library to add date picker both in admin and frontend custom form.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Code to Add Date Picker in Magento 2 Custom Form<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"field \">\n    &lt;label class=\"field-label\">\n        &lt;span>&lt;?php echo __(' Date Picker')?>&lt;\/span>\n    &lt;\/label>\n    &lt;div class=\"field-control \">\n        &lt;input class=\"control-text\" name=\"datepicker\" id=\"datepicker\" type=\"text\">\n    &lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now run the following code:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script type=\"text\/javascript\">\n    require([\"jquery\", \"mage\/calendar\"], function ($) {\n        $('#datepicker').datepicker({\n                prevText: '&amp;#x3c;zur\u00fcck', prevStatus: '',\n                prevJumpText: '&amp;#x3c;&amp;#x3c;', prevJumpStatus: '',\n                nextText: 'Vor&amp;#x3e;', nextStatus: '',\n                nextJumpText: '&amp;#x3e;&amp;#x3e;', nextJumpStatus: '',\n                monthNames: ['January', 'February', 'March', 'April', 'May', 'June',\n                    'July', 'August', 'September', 'October', 'November', 'December'],\n                monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',\n                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],\n                dayNames: ['Sunday ', 'Monday', 'Tuesday ', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],\n                dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],\n                dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],\n                showMonthAfterYear: false,\n                dateFormat: 'd\/m\/yy'\n            }\n        );\n    });\n&lt;\/script><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Happy Coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Date pickers are mainly needed when it is required&nbsp;to pick a not-yet-known date in context for a specific event or schedule some plan. It doesn\u2019t&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-139","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=139"}],"version-history":[{"count":3,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/139\/revisions"}],"predecessor-version":[{"id":15633,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/139\/revisions\/15633"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}