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

Question

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?

Answer 1

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.