Add Date Picker in Magento2 Configuration Section Using system.xml

Here we learn how to add date picker in Magento2 configuration section using system.xml

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;
    }
}

step 3# Now in your admin section you get this datepicker element as following

thanks