Read More
Read More
Menu Close

    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="" xsi:noNamespaceSchemaLocation="../../../Config/etc/system_file.xsd">
            <section id="yoursectionid" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Custom Label</label>
                <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-->
                    <!-- date picker field code end-->

    step #2 : Now we create DatePicker class in file DatePicker.php  at app/code/NameSpace/ModuleName/Block/ folder where we create date picker element

    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("#' . $element->getHtmlId() . '").focus();
            // return datepicker element
            return $html;

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

    Searching for an experienced
    Magento Company ?
    Read More


    thanks 🙂

    . . .
    Discuss on Helpdesk

    Leave a Comment

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


  • 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