Zend Framework and JQuery: JQuery Date Picker

Nearly two months back I used dojo calendar in my application. Although dojo has extremely large library and provide very nice widgets like number spinner, horizontal scroller and more importantly gird, however the current calendar available is not good looking and provide only basic functionality. We were using JACS calendar before using dojo calendar in our application.

After working for a bit of time with dojo calendar we feel that we need JACS type calendar. We were looking for the latest dojo release for getting calendar with more functionality.

Today I find JQuery Date picker, which is similar to the JACS. As Zend Framework latest version now provide JQuery View helper and Form elements, so I decided to write article on it, so that developers using JQuery may find some useful information.

So lets look how to develop a nice and cool JQuery date picker.

At the end of this article we will have a calendar like the following.

First of all download the latest version of Zend framework and placed “ZendX” folder in the library/ directory. The same library/ directory where your Zend folder reside.

Now to create the above calendar we will first need to write the following code in our bootstrap file.

$view= new Zend_View();

$viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer();

$view->addHelperPath(’ZendX/JQuery/View/Helper/’, ‘ZendX_JQuery_View_Helper’);

$viewRenderer->setView($view);

Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);

Here we are initializing our Zend_View object (don’t initialize it if you have already done in bootstrap file).

Next we initialize Zend_Cotroller_Action_Helper_ViewRendere object and add helper path.

At the end we set view to viewRenderer and add helper to the Zend_Controller_Action_HelperBroker.

That’s it we have now setup our environment.

Next we enable JQuery in our layout file as

$this->jQuery()->setLocalPath('http://localhost/zend/js/jquery/jquery-1.2.6.js')

               ->addStylesheet('http://localhost/zend/js/jquery/themes/ui.datepicker.css');
echo $this->jQuery();

we are setting path to the jquery js file and datepicker css file.
Next in the view template file

Pick your Date: <?= $this->datePicker("dp1",
                            '',
                        array('defaultDate' => date('Y/m/d', time()))); ?>

That’s it. Nice and beautiful JQuery data picker.

Cheers.