Add A Cool Zend Dojo Date Picker Form Element Without Writing A Single Line Of JavaScript

Zend Framework users know that Dojo toolkit is integrated to 1.6+ release. In the previous post I demonstrated how to add a cool Dojo date picker widget to your text input form element by manually typing the JavaScript code. In this post let us discover how to create a cool date picker form element with Zend_Dojo. As the title says you don't have to write a single line of JavaScript. Zend_Dojo does all the work for you.

Prerequisite: you are familiar with Zend_Form, Zend_Controller and Zend_Layout.

Bootstrap: Zend Framework comes with many Dojo specific view helpers. You have to instruct the view object to find Dojo view helpers.

Grab the view object and add the following line in your bootstrap file.


<?php
// Create new view object if not already instantiated  
//$view = new Zend_View();

Zend_Dojo::enableView($view);
$viewRenderer Zend_Controller_Action_HelperBroker::getStaticHelper('viewRenderer');
$viewRenderer->setView($view);

?>

This sets up the Dojo environment and uses AOL CDN by default. This is a one time configuration for your application. You can make use of dojo view helper methods available to specify whether to use a CDN or a local path to a Dojo install, paths to custom Dojo modules, dojo.require statements, dijit stylesheet themes to use and to create dojo.addOnLoad() events.

Creating the form:


<?php
        $form 
= new Zend_Form;

        

$name $form->createElement('text''name')
                        ->
setLabel('Your full name')
                        ->
setRequired(true);
        
?>

The above code creates a new form object and a text element. In the next step we create the date picker with similar methods.

Let us call our date picker element 'birthday'. We make use of the DateTextBox Dojo widget in this example.


<?php     
                                                                                              
        $birthday 
= new Zend_Dojo_Form_Element_DateTextBox('birthday');
        
$birthday->setLabel('Birthday');

?>

The above two lines create the DateText box form element and sets the label 'Birthday' to it. This generates the following roughly equivalent output when you print the form.

<!-- indicative output -->
<input type="text" name="date"  dojoType="dijit.form.DateTextBox" />

Create a submit element and add the elements to the form.


<?php
        $submit 
$form->createElement('submit''submit');

        

$form->addElements(array($name$birthday$submit));

?>

We are done with creating the form. I have posted the complete controller code below which has a function to create the form.


<?php
class IndexController extends Zend_Controller_Action
{
    public function 
indexAction()
    {
        
// Call the getForm function
        
$form $this->getForm();

        if (

$this->_request->isPost()) {

            if (

$form->isValid($_POST)) {
                
// Process data
                // Pass the name and birthday values to the view so that
                // You can display them in the view
                
$this->view->name $this->_getParam('name');
                
$this->view->birthday $this->_getParam('birthday');
            } else {
               
//If form validation fails populate and display the form again
               
$form->populate($_POST);

               

$this->view->form $form;
            }

        } else {
           

//If the request is not post display the form
           
$this->view->form $form;
        } 
    }

    

// Function to create the form
    
public function getForm() 
    { 
        
$form = new Zend_Form;

        

$name $form->createElement('text''name')
                        ->
setLabel('Your full name')
                        ->
setRequired(true);
                                                                                                            
        
$birthday = new Zend_Dojo_Form_Element_DateTextBox('birthday');
        
$birthday->setLabel('Birthday');

        

$submit $form->createElement('submit''submit');

        

$form->addElements(array($name$birthday$submit));
        
// We already discussed that the above code does
        
return $form;
    }

}

?>

When the form is submitted we can access the name and birthday values via the usual $this->_getParam() method. In our controller we pass the name and birthday values to the view so that we can print them in our view.

Add the following code to your view file to display the name and birthday values supplied by the user.


<?php 
    
echo "Your name is " $this->name "<br>";
    echo 
"Your birthday is " $this->birthday "<br>";
    echo 
$this->form ;
?>

In your layout script, you have to add the stylesheet modules and print the dojo object. In this example we use tundra stylesheet.

<?php
<title>
<?
php echo $this->escape($this->pageTitle); echo " - Binary Vibes BizSense"?></title>
        <?php echo $this->dojo();
             echo 
$this->dojo()->addStylesheetModule('dijit.themes.tundra');

       

?>
</title>
?>

Remember to set the body class to tundra.

<body class="tundra">
 
 <div id="content">
            <?php  echo $this->layout()->content ?>
 </div>

I have published the complete layout example script below for your reference.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Binary Vibes BizSense</title>
        <?php echo $this->dojo();
             echo $this->dojo()->addStylesheetModule('dijit.themes.tundra');
         ?>
</head>
<body class="tundra">
  <div id="content">
            <?php  echo $this->layout()->content ?>
        </div>
</body>
</html>

That is all there is to it to use Dojo form widgets in your Zend Framework powered application.

