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

thanks 🙂
4 comments
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?