Magento 2 – How to Add Date Picker Field in System Configuration

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 – 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">
    <system>
        <tab id="mymoduletab" translate="label" sortOrder="50">
            <label>Ht Mymodule</label>
        </tab>
        <section id="mymodulesection" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Configuration</label>
            <tab>mymoduletab</tab>
            <resource>Ht_Mymodule::configuration</resource>
            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>General</label>
                <field id="date_field" translate="label comment" sortOrder="1" type="text" showInDefault="1" showInStore="1" >
                    <label>Date</label>
                    <frontend_model>Ht\Mymodule\Block\DatePicker</frontend_model>
                </field>
            </group>
        </section>
    </system>
</config>

Now we have added “Ht\Mymodule\Block\DatePicker” as frontend model. So now we are going to create DatePicker class in file DatePicker.php

File Path: app/code/Ht/Mymodule/Block/DatePicker.php

<?php

namespace Ht\Mymodule\Block;

class DatePicker extends \Magento\Config\Block\System\Config\Form\Field
{
    protected $_coreRegistry;

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

    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element) 
    {
        $html = $element->getElementHtml();
        if (!$this->_coreRegistry->registry('datepicker_loaded')) {
            $this->_coreRegistry->registry('datepicker_loaded', 1);
        }
        $html .= '<button type="button" class="custom-ui-datepicker-trigger"><span>Select Date</span></button>';
        
        $html .= '<script type="text/javascript">
            require(["jquery", "jquery/ui"], function (jq) {
                jq(document).ready(function () {
                    jq("#' . $element->getHtmlId() . '").datepicker( { dateFormat: "dd/mm/yy" } );
                    jq(".custom-ui-datepicker-trigger").removeAttr("style");
                    jq(".custom-ui-datepicker-trigger").click(function(){
                        jq("#' . $element->getHtmlId() . '").focus();
                    });
                });
            });
            </script>';
        $html .= '<style>
            .custom-ui-datepicker-trigger {
                background-image: none;
                background: 0 0;
                -moz-box-sizing: content-box;
                border: 0;
                box-shadow: none;
                line-height: inherit;
                margin: 0;
                padding: 0;
                text-shadow: none;
                font-weight: 400;
                text-decoration: none;
                display: inline-block;
                vertical-align: middle;
                position: relative;
            }
            .custom-ui-datepicker-trigger::after {
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                font-size: 42px;
                line-height: 30px;
                color: #514943;
                content: "\e612";
                font-family: "icons-blank-theme";
                vertical-align: middle;
                display: inline-block;
                font-weight: 400;
                overflow: hidden;
                speak: none;
                text-align: center;
                position: absolute;
                top: -17px;
                right: 0;
            }
            .custom-ui-datepicker-trigger > span {
                border: 0;
                clip: rect(0,0,0,0);
                height: 1px;
                margin: -1px;
                overflow: hidden;
                padding: 0;
                position: absolute;
                width: 1px;
            }
            </style>';
        return $html;
    }
}

Team HiddenTechies

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