Wednesday, May 15, 2013

How to Add Date Picker in Magento Config Page

5/15/2013

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();
    }
}

Written by

Arvind is a web developer, programmer and blogger. He has expertise in PHP, Magento, WordPress, jQuery, JavaScript, HTML5 and CSS3. He loves to develop good looking websites with strong backend.

1 comments :

  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.

    ReplyDelete

We would love to hear from you...

 

© 2014 Web Speaks . All rights resevered. Designed by Templateism