Magento 2 Tutorials

How to Add Date & Time Picker in Magento 2 Configuration with Custom Format?

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 4.50 out of 5)
Loading...Loading...
How to Add Date & Time Picker in Magento 2 Configuration with Custom Format

Today, we’re going to teach you guys how to add a date picker in Magento 2 configuration with a custom format.

Date & time pickers are useful when it is required to pick a date and time for a specific scheduled event. In addition, date & time pickers not only minimize the typing errors but also help to standardize both the date as well as time format.

As a result, it drastically improves the user experience of your Magento 2 store by simplifying the selection instead of manual input through the keyboard.

In this post, we will show you exactly how you can add date and time picker in Magento 2 store configuration with a custom format.

Step-by-Step Process to Add Date & Time Picker in Magento 2 Configuration with Custom Format

By default, Magento 2 allows store owners to display date and time with a default format. But if you want to display date and time in a custom format, then you can easily do so with the help of the below-given step-by-step process.

With that being said, let’s dive right in!

Step 1 

First of all, you need to create a system.xml file in the app\Code\Vendor\Extension\etc\adminhtml directory and copy the below code.

<?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="customtab" translate="label" sortOrder="100">
            <label>Custom Tab</label>
        </tab>
        <section id="datetimesection" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
            <class>separator-top</class>
            <label>Custom Date Time</label>
            <tab>customtab</tab>
            <resource>Vendor_Extension::config_extension</resource>
            <group id="datetimegroup" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Configuration</label>
                 <field id="customdate" translate="label" type="date" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Customized Date Field</label>
                    <frontend_model>Vendor\Extension\Block\Adminhtml\Date</frontend_model>
                </field>
            </group>
        </section>
    </system>
</config>

Step 2 

After that, you need to create a Date.php file in the app\Code\Vendor\Extension\Block\Adminhtml directory and copy the below code. 

<?php
namespace Vendor\Extension\Block\Adminhtml;
class Date extends \Magento\Config\Block\System\Config\Form\Field
{
    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 your need
        return parent::render($element);
    }
}

Step 3

After creating both files and the code is copied as shown in step #1 and step #2, it’s time to flush the code by executing the below command.

php bin/magento cache:flush

Once you’re done with flushing the cache, go to your admin panel and you’ll be able to see the date and time picker with your custom format in the Magento 2 system configuration as shown in the screenshot below.

Custom Date Time Configuration Magento 2

Concluding Thoughts…

And it’s done! This is how you can add date & time picker in Magneto 2 configuration with a custom format.

We hope that you found this post helpful. If you have any doubts, please ask them in the comments below.

And if you need our professional help, feel free to contact us at any time.

You may also like
Become Magento Developer
Make your mark in the Magento Community!
How to Import, Export, and Edit Tax Rates in Magento 2
How to Import, Export, and Edit Tax Rates in Magento 2?

Leave Your Comment

Your Comment*

Your Name*