5

eternicode twitter ブートストラップ datepickerは、<input>関連付けられているフィールドがフォーカスされるとすぐにポップアップします。これは、公式デモ ページの datepicker フィールドにタブで移動することで確認できます。

代わりに、clickでのみ開くようにします。理想的には、日付ピッカーはカレンダー アイコンをクリックするだけでポップアップします。

フォーカス時にポップアップしないようにするにはどうすればよいですか?

4

2 に答える 2

10

ライブラリの現在のバージョンでは、やりたいことに対する公式のサポートはありません。ドキュメントには、datepicker をインスタンス化できるすべての種類のマークアップと、その結果の動作が記載されています。<input>要素で日付ピッカーをインスタンス化するとき、

入力にフォーカスすると (クリックまたはタブで移動)、ピッカーが表示されます。

日付ピッカーをインスタンス化して、必要なものを簡単に提供できるマークアップはありません。また、日付ピッカーの表示をトリガーするイベントを選択できる構成オプションもありません。

その結果、必要なことを行うには、ライブラリのリバース エンジニアリングが必要になります。幸いなことに、これは非常に簡単です。

最も簡単な方法は、通常どおりに datepicker をインスタンス化することですが、その後、ハンドラーを自分で<input>取り除き、ハンドラーに置き換えます。focusclick

$('#my-input').datepicker()
              .off('focus')
              .click(function () {
                  $(this).datepicker('show');
              });

このhttp://jsfiddle.net/E4K56/1/で実証されているように、これはライブラリの最新バージョンで完全に機能します

日付ピッカーの外観をトリガーする追加の要素 (カレンダー ボタンなど) が必要な場合は、同様にハンドラーをそれらにアタッチできます。

$('#some-button').click(function () {
    $('#my-input').datepicker('show');
});
于 2013-12-21T12:32:25.047 に答える
0

私はデモと同じ表記法を持っています:

<label for="datepickerFrom" class="control-label input-group">Set the date from:</label>
<div class="form-group">
    <div class='input-group date' id='datepickerFrom'>
        <input type='text' class="form-control" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

次に、入力クリック時にイベントを追加します。

var options = {
    language: 'cs'
}
$('#datepickerFrom').datetimepicker(options);
$('#datepickerFrom input').off('focus')
    .click(function () {
        $(this).parent().data("DateTimePicker").show();
    })
于 2014-10-19T12:23:04.490 に答える