Magento 2 Blog • December 20, 2023

How to Add Date and Time Picker in system.xml Configuration in Magento 2

Hello Everyone,

In this blog, we will learn about how to Add Date and Time Pickers in system.xml in Magento 2.

Without wasting your time, let us guide you straight away. Follow the easy step given below to Add Date and Time Picker in System Configuration in Magento 2.

STEPS FOR ADD DATE AND TIME PICKER IN MAGENTO 2

Step 1: Create system.xml file

app/code/Vendor/Extension/etc/adminhtml/system.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="magecurious" class="magecurious" translate="label" sortOrder="10">
            <label>Magecurious</label>
        </tab>
        <section id="extension" translate="label" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
            <class>separator-top</class>
            <label>Magecurious</label>
            <tab>magecurious</tab>
            <resource>Vendor_Extension::config_extension</resource>
            <group id="general" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>General Configuration</label>
                <field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enable Extension</label>
                 <source_model>Magento\Config\Model\Config\Source\Enabledisable</source_model>
                </field>
<field id="vendor_datetime" translate="label" type="date" showInDefault="1" showInWebsite="1" showInStore="1" sortOrder="1">
            <label>Date Time</label>
         <frontend_model>Vendor\Extension\Block\Adminhtml\DateTime</frontend_model>
        </field>
            </group>
        </section>
    </system>
</config>

Step 2: Create DateTime.php file

app/code/Vendor/Extension/Block/Adminhtml/DateTime.php

<?php
 
namespace Vendor\Extension\Block\Adminhtml;
 
use Magento\Framework\Registry;
use Magento\Backend\Block\Template\Context;
 
class DateTime extends \Magento\Config\Block\System\Config\Form\Field
{
    protected $_coreRegistry;
    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(\Magento\Framework\Stdlib\DateTime::DATE_INTERNAL_FORMAT);
        $element->setTimeFormat("HH:mm:ss"); //set date and time as per requirement
        return parent::render($element);
    }
}

Step 3: Finally run the below commands

$ php bin/magento cache:clean
$ php bin/magento cache:flush

Step 4: Output:

Final Thoughts:

So this was the easiest way which we have told you in this blog. This is how you can Add Date Time Picker in the system.xml configuration file in Magento 2. Hope you liked the blog.

So quickly go to the comment box and tell me how you like this blog?

Stay tuned with us on our site to get new updates of Magento.

Thanks for reading and visiting our site.