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.

25 comments:

  1. 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
  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
  21. Hi,

    good information

    Web application development services will successfully change the execution of your online business So, hire our skilled Ecommerce website company to get customized applications for your business.

    Best Website Designing and Development Company
    "
    Ecommerce Website Development Company
    "
    Zend Framework

    ReplyDelete
  22. Webcare360 Provides you safe and secure cheap Offshore Hosting Best offshore hosting and offshore hosting by Webcare360 with 99.9% Up time Guarantee, with Ddos protection.

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

    ReplyDelete
  24. I have been meaning to post something like this on my blog and you have given me an idea. Cheers.
    webcare360

    ReplyDelete
  25. Thanks for sharing your experience in the form of article about how you use Zend Framework and JQuery and JQuery Date Picker Examples in deatils. PHP has many framework and Zend is one of them. If you have any requirement to Hire Zend Developers or any PHP web developers for your project. Please visit our website.

    ReplyDelete