Reading list Switch to dark mode

    Add Date Picker in Magento2 Configuration Section Using system.xml

    Updated 20 February 2024

    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="date" 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);
        }
    
        public function render(\Magento\Framework\Data\Form\Element\AbstractElement $element)
        {
            $element->setDateFormat("dd/mm/yy"); //set date as per requirment
            return parent::render($element);
        }
    }

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

    Searching for an experienced
    Magento Company ?
    Find out More
    datepicker

    thanks 🙂

    . . .

    Leave a Comment

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


    4 comments

  • Crest Design
    • Webkul Support
  • Michele Fantetti
  • yogesh
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home