10

jQueryUI には、アイコン トリガーを備えた優れた DatePicker があります(カレンダー アイコンでカレンダーが開きます。Outlook と同様の動作です)。

一方、Bootstrap 3 の入力グループは、アイコンを入力フィールドに接続するのに非常に便利です。

どちらか一方を書き換えずに、2 つを組み合わせることができますか?

ここで JSFiddleを作成しました。«開始日» の場合、jQueryUI アイコン トリガーはアクティブではありません。«終了日» では有効になっています。残念ながら、DatePicker アイコンは終了日の入力グループの外に表示されます。

では、アイコン トリガーを入力グループの一部として有効にすることは可能ですか («Start Date» のように見えますが、«End Date» のように動作します)。

メイン アイコン トリガー コード:

$("#datepicker-end").datepicker({
showOn: "button",
buttonImage: "img/calendar.gif",
buttonImageOnly: true
});

メイン入力グループ コード:

<div class="input-group">
<input type="text" id="datepicker-start" class="form-control" placeholder="Start Date" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
4

5 に答える 5

23

問題の解決策をdatepicker探し回っていると、非常に多くの問題 (および 10 の賛成票) で受け入れられた回答を見てショックを受けました。偶発的な副作用によってのみ機能します。

  • クリック イベント内にDOM 対応ハンドラーがあります。これは何もしないので無意味です (または、少なくともクリック ハンドラーの外にある必要があります)。
  • アイコンをクリックするたびに再初期化されますdatepicker

修正されたバージョンは次のようになります。

$(document).ready(function() {
  $("#datepicker-my").datepicker();
  $('#btn').click(function() {
    $("#datepicker-my").focus();
  });
});
  • 日付ピッカーを一度だけ初期化する
  • アイコンがクリックされると、入力にフォーカスが置かれます (カレンダーが起動します)。

JSFiddle: http://jsfiddle.net/TrueBlueAussie/JHBpd/151/

注: 最近では、ショートカット DOM Ready handlerを使用することが推奨されているため、例は次のようになります。

$(function() {
  $("#datepicker-my").datepicker();
  $('#btn').click(function() {
    $("#datepicker-my").focus();
  });
});

クラス セレクターを介して複数のコントロールをサポートするように更新します。

識別可能なクラスを持つように HTML を変更し、フォーカス セレクターを変更して、ボタンに関連する編集ボックスを (同じ入力グループ内で) 選択します。

JSFiddle: http://jsfiddle.net/JHBpd/260/

$(function() {
  $(".datepicker-my").datepicker();
  $('.btn').click(function() {
    $(".datepicker-my", $(this).closest(".input-group")).focus();
  });
});
于 2016-02-19T09:52:09.270 に答える
4

入力フィールドを選択するには、属性をlabel持つタグを使用することを好みます。for

HTML ラベル要素 () は、ユーザー インターフェイスのアイテムのキャプションを表します。コントロール要素を要素内に配置するか、 for 属性を使用して、コントロールに関連付けることができます。

詳細と例: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

attributeの値はfor、ラベル付け可能なフォーム関連要素の ID になりますinput。私の理解では、入力はすでに日付ピッカーでトリガーされているため、入力に焦点を当てます。これで、作業は完了です。

 <div class="input-group">
   <input type="text" id="datepicker-start" class="form-control" placeholder="Start Date" />    
   <label class="input-group-addon" for="datepicker-start">
     <span class="glyphicon glyphicon-calendar"></span>
   </label>
 </div>

JSFiddle: https://jsfiddle.net/om01kgk5/1/

于 2015-10-29T00:23:43.453 に答える