Magento Adminhtml – Date Picker on Custom Page (Non-Form)

adminformadminhtmldate

I'd like to add a date picker to a custom input field on a .phtml. file which is loaded by Block reference, i.e:

Controller

public function indexAction()
{
    $this->loadLayout();
    $this->getLayout()->getBlock('head')->setTitle('Title'); 
    $this->_setActiveMenu('namespace/module');
    $this->_addContent($this->getLayout()->createBlock('namespace/adminhtml_module'));
    $this->renderLayout();

}

Block

public function __construct()
{
    parent::__construct();
    $this->setTemplate('namespace/page.phtml');
}

Which forwards to: app/design/adminhtml/default/default/template/namespace/page.phtml.

Now that the forwarding is set up, I can design whichever kind of layout I'd like to on that page. i.e:

<div>Enter the date here:</div>
<input name='date' id='date'></input>

I'd like to know how I can reference Magento's date picker which it uses on form elements, i.e:

$fieldset->addField('date', 'date', array(
'name'               => 'date'
'label'              => Mage::helper('your_module_name')->__('Date'),
'after_element_html' => '<small>Comments</small>',
'tabindex'           => 1,
'image'              => $this->getSkinUrl('images/grid-cal.gif'),
'format'             => Mage::app()->getLocale()->getDateFormat(Mage_Core_Model_Locale::FORMAT_TYPE_SHORT) ,
'value'              => date( Mage::app()->getLocale()->getDateStrFormat(Mage_Core_Model_Locale::FORMAT_TYPE_SHORT),
                              strtotime('next weekday') )
));

Any input would be much appreciated.

Best Answer

So date fields are added using Varien_Data_Form_Element_Date. What you could do would be to look into this file and check the function getElementHtml this is where the "magic" happens.

You should be able to call something like new Varien_Data_Form_Element_Date($config) where $config is the array used on the call to addElement.

Note this is untested but "should" work

$element = new Varien_Data_Form_Element_Date(
    array(
        'name' => 'date',
        'label' => Mage::helper('your_module_name')->__('Date'),
        'after_element_html' => '<small>Comments</small>',
        'tabindex' => 1,
        'image' => $this->getSkinUrl('images/grid-cal.gif'),
        'format' => Mage::app()->getLocale()->getDateFormat(Mage_Core_Model_Locale::FORMAT_TYPE_SHORT),
        'value' => date(
            Mage::app()->getLocale()->getDateStrFormat(Mage_Core_Model_Locale::FORMAT_TYPE_SHORT),
            strtotime('next weekday')
        )
    )
);
$element->setId('date');
$element->getElementHtml(); // this should now give you all the html that you could need
Related Topic