Recently I have found one solution to add a calendar in system configuration options. Let’s discuss this in detail.
In order to add a calendar in system configuration options, we have to add one system field and require one Block file.
Use the below code to add the system field.
Step1# open your module system.xml from
app/code/NameSpace/ModuleName/etc/adminhtml
and following code in it
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../Config/etc/system_file.xsd">
<system>
<section id="yoursectionid" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Custom Label</label>
<tab>tabname</tab>
<resource>NameSpace_ModuleNmae::config_modulename</resource>
<group id="general" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
<label>General Settings</label>
<!-- date picker field code start-->
<field id="start_date" translate="label comment" sortOrder="4" type="text" showInDefault="1" showInStore="1" >
<label>Start Date</label>
<!-- here we pass class where we create date picker-->
<frontend_model>NameSpace\ModuleName\Block\DatePicker</frontend_model>
</field>
<!-- date picker field code end-->
</group>
</section>
</system>
</config>
Step #2: Now we create DatePicker class in file DatePicker.php at
app/code/NameSpace/ModuleName/Block/ folder where we create date picker element
<?php
namespace NameSpace\ModuleName\Block;
use Magento\Framework\Registry;
use Magento\Backend\Block\Template\Context;
class DatePicker extends \Magento\Config\Block\System\Config\Form\Field
{
/**
* @var Registry
*/
protected $_coreRegistry;
/**
* @param Context $context
* @param Registry $coreRegistry
* @param array $data
*/
public function __construct(
Context $context,
Registry $coreRegistry,
array $data = []
) {
$this->_coreRegistry = $coreRegistry;
parent::__construct($context, $data);
}
protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
{
//get configuration element
$html = $element->getElementHtml();
//check datepicker set or not
if (!$this->_coreRegistry->registry('datepicker_loaded')) {
$this->_coreRegistry->registry('datepicker_loaded', 1);
}
//add icon on datepicker
$html .= '<button type="button" style="display:none;" class="ui-datepicker-trigger '
.'v-middle"><span>Select Date</span></button>';
// add datepicker with element by jquery
$html .= '<script type="text/javascript">
require(["jquery", "jquery/ui"], function (jq) {
jq(document).ready(function () {
jq("#' . $element->getHtmlId() . '").datepicker( { dateFormat: "dd/mm/yy" } );
jq(".ui-datepicker-trigger").removeAttr("style");
jq(".ui-datepicker-trigger").click(function(){
jq("#' . $element->getHtmlId() . '").focus();
});
});
});
</script>';
// return datepicker element
return $html;
}
}
Run command
php bin/magento setup:uppgrade
php bin/magento s:s:d -f
php bin/magento cache:flush
Step 3# Now in your admin section you get this date picker element as following
![](https://magepow.com/blog/wp-content/uploads/2022/01/Screen-Shot-2022-01-14-at-17.16.04-1024x525.png)
Hope this article will help you in some way, You can see useful articles in the next articles.
Anything you need support from Magento 2 feel free to contact us at Alothemes and
Phone: (+84)865633728
Email: support@alothemes.com