{"id":11742,"date":"2020-06-27T11:01:57","date_gmt":"2020-06-27T05:31:57","guid":{"rendered":"https:\/\/www.hiddentechies.com\/blog\/?p=11742"},"modified":"2020-10-09T18:59:19","modified_gmt":"2020-10-09T13:29:19","slug":"magento-2-add-datepicker-custom-form","status":"publish","type":"post","link":"https:\/\/www.hiddentechies.com\/blog\/magento\/magento-2-add-datepicker-custom-form\/","title":{"rendered":"Magento 2 – How to Add Date Picker in Custom Form"},"content":{"rendered":"

In this post I am going to explain how to add date picker in custom form.<\/p>\n

Date Field HTML:<\/p>\n

<div class=\"field start_date\">\r\n    <label class=\"label\" for=\"start_date\">\r\n        <span><?php echo __('Start Date'); ?><\/span>\r\n    <\/label>\r\n    <div class=\"control\">\r\n        <input id=\"start_date\" name=\"start_date\" title=\"<?php echo __('Start Date'); ?>\" class=\"datepicker input-text\" type=\"text\" value=\"\"\/>\r\n    <\/div>\r\n<\/div><\/pre>\n
Add the below script to apply the date picker to the field.<\/p>\n
<script>\r\n    require([\r\n        'jquery',\r\n        'mage\/calendar'\r\n    ], function () {\r\n        jQuery('.datepicker').datepicker({\r\n            dateFormat: 'yy-mm-dd',\r\n            changeMonth: false,\r\n            changeYear: false\r\n        });\r\n    });\r\n<\/script><\/pre>\n
Thats it. Enjoy Magento 2!!<\/p>\n
<\/div>
 <\/a>
<\/div><\/div><\/div>
<\/div>","protected":false},"excerpt":{"rendered":"
In this post I am going to explain how to add date picker in custom form. Date Field HTML: <div class=”field start_date”> <label class=”label” for=”start_date”> <span><?php echo __(‘Start Date’); ?><\/span> <\/label> <div class=”control”> <input id=”start_date” name=”start_date” title=”<?php echo __(‘Start Date’); ?>” class=”datepicker input-text” type=”text” value=””\/> <\/div> <\/div> Add the below script to apply the date… <\/p>\n
Continue Reading<\/a><\/div>\n","protected":false},"author":1,"featured_media":11821,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[181,59,2138],"tags":[2129,10,27],"_links":{"self":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/11742"}],"collection":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/comments?post=11742"}],"version-history":[{"count":2,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/11742\/revisions"}],"predecessor-version":[{"id":11785,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/11742\/revisions\/11785"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/media\/11821"}],"wp:attachment":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/media?parent=11742"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/categories?post=11742"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/tags?post=11742"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}