web-dev-qa-db-ja.com

jQueryUIDatePickerのアイコントリガーをBootstrap 3の入力グループと組み合わせる方法

jQueryUIにはNice アイコントリガー付きのDatePicker （カレンダーアイコンがカレンダーを開きます。Outlookと同様の動作です）。

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

どちらかを書き直さずに2つを組み合わせることができますか？

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

それで、入力グループの一部としてアイコントリガーを有効にすることは可能ですか（"開始日"のように見えますが、"終了日"のように動作します）。

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

$("#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>
jqueryjquery-uitwitter-bootstrapdatepickerjquery-ui-datepicker
9
bjornte

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

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

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

$(document).ready(function() {
  $("#datepicker-my").datepicker();
  $('#btn').click(function() {
    $("#datepicker-my").focus();
  });
});
  • 日付ピッカーを1回だけ初期化する
  • アイコンがクリックされたときに入力にフォーカスを移動します（これによりカレンダーが起動します）。

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

注：最近では、ショートカットDOM準備完了ハンドラーを使用することが推奨されているため、例は次のようになります。

$(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();
  });
});
22
Gone Coding

bootstrapアイコントリガーにjqueryui datepickerを表示したい場合は、ここに解決策があります。 Demo JSFiddle

JS：

$('#btn').click(function(){
    //alert('clicked');
    $(document).ready(function(){
        $("#datepicker-my").datepicker().focus();
    });
});
7
Rahul Gupta

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

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

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

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/

4
AdaroMu
$("#checkin").datepicker({
  dateFormat: 'dd/mm/yy',
  minDate: '0',
  changeMonth: true,
  numberOfMonths: 1
 });
.datedivmng{
    float: left;position: relative;
}
.datedivmng .datepicker{
    position: relative;width: 87%!important;
    cursor: pointer;
}
.datedivmng:after {
    /* symbol for "opening" panels */
    font-family: 'FontAwesome';
    content: "\f073";
    color: #329ac4;
    font-size: 16px;
    text-shadow: none;
    position: absolute;
    vertical-align: middle;
    pointer-events: none;
    float: right;
    top: 2px;
    right: 7px;
}
<div class="datedivmng">
  <input type="text" id="checkin" name="checkin"  value="" /></div>
1
Jignesh Patel - Sr. HTML Dev.

以下のブロックはbootstrap 4で動作し、ボタントリガーを提供します（入力focutではありません） 出力

$(function () {
        $("#searchTextDOB").datepicker({
            showOn: "button",            
            buttonImageOnly: false,
            buttonText: ''
        }).next(".ui-datepicker-trigger").addClass("input-group-text btn-light fa fa-calendar-alt").
            wrapAll('<div class="input-group-append"></div');
    });
0
ank2k11