Menu Close
    Searching for an experienced Magento Development Company ?

    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

    datepicker

    thanks 🙂

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    4 comments

  • Crest Design
    Great Article, Thank your for sharing this information.
    • Webkul Support
      Hi Crest Design, thanks for the kind words. 🙂
  • Michele Fantetti
    Great article!
    There is a mistake:
    you have to use $this->_coreRegistry->registrer(‘datepicker_loaded’, 1); insted of $this->_coreRegistry->registry(‘datepicker_loaded’, 1);
    and in any case I don’t understand why you need this check; why do you need to register ‘datepicker_loaded’ variable?
    Could you explain this choise?
  • yogesh
    What if i want to have a date-picker in my front-end custom form for DOB field.
  • Back to Top