eternicode (Andrew Rowls)によって管理されている bootstrap-datepicker のバージョンを使用しています。
Bootstrap 2では機能しましたが、現在はBootstrap 3ライブラリでは機能しません。
どうすれば bootstrap-datepicker を取得してBootstrap 3
と連携できますか?
注:リポジトリは eternicode から組織アカウント(uxsolutions)に移動しました。
また、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でテスト済み。このフォークは機能が豊富であり、ローカライズをサポートし、コントロール位置とウィンドウサイズに基づいて日付ピッカーを自動配置し、ピッカーが古い問題であった画面から出ないようにするため、他のフォークよりも使用する方が良いことに注意してください版。
これに遭遇した他の人のために...
このプラグインのバージョン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ブール属性を使用しています。