How to Add Date and Time Picker in Magento Configuration

The store owner may want to add date and time picker in Magento store to provide admin with some settings related to date and time selection. There is no direct method to call and make use of. But not to worry as I have come up with a custom code that needs to be implemented directly to Add Date and Time Picker in Magento Configuration.

Steps to Add Date and Time Picker in Magento Configuration:

Step 1: Open system.xml and implement the below code.

<fromdate translate="label">
    <label>Display From</label>
    <frontend_type>text</frontend_type>
    <sort_order>10</sort_order>
    <show_in_default>1</show_in_default>
    <show_in_website>1</show_in_website>
    <show_in_store>1</show_in_store>
    <frontend_model>extension/adminhtml_date</frontend_model>
 </fromdate>

Step 2: Create Date.php file at Block/Adminhtml/ Directory

<?php

class Vendor_Extension_Block_Adminhtml_Date extends Mage_Adminhtml_Block_System_Config_Form_Field

{

    protected function _getElementHtml(Varien_Data_Form_Element_Abstract $element)

    {

        $date = new Varien_Data_Form_Element_Date();

        $format = Mage::app()->getLocale()->getDateFormat(Mage_Core_Model_Locale::FORMAT_TYPE_SHORT);

        $data = array(

            'name'      => $element->getName(),

            'html_id'   => $element->getId(),

            'image'     => $this->getSkinUrl('images/grid-cal.gif'),

        );

        $date->setData($data);

        $date->setValue($element->getValue(), $format);

        $date->setFormat(Mage::app()->getLocale()->getDateFormat(Mage_Core_Model_Locale::FORMAT_TYPE_SHORT));

        $date->setForm($element->getForm());

        return $date->getElementHtml();

    }

}

Once the code is implemented correctly, refresh the admin configuration page and check for the output. You’ll find the date picker at the desired position. You can also add Color Picker in Magento 2. Adding a color picker enhances the user experience by allowing intuitive and precise color selection for product attributes or admin configurations

Thanks for reading the post. Also you can import csv in Magento Configuration to provide admin with some settings related to it.