web-dev-qa-db-ja.com

Bootstrap 3でbootstrap-datepickerを使用するにはどうすればよいですか？

eternicode （Andrew Rowls）によって管理されている bootstrap-datepicker のバージョンを使用しています。

Bootstrap 2では機能しましたが、現在はBootstrap 3ライブラリでは機能しません。

どうすれば bootstrap-datepicker を取得してBootstrap 3と連携できますか？

注：リポジトリは eternicode から組織アカウント（uxsolutions）に移動しました。

twitter-bootstraptwitter-bootstrap-3datepickerbootstrap-datepicker
59
user2167526

また、Stefan Petreの http://www.eyecon.ro/bootstrap-datepicker を使用していますが、Bootstrap 3を変更しないと機能しません。 http://eternicode.github.io/bootstrap-datepicker/ はStefan Petreのコードのフォークです。

Bootstrap 3の新しいCSSとフォームグリッドレイアウトを使用するには、マークアップを変更する必要があります（サンプルマークアップは機能しません）。また、実際のbootstrap-datepicker実装でCSSとJavaScriptを変更する必要があります。 。

私の解決策は次のとおりです。

<div class="form-group row">
  <div class="col-xs-8">
    <label class="control-label">My Label</label>
    <div class="input-group date" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy">
      <input class="form-control" type="text" readonly="" value="12-02-2012">
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    </div>
  </div>
</div>

176〜177行目のdatepicker.cssのCSSの変更：

.input-group.date .input-group-addon i,
.input-group.date .input-group-addon i {

34行目のdatepicker-bootstrap.jsのJavascriptの変更：

this.component = this.element.is('.date') ? this.element.find('.input-group-addon') : false;

UPDATE

http://eternicode.github.io/bootstrap-datepicker/ の新しいコードを使用すると、変更は次のようになります。

Datepicker.cssの446〜447行目のCSSの変更：

.input-group.date .input-group-addon i,
.input-group.date .input-group-addon i {

46行目のdatepicker-bootstrap.jsのJavascriptの変更：

 this.component = this.element.is('.date') ? this.element.find('.input-group-addon, .btn') : false;

最後に、日付ピッカーを有効にするJavaScript（オプションあり）：

 $(".input-group.date").datepicker({ autoclose: true, todayHighlight: true });

Bootstrap 3.0およびJQuery 1.9.1でテスト済み。このフォークは機能が豊富であり、ローカライズをサポートし、コントロール位置とウィンドウサイズに基づいて日付ピッカーを自動配置し、ピッカーが古い問題であった画面から出ないようにするため、他のフォークよりも使用する方が良いことに注意してください版。

84
Shane

これに遭遇した他の人のために...

このプラグインのバージョン1.2.0（この投稿の現在）は、Bootstrap 3.0で文書化されているように、すべてのケースでまったく機能しませんが、マイナーな回避策があります。

具体的には、アイコン付きの入力を使用する場合、クラス名が変更されたため、HTMLマークアップはもちろん若干異なります。

<div class="input-group" data-datepicker="true">
    <input name="date" type="text" class="form-control" />
    <span class="input-group-addon"><i class="icon-calendar"></i></span>
</div>

このため、入力要素自体を直接指すセレクターを使用する必要があるようですではなく親コンテナー（デモページで自動生成されたHTMLが示唆するものです）。

$('*[data-datepicker="true"] input[type="text"]').datepicker({
    todayBtn: true,
    orientation: "top left",
    autoclose: true,
    todayHighlight: true
});

これを行ったら、アイコンをクリック/タップするためのリスナーを追加して、クリックされたときにテキスト入力にフォーカスを設定することもできます（このプラグインをTB 2.xで使用するときの動作です）デフォルト）。

$(document).on('touch click', '*[data-datepicker="true"] .input-group-addon', function(e){
    $('input[type="text"]', $(this).parent()).focus();
});

注意：クラス名「datepicker」はプラグインによって予約されており、要素のスタイル設定にはすでに「date」を使用しているため、data-datepickerブール属性を使用しています。

22
Iain Collins