Recently I have found one solution to add calendar in system configuration options. Lets discuss in detail.<\/p>\n
In order to add calendar in system configuration options, we have to add one system field and require one Block file.<\/p>\n
Use below code to add system field.<\/p>\n
<field id=\"startdate\" translate=\"label\" type=\"text\" sortOrder=\"20\" showInDefault=\"1\" showInWebsite=\"1\" showInStore=\"1\">\r\n <label>Start Date<\/label>\r\n <comment><![CDATA[Date Format (Date\/Month\/Year)]]><\/comment>\r\n <frontend_model>Hiddentechies\\SytemCalendar\\Block\\Calendar<\/frontend_model>\r\n <\/field><\/pre>\nNow lets create Block file – Calendar.php<\/p>\n
<?php\r\n\r\nnamespace Hiddentechies\\SytemCalendar\\Block;\r\n\r\nuse Magento\\Framework\\Registry;\r\n\r\nclass Calendar extends \\Magento\\Config\\Block\\System\\Config\\Form\\Field {\r\n\r\n \/**\r\n * @var Registry\r\n *\/\r\n protected $_coreRegistry;\r\n\r\n \/**\r\n * @param \\Magento\\Backend\\Block\\Template\\Context $context\r\n * @param Registry $coreRegistry\r\n * @param array $data\r\n *\/\r\n public function __construct(\r\n \\Magento\\Backend\\Block\\Template\\Context $context, Registry $coreRegistry, array $data = []\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 $baseURL = $this->getBaseUrl();\r\n $html = $element->getElementHtml();\r\n $calpath = $baseURL . 'pub\/media\/systemcalendar\/';\r\n if (!$this->_coreRegistry->registry('datepicker_loaded')) {\r\n $html .= '<style type=\"text\/css\">input.datepicker { background-image: url(' . $calpath . 'calendar.png) !important; background-position: calc(100% - 8px) center; background-repeat: no-repeat; } input.datepicker.disabled,input.datepicker[disabled] { pointer-events: none; }<\/style>';\r\n $this->_coreRegistry->registry('datepicker_loaded', 1);\r\n }\r\n $html .= '<script type=\"text\/javascript\">\r\n require([\"jquery\", \"jquery\/ui\"], function () {\r\n jQuery(document).ready(function () {\r\n jQuery(\"#' . $element->getHtmlId() . '\").datepicker( { dateFormat: \"dd\/mm\/yy\" } );\r\n \r\n var el = document.getElementById(\"' . $element->getHtmlId() . '\");\r\n el.className = el.className + \" datepicker\";\r\n });\r\n });\r\n <\/script>';\r\n return $html;\r\n }\r\n\r\n}<\/pre>\nLets discuss some terms used in this block.
\nHiddentechies<\/strong> – Vendor Name
\nSytemCalendar<\/strong> – Module Name
\ncalendar.png<\/strong> – add calendar icon image at pub\/media\/systemcalendar\/<\/strong> directory<\/p>\nThats it.<\/p>\n","protected":false},"excerpt":{"rendered":"
Recently I have found one solution to add calendar in system configuration options. Lets discuss in detail. In order to add calendar in system configuration options, we have to add one system field and require one Block file. Use below code to add system field. <field id=”startdate” translate=”label” type=”text” sortOrder=”20″ showInDefault=”1″ showInWebsite=”1″ showInStore=”1″> <label>Start Date<\/label>… <\/p>\n