Reference:
Zend_Dojo - http://framework.zend.com/manual/en/zend.dojo.html
Dojotoolkit - http://dojotoolkit.org/
Plain HTML and JavaScript DateTextBox usage example - http://techchorus.net/add-cool-date-picker-2-lines-javascript

Programming: 
Content Type: 
FOSS Project: 

Comments

Hi , Thank you for the wonderful post. I have integrated the element very easily, But I have a problem while setting the default value to the element.

We normally use

$formElement->setValue('value'); to set the value of that particular element, but when I do the same thing for dojo DateTextBox then nothing happens. I cant set the value to the element. Please post how to set the value to DateTextBox.

Thank You very much

While setting the value to a Zend_Dojo_Form_Element_DateTextBox make sure it is in the correct format. The default is yyyy-mm-dd.

How can i change the format value of Zend_Dojo_Form_Element_DateTextBox?
I know to change the format with setPattern but the value format return is always yyyy-mm-dd.
How i can return values in format ddmmyyyy?

Thanks.
Jonathan.
Sorry for my english i'm french.

This is a great tutorial, however it doesnt work. As it is, it barfs on the 'echo $this->dojo();' call that is embedded in the section of layout.phtml. The error stack:
Fatal error: Uncaught exception 'Zend_Loader_PluginLoader_Exception' with message 'Plugin by name 'Dojo' was not found in the registry,...'
...
[internal function]: Zend_View_Abstract->__call('dojo',Array)
/myapp_app/layouts/layout.phtml(5): Zend_View->dojo() ...

It appears your application is not using the $view object which you are Dojo enabling.

Try this in your bootstrap and let us know what happens:

<?php
$view 
= new Zend_View();
Zend_Dojo::enableView($view);
$viewRenderer Zend_Controller_Action_HelperBroker::getStaticHelper('viewRenderer');
$viewRenderer->setView($view);
?>

The code in the article has been updated to set the $view object to the view renderer.

It doesn't work for me! I'm a noob on Zf can u help me.. I got this on my Bootstrap but it doesn't work...


function _initViewHelpers()
{
// Initialize view
$view = new Zend_View();
$view->doctype('XHTML1_STRICT');
$view->headMeta()->appendHttpEquiv('Content-Type', 'text/html;charset=utf-8');
$view->headTitle()->SetSeparator(' - ');
$view->headTitle('DSinf');

Zend_Dojo::enableView($view);
$viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper('viewRenderer');
$viewRenderer->setView($view);

return $view;
}

It lunch a Uncaught exception 'Zend_Loader_PluginLoader_Exception' with message 'Plugin by name 'Dojo' was not found in the registry. when I put on my layout echo $this->dojo();

thx

Many, many thanks

Hi

I am using the same,

I am getting digiit.css error : " Expected declartion but found "#some id" "

and also this is not working in IE , im getting JS error :" dojo is undefined "

Can you help me ??

Thanks

Haja

Hi Sudeer,
Do you have the equivalent example for someone who is not using a form?
What if I want a view with bordercontainer. I am trying to get one to work and I'm not really successful so far. I have the equivalent of your example with a form, works A ok but when it comes to using a view directly, no such luck do you have any advice?

This is the content of my index.phtml:
<?php
$this->dojo()->enable()
->setDjConfigOption('parseOnLoad',true)
->requireModule('dijit.form.DateTextBox')
->requireModule('dijit.layout.BorderContainer');

$this->borderContainer()->captureStart('masterLayout', array(
'design' => 'headline',
'persist' => true),
array('style' => 'width: 100%; height: 100%;')
);

$this->contentPane()->captureStart('titlePane', array('region' => 'top'));
// Start title pane capture
?>
My Custom CMS
<?php
$this->contentPane()->captureEnd('titlePane');
$this->borderContainer()->captureEnd('masterLayout');
?>

hey it is really very good and very usefull too!!
cheers

The tundra class on body it's a thing I always forgot... Good post. Zend_Dojo is wonderful.

You're welcome, Giorgio.

Zend_Dojo is indeed a cool component.

Fatal Error:
Zend_Loader_PluginLoader_Exception' with message 'Plugin by name 'Dojo' was not found in the registry

I after implementing the given solutions I am getting above mentioned error on all other pages.
Please suggest to remove this error

Thanks .This works great

Hi ,

it displays just like a text box

my form:
$date_frm = new Zend_Form_SubForm();
$date_from = new Zend_Dojo_Form_Element_DateTextBox('date_from');
$date_frm->addElements(array($date_from));
$date_frm->removeDecorator('DtDdWrapper');
$date_frm->removeDecorator('Fieldset');
$this->addSubForm($date_frm, 'date_frm');

Bootstrap:

Zend_Dojo::enableView($view);
$viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper('viewRenderer');
$viewRenderer->setView($view);
help me pls...

sorry the text field is like this

Great tutorial!!
Thank you very much

Add new comment