2

jQuery-UI dateselect を Zend Framework 2 フォーム要素にアタッチする正しい方法は何でしょうか?

クラス/IDを選択するレイアウトの最後にjavascriptセレクターが追加されるように、appendScriptを追加しますか?

4

2 に答える 2

5

まず第一に、時間に合わせて を使い始めることを強くお勧めしZend\Form\Element\Dateます。Date-Input をサポートしていないすべてのブラウザーは引き続き の入力をレンダリングするため、type="text"文字どおりそうすることによる損失はありません。

得られる利点は、最新のブラウザのほとんどがデフォルトの Datepicker をレンダリングできることです。ユーザーの使いやすさと快適さのために、ブラウザのデフォルトを使用することをお勧めします。IE10 でさえ、CSS3 と HTML5 の現在のきちんとしたものをサポートするという非常に良い仕事をしています。しかしもちろん確実ではないので、古いブラウザ用のフォールバックも常に含める必要があります。このため、ユーザーの既定値をやみくもに上書きするのではなく、Feature-Detection を使用して実行することを強くお勧めします。おそらく最高の仕事をするライブラリはModernizrです。最後にそのための JS を提供します。

もう 1 つ注意すべき点は、この種の JavaScript はドキュメントの下部にあるということです。このためには、タグを閉じる前にこれを印刷する必要があり</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 ライブラリが HTML5 の Date-Input のブラウザー サポートをチェックすることです。ブラウザーがDateSelect をレンダリングできない場合、適切な JavaScript ライブラリー (jQuery、jQueryUI、および CSS) がロードされて DOM にアタッチされ、jQueryUI.datepicker()type の入力要素に呼び出されますdate。

さらに、この JS スタッフはすべてキャプチャされ、DOM の END (スクリプト要素が追加される場所) に移動されます。これを行うと、最初に完全な DOM がレンダリングされ、次に JS がアタッチされるという利点があります。Raj が提供する例よりも早く Form が使用可能になることを意味します。

于 2013-06-16T07:34:30.913 に答える
4

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');

すべての JavaScript に ID を割り当てたので、すべて正しい順序で読み込まれます。

次に、これをフォームで使用します...デフォルトでは、フォーム要素のIDがその名前に設定されているように見えます。これにより、input#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 を割り当てていることがわかります。これは、すべてのテンプレートで使用するものです。

于 2013-06-16T10:52:53.403 に答える