How to Add Date Picker in Magento Config Page

Sometimes you may want to add date picker in the Magento admin configuration page. There is no direct model that can be called to add the date picker. However there is an easy workaround. Just follow these simple steps and add the date picker. You can find this implementation working in my new Magento extension Featurise.

1. In your system.xml, create the new field as:

<my_date translate="label comment">
 <label>Expire On</label>
 <frontend_type>text</frontend_type> <!-- Set the frontend type as Text -->
 <frontend_model>MODULE_NAME/adminhtml_system_config_date</frontend_model> <!-- Specify our custom model -->
 <sort_order>4</sort_order>
 <show_in_default>1</show_in_default>
 <show_in_website>1</show_in_website>
 <show_in_store>1</show_in_store>
 <comment>Set the expiry date for the Feature Tour</comment>
</my_date>

2. Create the new model file at the path: app\code\local\<NAMESPACE>\<MODULE>\Block\Adminhtml\System\Config\Date.php

<?php
class Arvtour_Tour_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->setForm($element->getForm());

        return $date->getElementHtml();
    }
}