Adding Jquery Datepicker in a Zend form

zend-formzend-framework

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;




    }

Best Answer

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.

Related Topic