Magento's System configuration supports many types of fields such as 'label', 'multiselect', 'text', 'textarea', etc. Unfortunately there is no field for date. In this tutorial I am going to show you how to create a nice looking form field with Magento's own Calendar Date picker which really works.
This tutorial assumes that You do have previous knowledge how the configuration fields are being defined in the system.xml file. You need to knwo what is system.xml file and what <frontend_type> definition means. If You do not have such knowledge, then work thru Alan Storm's Article on Magento system.xml details.
You need to create the following files:
- Create a class that displays the Date picker form field - Eabi_Acme_Input_Date_Picker
- Create a class that is called, when the field is saved - Eabi_Acme_input_Date_Savehelper_Cron
Sample XML fragment from system.xml to define a field named "created_date"
<created_date translate="label">
<label>Created Date</label>
<frontend_type>text</frontend_type>
<frontend_model>eabi_acme_input_date_picker</frontend_model>
<backend_model>eabi_acme_input_date_savehelper_cron</backend_model>
<sort_order>1</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>0</show_in_website>
<show_in_store>0</show_in_store>
</created_date>
Notice here the <frontend_model /> and the <backend_model /> definitions.
<frontend_model /> is the class that is used to display the input field, in here we extend the Mage_Adminhtml_Block_System_Config_Form_Field class and override _getElementHtml method:
<?php
class Eabi_Acme_Input_Date_Picker
extends Mage_Adminhtml_Block_System_Config_Form_Field {
protected function _getElementHtml(Varien_Data_Form_Element_Abstract $element)
{
$res = '';
$divId = $element->getId();
$res .= <<<EOD
<input name="{$element->getName()}" id="{$divId}_date" value="{$element->getValue()}" type="text" style="width:110px !important;" /> <img src="{$this->getSkinUrl('images/grid-cal.gif')}" alt="" id="{$divId}_date_trig" title="{$this->__('Select Date')}" style="" />
<script type="text/javascript">
//<![CDATA[
//this example uses dd.MM.yyyy hh:mm format.
Calendar.setup({
inputField: "{$divId}_date",
ifFormat: "%d.%m.%Y %H:%M",
showsTime: true,
firstDay: 1,
timeFormat: "24",
button: "{$divId}_date_trig",
align: "Bl",
singleClick : true
});
//]]>
</script>
EOD;
return $res;
}
}
If you are happy with the dateformat that the class above provides, then you do not need to write the handler class, which is called right after the configuration is being saved. Then you can leave out <backend_model /> definition from system.xml, but I am going to provide you with the handler class anyway.
I am going to override class Mage_Core_Model_Config_Data and use methods _beforeSave() and _afterSave()
<?php
class Eabi_Acme_Input_Date_Savehelper_Cron
extends Mage_Core_Model_Config_Data {
public function _beforeSave() {
//in here we insert the code to manipulate with date format
//this part of the code is executed right before the configuration is saved
}
public function _afterSave() {
}
}
That's about it, as a result you should have nice looking reusable datepicker field code for Magento System Configuration, which looks like this: 
