How to add date picker to Magento admin backend page?

To add Date Picker to Magento admin backend configuration page. There is no direct model that can be called to add the date picker. However, these simple steps will allow you to add the date picker to back-end of your Magento site.

Step 1.

Edit system.xml, create the new field as follows:

<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>

 

 

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

    }

}