0

「タスク」レコードを編集するためのページがあるプロジェクト管理アプリケーションに取り組んでいます。このページでは、0 から無制限のタスク レコードを編集することができます。

各タスク レコードの HTML が生成され、JAvaScript 関数を使用してページ DOM に挿入されます。この JS 関数の最後で、現在、以下のようなコードを実行して、日付ピッカー ライブラリをすべてのタスク期日テキスト入力フィールドにアタッチします。

100 個のタスクがあるページを想像してみてください。ページの読み込み時に 100 個の日付ピッカーが開始されています...あまり良くないと思います!

var $datepicker = $(task).find(".date_due").pikaday({
    format: 'MM/DD/YYYY',   
});

私が使用しているライブラリは非常によくコーディングされており、Pikaday と呼ばれています - https://github.com/dbushell/Pikaday

したがって、提出された日付ごとに必要に応じてこれをオンデマンドでロードしようとするために、代わりに以下のコードを使用しました...

$( "body" ).on( "click", ".date_due", function() {
  var $datepicker = $( this ).pikaday({
       format: 'MM/DD/YYYY'    
   });
   $datepicker.show();
});

これは、必要に応じてほぼ機能します。現在はオンデマンドでロードされますが、ユーザーがテキスト入力をクリックすると、ロードして日付ピッカーをすべて 1 回のクリックで表示する必要があります。

これには、ロードするのに 1 クリック、開くのに 1 クリックが必要です。

ライブラリ関数を呼び出してオープンをトリガーしようとしたことがわかりますが、機能$datepicker.show();していないようです。

https://github.com/dbushell/Pikadayのドキュメントには...

picker.show()
Make the picker visible.

この JSFiddle では、Date pick を表示するには 2 回クリックする必要があるため、表示されていないことがわかります。 http://jsfiddle.net/jasondavis/uuu96ckL/14/

何か助けてください。

4

1 に答える 1

1

あなたのプラグインスタイルのラッパーで何かが起こっています.

$( "body" ).on( "click", ".date_due:not(.pikaday)", function() {
  var pikaday = new Pikaday({
       field: this,
       theme: 'dark-theme',
       format: 'MM/DD/YYYY',
       defaultDate: '2015-01-01'       
   });

   $(this).data('pikaday', pikaday).addClass('pikaday');

   pikaday.show();
});

フィドルを更新しました。

于 2015-03-29T10:38:13.580 に答える