How to add a calendar in admin configuration options in Magento 2

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


and following code in it

<?xml version="1.0"?>
<config xmlns:xsi="" xsi:noNamespaceSchemaLocation="../../../Config/etc/system_file.xsd">
        <section id="yoursectionid" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Custom Label</label>
            <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-->
                <!-- date picker field code end-->

Step #2: Now we create DatePicker class in file DatePicker.php  at

app/code/NameSpace/ModuleName/Block/ folder where we create date picker element

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("#' . $element->getHtmlId() . '").focus();
        // 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

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