In this post I am going to explain how to add date picker field in magento 2 system.xml file or you can say in magento 2 system configuration.<\/p>\n
Here, I am using my custom module \u2013 Ht_Mymodule<\/p>\n
First, open your module’s system.xml file and add below code in it.<\/p>\n
File Path: app\/code\/Ht\/Mymodule\/etc\/adminhtml\/system.xml<\/p>\n
<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Store:etc\/config.xsd\">\r\n <system>\r\n <tab id=\"mymoduletab\" translate=\"label\" sortOrder=\"50\">\r\n <label>Ht Mymodule<\/label>\r\n <\/tab>\r\n <section id=\"mymodulesection\" translate=\"label\" type=\"text\" sortOrder=\"10\" showInDefault=\"1\" showInWebsite=\"1\" showInStore=\"1\">\r\n <label>Configuration<\/label>\r\n <tab>mymoduletab<\/tab>\r\n <resource>Ht_Mymodule::configuration<\/resource>\r\n <group id=\"general\" translate=\"label\" type=\"text\" sortOrder=\"10\" showInDefault=\"1\" showInWebsite=\"1\" showInStore=\"1\">\r\n <label>General<\/label>\r\n <field id=\"date_field\" translate=\"label comment\" sortOrder=\"1\" type=\"text\" showInDefault=\"1\" showInStore=\"1\" >\r\n <label>Date<\/label>\r\n <frontend_model>Ht\\Mymodule\\Block\\DatePicker<\/frontend_model>\r\n <\/field>\r\n <\/group>\r\n <\/section>\r\n <\/system>\r\n<\/config><\/pre>\nNow we have added “Ht\\Mymodule\\Block\\DatePicker” as frontend model. So now we are going to create DatePicker class in file DatePicker.php<\/p>\n
File Path: app\/code\/Ht\/Mymodule\/Block\/DatePicker.php<\/p>\n
<?php\r\n\r\nnamespace Ht\\Mymodule\\Block;\r\n\r\nclass DatePicker extends \\Magento\\Config\\Block\\System\\Config\\Form\\Field\r\n{\r\n protected $_coreRegistry;\r\n\r\n public function __construct(\r\n \\Magento\\Backend\\Block\\Template\\Context $context, \r\n \\Magento\\Framework\\Registry $coreRegistry, \r\n array $data = []\r\n )\r\n {\r\n $this->_coreRegistry = $coreRegistry;\r\n parent::__construct($context, $data);\r\n }\r\n\r\n protected function _getElementHtml(\\Magento\\Framework\\Data\\Form\\Element\\AbstractElement $element) \r\n {\r\n $html = $element->getElementHtml();\r\n if (!$this->_coreRegistry->registry('datepicker_loaded')) {\r\n $this->_coreRegistry->registry('datepicker_loaded', 1);\r\n }\r\n $html .= '<button type=\"button\" class=\"custom-ui-datepicker-trigger\"><span>Select Date<\/span><\/button>';\r\n \r\n $html .= '<script type=\"text\/javascript\">\r\n require([\"jquery\", \"jquery\/ui\"], function (jq) {\r\n jq(document).ready(function () {\r\n jq(\"#' . $element->getHtmlId() . '\").datepicker( { dateFormat: \"dd\/mm\/yy\" } );\r\n jq(\".custom-ui-datepicker-trigger\").removeAttr(\"style\");\r\n jq(\".custom-ui-datepicker-trigger\").click(function(){\r\n jq(\"#' . $element->getHtmlId() . '\").focus();\r\n });\r\n });\r\n });\r\n <\/script>';\r\n $html .= '<style>\r\n .custom-ui-datepicker-trigger {\r\n background-image: none;\r\n background: 0 0;\r\n -moz-box-sizing: content-box;\r\n border: 0;\r\n box-shadow: none;\r\n line-height: inherit;\r\n margin: 0;\r\n padding: 0;\r\n text-shadow: none;\r\n font-weight: 400;\r\n text-decoration: none;\r\n display: inline-block;\r\n vertical-align: middle;\r\n position: relative;\r\n }\r\n .custom-ui-datepicker-trigger::after {\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n font-size: 42px;\r\n line-height: 30px;\r\n color: #514943;\r\n content: \"\\e612\";\r\n font-family: \"icons-blank-theme\";\r\n vertical-align: middle;\r\n display: inline-block;\r\n font-weight: 400;\r\n overflow: hidden;\r\n speak: none;\r\n text-align: center;\r\n position: absolute;\r\n top: -17px;\r\n right: 0;\r\n }\r\n .custom-ui-datepicker-trigger > span {\r\n border: 0;\r\n clip: rect(0,0,0,0);\r\n height: 1px;\r\n margin: -1px;\r\n overflow: hidden;\r\n padding: 0;\r\n position: absolute;\r\n width: 1px;\r\n }\r\n <\/style>';\r\n return $html;\r\n }\r\n}<\/pre>\n<\/p>\n","protected":false},"excerpt":{"rendered":"
In this post I am going to explain how to add date picker field in magento 2 system.xml file or you can say in magento 2 system configuration. Here, I am using my custom module \u2013 Ht_Mymodule First, open your module’s system.xml file and add below code in it. File Path: app\/code\/Ht\/Mymodule\/etc\/adminhtml\/system.xml <config xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:module:Magento_Store:etc\/config.xsd”>… <\/p>\n