Adding Jquery Datepicker in a Zend form - zend-framework

Question

Im new to Zend framework, i would like to know how to add a date picker jquery widget to a zend_form I googled extensively but could not find anything precise
Kindly help me out. Thanks in advance!
Following is my Zend_form code
Form code
<?php
class Application_Form_Matriregistrationform extends Zend_Form
{
public $elementDecorators = array(
'ViewHelper',
'Errors',
array(array('data' => 'HtmlTag'), array('tag' => 'td', 'class' => 'element')),
array('Label', array('tag' => 'td')),
array(array('row' => 'HtmlTag'), array('tag' => 'tr')),
);
public $buttonDecorators = array(
'ViewHelper',
array(array('data' => 'HtmlTag'), array('tag' => 'td', 'class' => 'element')),
array(array('label' => 'HtmlTag'), array('tag' => 'td', 'placement' => 'prepend')),
array(array('row' => 'HtmlTag'), array('tag' => 'tr')),
);
public function init()
{
$this->setAction('/matri/public/matri/matri')
->setMethod('post');
$id = $this->addElement('hidden', 'id', array(
'decorators' => $this->elementDecorators,
));
$email = new Zend_Form_Element_Text('username');
$email->setLabel('Username')
->addFilter('StringToLower')
->setRequired(true)
->addValidator('NotEmpty', true)
->addValidator('EmailAddress')
->setDecorators($this->elementDecorators);
$this->addElement($email);
$password = new Zend_Form_Element_Password('password');
$password->setLabel('Password:')
->setRequired(true)
->setDecorators($this->elementDecorators);
$this->addElement($password);
$confpassword = new Zend_Form_Element_Password('confpassword');
$confpassword->setLabel('Confirm Password:')
->setRequired(true)
->setDecorators($this->elementDecorators)
->addValidator(new Zend_Validate_Identical($_POST['password']));
$this->addElement($confpassword);
$name = $this->addElement('text', 'firstname', array(
'decorators' => $this->elementDecorators,
'label' => 'Name:',
));
$this->addElement('datePicker','movie_release_date', array(
'label' => 'Release Date:',
'required'=> false
)
);
$gender2 = new Zend_Form_Element_Radio('gender');
$gender2->setSeparator('')
->setLabel('Gender:')
->setRequired(true)
->addMultiOption('m', 'Male')
->addMultiOption('f', 'Female')
->setDecorators($this->elementDecorators);
$this->addElement($gender2);
$DOB = $this->addElement('text', 'DOB', array(
'decorators' => $this->elementDecorators,
'label' =>'Date of Birth:',
));
$religion = $this->addElement('text', 'religion', array(
'decorators' => $this->elementDecorators,
'label' =>'Religion:',
));
$mothertongue = $this->addElement('text', 'mothertongue', array(
'decorators' => $this->elementDecorators,
'label' =>'Mother Tongue:',
));
$country = $this->addElement('text', 'country', array(
'decorators' => $this->elementDecorators,
'label' =>'Country:',
));
$maritalstatus = $this->addElement('text', 'maritalstatus', array(
'decorators' => $this->elementDecorators,
'label' =>'Marital Status:',
));
$height = $this->addElement('text', 'height', array(
'decorators' => $this->elementDecorators,
'label' =>'Height:',
));
$caste = $this->addElement('text', 'caste', array(
'decorators' => $this->elementDecorators,
'label' =>'Caste:',
));
$smoke = $this->addElement('text', 'smoke', array(
'decorators' => $this->elementDecorators,
'label' =>'Smoke:',
));
$smoke = new Zend_Form_Element_Radio('smoke');
$smoke->setSeparator('')
->setLabel('Smoke:')
->setRequired(true)
->addMultiOption('yes', 'Yes')
->addMultiOption('no', 'No')
->setDecorators($this->elementDecorators);
$this->addElement($smoke);
$drink = new Zend_Form_Element_Radio('drink');
$drink->setSeparator('')
->setLabel('Drink:')
->setRequired(true)
->addMultiOption('yes', 'Yes')
->addMultiOption('no', 'No')
->setDecorators($this->elementDecorators);
$this->addElement($drink);
$diet = new Zend_Form_Element_Radio('diet');
$diet->setSeparator('')
->setLabel('diet:')
->setRequired(true)
->addMultiOption('yes', 'Yes')
->addMultiOption('no', 'No')
->setDecorators($this->elementDecorators);
$this->addElement($diet);
$country = $this->addElement('text', 'country', array(
'decorators' => $this->elementDecorators,
'label' =>'Country:',
));
$state = $this->addElement('text', 'state', array(
'decorators' => $this->elementDecorators,
'label' =>'State of Residence:',
));
$city = $this->addElement('text', 'city', array(
'decorators' => $this->elementDecorators,
'label' =>'City of Residence:',
));
$submit = new Zend_Form_Element_Submit('submit');
$submit->setAttrib('id', 'submitbutton')
->setDecorators($this->buttonDecorators);
$this->addElement($submit);
//$this->addElements(array($id, $username, $firstname, $lastname, $submit));
}
public function loadDefaultDecorators()
{
$this->setDecorators(array(
'FormElements',
array('HtmlTag', array('tag' => 'table')),
'Form',
));
}
}
Form action code
public function matriAction()
{
// $this->_helper->layout->disableLayout();
$form = new Application_Form_Matriregistrationform();
$form->submit->setLabel('Profile Registration');
if ($this->_request->isPost()) {
$formData = $this->_request->getPost();
if ($form->isValid($formData)) {
echo 'Form Successfully sumbitted!';
exit;
} else {
$form->populate($formData);
}
}
$this->view->form = $form;
}

