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: appcodelocal<NAMESPACE><MODULE>BlockAdminhtmlSystemConfigDate.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();
    }
}

Written by Arvind Bhardwaj

Arvind is a Magento and WordPress expert with more than 6 years of industry wide experience.

Website: http://www.webspeaks.in/

3 thoughts on “How to Add Date Picker in Magento Config Page

  1. hello,
    thanks for these post its really usefull but i add same code as you given above but i got an error class Mage is added before MODULE_NAME/adminhtml_system_config_date like class Mage_MODULE_NAME_…
    can you plz help me to solve these errror.

    thanks in advance.

  2. Me too got same error.. Fatal error: Class ‘Mage_Counter_Block_Adminhtml_System_Config_Date’ not found in C:xampphtdocsmagentoappcodecoreMageCoreModelLayout.php

  3. I solve the Fatal error: Class ‘Mage_Counter_Block_Adminhtml_System_Config_Date..

    Please do NAMESPACE_MODULENAME_Adminhtml_System_Config_Date in your system.xml instead of MODULE_NAME/adminhtml_system_config_date.

Comments are closed.