How to add datepicker to admin panel forms

Question

Is there a predefined class, helper, etc that is to be used when creating a back-end, admin panel form? I am in the process of developing a custom module that includes several DATETIME fields and I would like to make this easier for the end-user.

Answer 1

To add a form field with date and time picker in your adminhtml block:

   $dateTimeFormatIso = Mage::app()->getLocale()->getDateTimeFormat(Mage_Core_Model_Locale::FORMAT_TYPE_SHORT);

  $fieldset->addField('date_and_time', 'datetime', array(
            'label'    => $hlp->__('Date time'),
            'title'    => $hlp->__('Date time'),
            'time'      => true,
            'name'     => 'product[date_and_time]',
            'image'    => $this->getSkinUrl('images/grid-cal.gif'),
            'format'   => $dateTimeFormatIso,
            'required' => true,
        ));

This example is a frontend model for a product attribute, but you can use the code independently of a product attribute in any admin form.

---

To create a product attribute with date and time you can use an install script like:

$installer = $this;
$setup = new Mage_Eav_Model_Entity_Setup('core_setup');
$installer->startSetup();

$setup->addAttribute('catalog_product', 'date_and_time', array(
    'group'         => 'group name',
    'input'         => 'datetime',
    'type'          => 'datetime',
    'time'          => true,
    'label'         => 'Date and time',
    'backend'       => "eav/entity_attribute_backend_time_created",
    'visible'       => true,
    'required'      => false,
    'user_defined' => true,
    'searchable' => true,
    'filterable' => false,
    'comparable'    => false,
    'visible_on_front' => true,
    'visible_in_advanced_search'  => false,
    'is_html_allowed_on_front' => false,
    'global'        => Mage_Catalog_Model_Resource_Eav_Attribute::SCOPE_GLOBAL,
));

Answer 2

For anyone else that needs it; I borrowed and modified from the CMS file app/code/core/Mage/Adminhtml/Block/Cms/Page/Edit/Tab/Design.php

$dateFormatIso = Mage::app()->getLocale()->getDateFormat(
    Mage_Core_Model_Locale::FORMAT_TYPE_SHORT
);

$fieldset->addField('start_date', 'date', array(
    'name'      => 'start_date',
    'label'     => Mage::helper('bannerslider')->__('Start Date'),
    'image'     => $this->getSkinUrl('images/grid-cal.gif'),
    'format'    => $dateFormatIso,
    'disabled'  => $isElementDisabled,
    'class'     => 'validate-date validate-date-range date-range-custom_theme-from'
));

Change field names and helpers as necessary.