Magento 2 – How to add calendar in admin configuration options?

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>
                    <comment><![CDATA[Date Format (Date/Month/Year)]]></comment>
                    <frontend_model>Hiddentechies\SytemCalendar\Block\Calendar</frontend_model>
                </field>

Now lets create Block file – Calendar.php

<?php

namespace Hiddentechies\SytemCalendar\Block;

use Magento\Framework\Registry;

class Calendar extends \Magento\Config\Block\System\Config\Form\Field {

    /**
     * @var  Registry
     */
    protected $_coreRegistry;

    /**
     * @param \Magento\Backend\Block\Template\Context $context
     * @param Registry $coreRegistry
     * @param array $data
     */
    public function __construct(
    \Magento\Backend\Block\Template\Context $context, Registry $coreRegistry, array $data = []
    ) {
        $this->_coreRegistry = $coreRegistry;
        parent::__construct($context, $data);
    }

    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element) {
        $baseURL = $this->getBaseUrl();
        $html = $element->getElementHtml();
        $calpath = $baseURL . 'pub/media/systemcalendar/';
        if (!$this->_coreRegistry->registry('datepicker_loaded')) {
            $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>';
            $this->_coreRegistry->registry('datepicker_loaded', 1);
        }
        $html .= '<script type="text/javascript">
            require(["jquery", "jquery/ui"], function () {
                jQuery(document).ready(function () {
                    jQuery("#' . $element->getHtmlId() . '").datepicker( { dateFormat: "dd/mm/yy" } );
                        
                    var el = document.getElementById("' . $element->getHtmlId() . '");
                    el.className = el.className + " datepicker";
                });
            });
            </script>';
        return $html;
    }

}

Lets discuss some terms used in this block.
Hiddentechies – Vendor Name
SytemCalendar – Module Name
calendar.png – add calendar icon image at pub/media/systemcalendar/ directory

Thats it.

Team HiddenTechies

Write an article about ecommerce that help people to grow their ecommerce business. You’ll find best ecommerce guide, news, tips & more!