Add timepicker to system config

Question

I want to add time (hh:mm:ss) picker to admin system config using system.xml file. Is this possible to do?

Answer 1

Yes, definitely. You need to follow just a few steps to add date time picker in the configuration. I am assuming that you have created a custom module.

Create/open system.xml file under app/code/[codepool]/[NameSpace]/[Module]/etc folder. In this file, you should have a structure like this:

<?xml version="1.0" encoding="UTF-8"?>
   <config>
   ....
       <fields>
       ...
          <run translate="label">
           <label>Date</label>
           <frontend_type>text</frontend_type> <!-- Use text instead of "myDateSelection" -->
           <frontend_model>[module]/adminhtml_system_config_date</frontend_model> <!-- Call a module specific renderer model -->
           <sort_order>20</sort_order>
           <show_in_default>1</show_in_default>
           <show_in_website>1</show_in_website>
           <validate>required-entry</validate> <!-- Optional -->
           <show_in_store>1</show_in_store>
          </run>
       </fields>
   ...
   </config>

Now create a new file Date.php under app/code/[codepool]/[NameSpace]/[Module]/Block/Adminhtml/System/Config folder and paste below code:

class Namespace_Module_Block_Adminhtml_System_Config_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->setClass($element->getFieldConfig()->validate->asArray());
        $date->setForm($element->getForm());

        return $date->getElementHtml();
    }
}

Note: If you haven't defined block class yet, you first need to define block class in app/code/[codepool]/[NameSpace]/[Module]/etc/config.xml file.

Please let me know if you find any problem.

Note:

[codepool]: local/community

[NameSpace]: Your module's namespace

[Module]: Your module's name

Update: After question has been updated, for time picker, you need to add code like this in your system.xml file:

<time translate="label comment">
     <label>Time</label>
     <frontend_type>time</frontend_type>
     <sort_order>52</sort_order>
     <show_in_default>1</show_in_default>
     <show_in_website>1</show_in_website>
     <show_in_store>1</show_in_store>
</time>