CODEWITHSUNDEEP
jquery-uizend-framework2zend-form
Nigel Kukard
Nigel Kukard

Reputation: 89

Right way to attach a jQuery-UI dateselect to a Zend Framework 2 form element?

What would be the right way to attach a jQuery-UI dateselect to a Zend Framework 2 form element?

Would it be adding a appendScript so a javascript selector is added to the end of the layout that selects the class/id?

Upvotes: 2

Views: 3485

Answers (2)

Nigel Kukard
Nigel Kukard

Reputation: 89

Based on the 2 answers, I did a bit more research and came up with my own approach...

Here is the top of my layout.phtml

$this->inlineScript()->offsetSetFile(10,$basePath . '/jquery/jquery-1.10.1.min.js');
$this->inlineScript()->offsetSetFile(12,$basePath . '/jquery-ui/ui/jquery-ui.min.js');

I have assigned all my javascripts with an ID so they are all loaded in the right order.

I then use this in my Form... by default it looks like any form element has the ID set to its name, this makes ite easy to style with input#name 

$this->add(array(
    'name' => 'start',
    'type'  => 'DateTime',
    'options' => array(
        'label' => 'Start Date',
        'format' => 'Y-m-d H:i P',
    ),
));

Its then very easy to style with the following, here is my $action.phtml ...

echo $this->form($form);

# Decorations
$this->inlineScript()->offsetSetScript(99,"
$(function() {
   $('input#start').datepicker({
       dateFormat: 'yy-mm-dd',
       showOtherMonths: true,
       selectOtherMonths: true,
   });
});
");

You can see here I have assigned it offset 99. This is what I use in all my templates.

Upvotes: 4

Sam
Sam

Reputation: 16455

First of all, i strongly suggest to go with the time and to start using Zend\Form\Element\Date. All browsers who do not support the Date-Input will still render out a Input of type="text", so there is literally no loss in doing so.

The advantage you do get is that most modern browsers are able to render out there default Datepicker. Using the browsers defaults is preferred for users usability and comfort. Even IE10 does do a very good job of supporting the current neat stuff of CSS3 and HTML5. But of course you can't be sure and so you should always include a fallback for older browsers, too. For this, I strongly suggest that you run with Feature-Detection in favor of blindly overwriting the users defaults. The library that does the job the best probably is Modernizr. I will give you the JS for that at the end.

Another thing to note is that this kind of JavaScript belongs at the BOTTOM of your document. For this you have to print this right before closing your </body>-Tag

<?=$this->inlineScript();?>

Now print the script you want inside the right place like this inside your $action.phtml

<?php $this->inlineScript()->captureStart(); ?>
Modernizr.load({
    test: Modernizr.inputtypes.date,
    nope: [
        'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js',
        'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js', 
        'jquery-ui.css'
    ],
    complete: function () {
        $('input[type=date]').datepicker({
            dateFormat: 'yy-mm-dd'
        }); 
    }
});
<?php $this->inlineScript()->captureEnd(); ?>

What's happeing there is that the Modernizr-library will check for the browser support of the Date-Input of HTML5. If the browser is not able to render out a DateSelect, the appropriate JavaScript-Libraries will be loaded (jQuery, jQueryUI and CSS) and attached to the DOM and the jQueryUI.datepicker() will be called to your input-elements of type date.

In addition, all of this JS-Stuff will be captured and moved to the END of your DOM (where a script element will be added). Doing this you have the advantage that first the full DOM will be rendered and then the JS will be attached. Meaning your Form is usable sooner than in the example provided by Raj.

Upvotes: 5

Related Questions