Wednesday, July 1, 2009

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.

21 comments:

  1. Soumyadyuti PaulJuly 2, 2009 at 2:37 AM

    Hi,
    I followed the same process as you have suggested I am getting an error "Method 'JQuery' does not exist and was not trapped in _call()". Please help.

    ReplyDelete
    Replies
    1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training in Chennai . or learn thru JQuery Training . or learn thru ES6 Online Training. Nowadays JavaScript has tons of job opportunities on various vertical industry.

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Please download latest version of zend framework and copy ZendX/ directory from your downloaded folder/extras/ to your library/ directory.
    This may help you out.

    ReplyDelete
  4. Hi
    i get the error Message: Plugin by name 'DatePicker' was not found in the registry; used paths: Zend_View_Helper_: Zend/View/Helper/:./views/helpers/:/var/www/html/cpflead/application/views/helpers/


    please help me.

    ReplyDelete
  5. Hi,

    Please, could you put the application'structure and where have to put the scripts?

    ReplyDelete
  6. Hi,
    all is done well but only text box is display there, calendar not display when i click on that text box

    ReplyDelete
  7. if the date picker calendar that pops up looks unstyled (i.e. the colors, font etc look really ugly, no background just text), the issue may be permissions. i changed the permissions on the public folder using the command

    "sudo chown -R www-data:www-data public/"

    and it worked great! just in case....

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. Fatal error: Uncaught exception 'Zend_Loader_PluginLoader_Exception' with message 'Plugin by name 'JQuery' was not found in the registry; used paths: Zend_View_Helper_: Zend/View/Helper/;C:/xampp/htdocs/HUBINAR_VIJAYA/application/views\helpers/' in C:\xampp\htdocs\HUBINAR_VIJAYA\library\Zend\Loader\PluginLoader.php:406 Stack trace: #0 C:\xampp\htdocs\HUBINAR_VIJAYA\library\Zend\View\Abstract.php(1170): Zend_Loader_PluginLoader->load('JQuery') #1 C:\xampp\htdocs\HUBINAR_VIJAYA\library\Zend\View\Abstract.php(610): Zend_View_Abstract->_getPlugin('helper', 'jQuery') #2 C:\xampp\htdocs\HUBINAR_VIJAYA\library\Zend\View\Abstract.php(336): Zend_View_Abstract->getHelper('jQuery') #3 [internal function]: Zend_View_Abstract->__call('jQuery', Array) #4 C:\xampp\htdocs\HUBINAR_VIJAYA\application\layouts\scripts\layout.phtml(29): Zend_View->jQuery() #5 C:\xampp\htdocs\HUBINAR_VIJAYA\library\Zend\View.php(108): include('C:\xampp\htdocs...') #6 C:\xampp\htdocs\HUBINAR_VIJAYA\library\Zend\View\Abstract.php(880): Zend_View->_run('C:\xampp\ in C:\xampp\htdocs\HUBINAR_VIJAYA\library\Zend\Loader\PluginLoader.php on line 406

    I m getting this error please can u tel me the solution for this prob

    ReplyDelete
  10. You are zendguru?

    Why you put all the tutorial that doesn't work and not with working example? Thinking we are coming from pure PHP.

    Doesn't helped any examples, just idea you gave, but not working.

    Thank you

    ReplyDelete
  11. Hello Friends,

    How can i include time with this calendar plugin?

    Please help me out if anyone have solution or clue..

    Thanks a lot..

    ReplyDelete
  12. Hi man,
    I tried out your instructions.
    Its not working...
    could you please help me..
    how to use jquery datepickers.

    thanks

    ReplyDelete
  13. A zip file could be helpful...

    ReplyDelete
  14. Plugin by name 'JQuery' was not found in the registry; used paths: ZendX_JQuery_View_Helper_: ZendX/JQuery/View/Helper/ Zend_View_Helper_: Zend/View/Helper/:./views/helpers/:/var/www/zc/application/views/helpers/ in /var/www/zc/library/Zend/Loader/PluginLoader.php on line 412 Call Stack: 0.0002 334120 1. {main}() /var/www/zc/public/index.php:0 0.0303 2881056 2. Zend_Application->run() /var/www/zc/public/index.php:26 0.0303 2881056 3. Zend_Application_Bootstrap_Bootstrap->run() /var/www/zc/library/Zend/Application.php:366 0.0304 2881128 4. Zend_Controller_Front->dispatch() /var/www/zc/library/Zend/Application/Bootstrap/Bootstrap.php:97

    ReplyDelete
  15. am getting this type of errror wn i executed abv code help me


    Plugin by name 'JQuery' was not found in the registry; used paths: ZendX_JQuery_View_Helper_: ZendX/JQuery/View/Helper/ Zend_View_Helper_: Zend/View/Helper/:./views/helpers/:/var/www/zc/application/views/helpers/ in /var/www/zc/library/Zend/Loader/PluginLoader.php on line 412 Call Stack: 0.0002 334120 1. {main}() /var/www/zc/public/index.php:0 0.0303 2881056 2. Zend_Application->run() /var/www/zc/public/index.php:26 0.0303 2881056 3. Zend_Application_Bootstrap_Bootstrap->run() /var/www/zc/library/Zend/Application.php:366 0.0304 2881128 4. Zend_Controller_Front->dispatch() /var/www/zc/library/Zend/Application/Bootstrap/Bootstrap.php:97

    ReplyDelete
  16. Plugin by name 'DatePicker' was not found in the registry; used paths: ZendX_JQuery_View_Helper_: ZendX/JQuery/View/Helper/ Zend_View_Helper_: Zend/View/Helper/:/var/www/html/vikas/application/views/helpers/
    i am getting that error msg plz help me out

    ReplyDelete
  17. Hello is there more code? thanks.

    ReplyDelete
  18. I have implemented date picker in .phtml but when i click on date picker textbox popbox of date doesn't open.I am used ZendX/JQuery/ library so any can solved my problem....

    ReplyDelete
  19. I have also used this example but only textbox is display popup not display..so please solved my problem..

    ReplyDelete
  20. please don't skip the steps, I'm new to zend and I don't understand what you did after setting up the bootstrap file :(

    ReplyDelete