Adding Jquery Datepicker in a Zend form

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;




    }

Solution 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.

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

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

Comments

[David Weinraub]

+1 On my todo list is to figure to ZendX_jQuery. I always do it the manual way described by @Marcin.

[Vikram]

I tried the ZendX_jquery option (above one). Picker is not appearing. added my decorator to the element[->setDecorators($this->elementDecorators)] it resulted in this error. Warning: Exception caught by form: Cannot render jQuery form element without at least one decorator implementing the 'ZendX_JQuery_Form_Decorator_UiWidgetElementMarker' interface. Default decorator for this marker interface is the 'ZendX_JQuery_Form_Decorator_UiWidgetElement'. Hint: The ViewHelper decorator does not render jQuery elements correctly.

[fer sid]

Ehmm sorry you have to echo the Jquery stuff in your view/layout: "echo $this->jQuery()->enable();" But iam not sure if you can use own decorators.

[Vikram]

Best and simple solution for Jquery integration is easily explained in zendcasts.com/working-with-zendx_jquery/2010/07

[pia-sophie]

I tried your suggestion but the datepicker is not appearing. The command "echo $this->xxx" I added in my viewscript

[artsylar]

looks like ZendX_jQuery link is broken. Is it still available? Can't find it anymore.