将jQuery-UI日期选择附加到Zend Framework 2表单元素的正确方法？

Question

将jQuery-UI日期选择附加到Zend Framework 2表单元素的正确方法是什么？

它是否会添加一个appendScript,所以javascript选择器被添加到选择类/ id的布局的末尾？

Answer 1

首先,我强烈建议花时间并开始使用Zend\Form\Element\Date.所有不支持日期输入的浏览器仍然会渲染出一个输入type="text",所以这样做几乎没有任何损失.

您获得的优势是大多数现代浏览器都能够呈现默认的Datepicker.使用浏览器默认值是用户可用性和舒适度的首选.甚至IE10也能很好地支持当前CSS3和HTML5的优点.但是当然你不能确定,所以你也应该总是为旧浏览器提供一个后备.为此,我强烈建议您使用Feature-Detection运行,以便盲目地覆盖用户默认值.最好的工作的图书馆可能是Modernizr.我会在最后给你JS.

另外需要注意的是,这种JavaScript属于文档的BOTTOM.为此,您必须在关闭</body>-Tag 之前打印此权限

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

现在在你想要的地方打印你想要的脚本 $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(); ?>

正在发生的事情是Modernizr-library将检查HTML5的Date-Input的浏览器支持.如果浏览器无法呈现DateSelect,则将加载相应的JavaScript库(jQuery,jQueryUI和CSS)并附加到DOM,jQueryUI.datepicker()并将调用您的输入元素类型date.

此外,所有这些JS-Stuff都将被捕获并移动到DOM的END(将添加一个脚本元素).这样做的好处是首先渲染完整的DOM,然后连接JS.这意味着您的表单比Raj提供的示例更早可用.