Magento Adminhtml date picker on custom page (non-form)

Question

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') )
));

• Source: magento add calender date picker to custom form in admin (custom module)

Any input would be much appreciated.

Answer 1

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

Answer 2

$element should belong to Varien_Data_Form, so correct code is:

       $form = new Varien_Data_Form(array(
            'id'        => 'edit_form',
            'action'    => $this->getUrl('*/*/save'),
            'method'    => 'post'
        ));
        $element = new Varien_Data_Form_Element_Date(
            array(
                'name' => 'date',
                'label' => Mage::helper('bundle')->__('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->setForm($form);
        $element->setId('date');
        return $element->getElementHtml();