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> - 标记

之前打印此权限

<?=$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提供的示例更快地使用。

Answer 2

根据2个答案，我做了一些研究，并提出了自己的方法......

这是我的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');

我已经为我的所有javascripts分配了一个ID，所以它们都以正确的顺序加载。

然后我在我的表单中使用它...默认情况下，它看起来像任何表单元素都将ID设置为其名称，这使得使用输入#name

可以轻松地设置样式

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

然后很容易用下面的样式，这是我的$ action.phtml ...

echo $this->form($form);

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

你可以在这里看到我已经为它分配了偏移量99.这就是我在所有模板中使用的内容。

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

2 个答案: