Как заставить bootstrap-datepicker работать с Bootstrap 3?

Ответ 1

Я также использую Stefan Petres http://www.eyecon.ro/bootstrap-datepicker, и он не работает с Bootstrap 3 без изменений. Обратите внимание, что http://eternicode.github.io/bootstrap-datepicker/ является вилкой кода Стефана Петре.

Вы должны изменить свою разметку (разметка образца не будет работать), чтобы использовать новый CSS и форму сетки в Bootstrap 3. Также вам нужно изменить некоторые CSS и JavaScript в реальной реализации bootstrap-datepicker.

Вот мое решение:

<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>

Изменения CSS в datepicker.css в строках 176-177:

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

Изменение javascript в datepicker-bootstrap.js в строке 34:

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

UPDATE

Используя новый код http://eternicode.github.io/bootstrap-datepicker/, следующие изменения:

Изменения CSS в datepicker.css в строках 446-447:

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

Изменение Javascript в datepicker-bootstrap.js в строке 46:

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

Наконец, JavaScript для включения datepicker (с некоторыми опциями):

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

Протестировано с помощью Bootstrap 3.0 и JQuery 1.9.1. Обратите внимание, что эта вилка лучше использовать, чем другая, поскольку она больше функциональна, имеет поддержку локализации и автоматически позиционирует datepicker на основе позиции управления и размера окна, избегая выбора сборщика, который был проблемой с более старыми версия.

Ответ 2

Для всех, кто сталкивается с этим...

Версия 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();
});

NB: я просто использую атрибут boolean data-datepicker, потому что имя класса 'datepicker' зарезервировано плагином, и я уже использую 'date' для стилизации элементов.