Answer 1

One way would be to use ZendX_jQuery. The other way would be to do it manually as you would do it for any other form.
For the manual way you need to include jquery and jquery-ui in your HTML's head tag, e.g.
<?php echo $this->headLink()->appendStylesheet($this->baseUrl('/css/smoothness/jquery-ui-1.8.7.custom.css')); ?>
<?php echo $this->headScript()->appendFile($this->baseUrl('/js/jquery-1.4.4.min.js')); ?>
<?php echo $this->headScript()->appendFile($this->baseUrl('/js/jquery-ui-1.8.7.custom.min.js')); ?>
Then you could add the following JavaScript to your html:
$(document).ready(function () {
/* assuming that text input datePicker would have id='datePicker' */
$( "#datePicker" ).datepicker({ dateFormat: 'dd/mm/yy' });
});
First, however, I would recommend having look at ZendX_jQuery. The reason I provided an example of the manual way is that I haven't yet tried doing it using ZendX_jQuery.

Answer 2

If you want to use ZendX follow this easy steps:
Download the Full Zend Framework library, and copy Zendx from "extras" Folder to your library Folder.
Add this to your application.ini to use ZendX:
pluginPaths.ZendX_Application_Resource = "ZendX/Application/Resource"
To use JQuery UI, you can fetch it from google cdn by adding this lines to your application.ini
resources.jquery.version = 1.4.1
resources.jquery.ui_enable = true
resources.jquery.ui_version = 1.8.4
resources.jquery.stylesheet = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css"
And now just add an Datepicker inside your Zend Form Class:
$birthdate = new ZendX_JQuery_Form_Element_DatePicker('birthdate');
$birthdate->setLabel('Geburtsdatum:')
->setJQueryParam('dateFormat', 'dd.mm.yy')
->setJQueryParam('changeYear', 'true')
->setJqueryParam('changeMonth', 'true')
->setJqueryParam('regional', 'de')
->setJqueryParam('yearRange', "1980:2000")
->setDescription('dd.mm.yyyy')
->addValidator(new Zend_Validate_Date(
array(
'format' => 'dd.mm.yyyy',
)))
->setRequired(true);
$this->addElement($birthdate);

Answer 3

$this->addElement('datePicker','movie_release_date', array(
'label' => 'Release Date:',
'required'=> false,
'class' => 'datepicker'
)
);
You need to add a class to the datePicker field in order for jquery to hook up to it. I'm not sure if my example above is correct as I usually use the following setAttrib method as follows.
$datePicker = new Zend_Form_Element_Text('datePicker');
$datePicker->setAttrib('class', 'datePicker')
->setRequired( true );