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

Question

Я использую версию bootstrap-datepicker, поддерживаемую eternicode (Andrew Rowls).

В Bootstrap 2 он работал, но теперь он не работает с библиотекой Bootstrap 3.

Как я могу получить bootstrap-datepicker для работы с Bootstrap 3?

Answer 1

Я также использую Stefan Petre's 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; 

ОБНОВЛЕНИЕ

Используя новую код из 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 на основе позиции управления и размера окна, избегая выбора сборщика, который был проблемой с более старыми версия.

Answer 2

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

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

Кажется, из-за этого, вы должны использовать селектор, который указывает непосредственно сам входной элемент NOT родительский контейнер (это то, что предлагает автоматически созданный HTML на демонстрационной странице).

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

Сделав это, вы, вероятно, также хотят, чтобы добавить прослушиватель нажав/нажав на значок так устанавливает фокус на ввод текста при нажатии (что поведение при использовании этого плагина с 2.x ТБ по умолчанию).

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

NB: Я просто использовать логический атрибут данных Datepicker, поскольку имя класса «DatePicker» зарезервирован плагином и я уже использую «дата» для укладки элементов.