Sometimes Magento Store owners require setting date and time in Magento backend to show countdown timer in frontend or run a cron on a specific frequency. Recently, while working on a custom development project, we came across with a requirement to add custom date and time picker in the Magento admin configuration page that let store owners easily pick their convenient date and time and making selections as per need. There is no direct method that can be called to add the date picker in Magento. Here, I’m sharing simple code to fulfill the requirement.
To add date & time picker, first of all you need to create date.php file at following location in your custom extension
[Vendor]\[ModuleName]\ Block\Adminhtml\System\Config
After creating file, you need to add the following code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!--?php class [Vendor]\[ModuleName]\ 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_MEDIUM); $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_MEDIUM)); $date->setClass($element->getFieldConfig()->validate->asArray()); $date->setForm($element->getForm()); return $date->getElementHtml(); } } ?--> |
As shown above, there are four different types of format exists that you can use as per your convenience in Magento.
- FORMAT_TYPE_FULL –> Friday, March 17, 2017 11:59:10 AM Europe/Helsinki
- FORMAT_TYPE_LONG –> March 17, 2017 11:59:10 AM EET
- FORMAT_TYPE_MEDIUM –> Mar 17, 2017 11:59:10 AM
- FORMAT_TYPE_SHORT –> 3/17/2017 11:59 AM
Once you have created date.php file, you have to add below code in System.xml file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<label>Offer Start Date</label> notificationbar/adminhtml_system_config_date 150 1 1 1 <label>Offer Start Time</label> time 152 1 1 1 |
Once you add both the code in the right place, refresh your admin configuration page and your date picker will start displaying at the position you have placed. Simply change the code according to your requirements and test again. I hope this code has helped you! Rate the blog and comment down below if you are looking for any help regarding this code.
Cheers!
