Add a date picker to system.xml on custom module

Question

As stated in the subject, I am trying to add a date field with its date picker in the System > Configuration area for a custom module (thus using etc/system.xml).

I tried to get inspiration from the thread below : Magento - Add a button to system.xml with method attached to it

but no success.

I'm sure this is a question of creating the right block or method to create a custom html field but I cannot read thru the Magento Matrix :)

I am stuck at the step where I need to code the class (Datefield.php):

    <?php
            class Namespace_Module_Block_Datefield extends Mage_Adminhtml_Block_System_Config_Form_Field {

             protected function _getElementHtml(Varien_Data_Form_Element_Abstract $element) {
    // ----> Am I wrong in calling ..._Abstract?  Should I call Varien_Data_Form_Element_Date? I've tried but no success either...

$this->setElement($element);

              $html = // ------------------> what to put here? Call a block or some other method?
                      ->setFormat('d-m-Y')
                      ->setLabel($this->__('Choose date'))
                      ->toHtml();

              return $html;
             }
            }    
            ?>

Do you have a trick on how to do that ?

Thanks a lot. Hervé

Answer 1

EDIT 02/19/2014: added validation

I found what I think is a more elegant way of doing this. Actually, satrun77 methods is ok but we must place a file in Varien/Data/Form/Element/ which can be overwritten if someone else working on the project unluckily uses the same file/class name. Moreover, this method places the file in the module directories which is, I think, better than distributing files all over the directory tree.

In system.xml:

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

Create a new file :

app/code/[local, community]/Namespace/Module/Block/Adminhtml/System/Config/Date

with the content below:

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

Answer 2

Create class file in app/code/local/Varien/Data/Form/Element/. Make sure the file name is prefixed with something that identify your module (this is just to differentiate your custom code from Magneto core files)

class Varien_Data_Form_Element_MyDateSelection extends Varien_Data_Form_Element_Date
{
    public function getElementHtml()
    {
        // define image url
        $this->setImage(Mage::getDesign()->getSkinUrl('images/grid-cal.gif'));
        // define date format
        $this->setFormat('yyyy-MM-dd');

        return parent::getElementHtml();
    }
}

Inside your module system.xml

<?xml version="1.0" encoding="UTF-8"?>
   <config>
   ....
       <fields>
       ...
          <run translate="label">
           <label>Run now</label>
           <frontend_type>myDateSelection</frontend_type>
           <sort_order>20</sort_order>
           <show_in_default>1</show_in_default>
           <show_in_website>1</show_in_website>
           <show_in_store>1</show_in_store>
          </run>
       </fields>
   ...
   </config>

Placing custom code inside lib/ folder or app/Mage/Core/ folder is not the best way to create custom code for Magento. These folders are for core code and not custom code.

This approach creates the least amount of code and does not change any of the core files. So, there isn't any harm from having extra file inside the lib/ folder. But you need to remember that you have extra file for your module in the lib/.

Hope this helps