twitter-bootstrap - eonasdan - set datepicker bootstrap

¿Cómo consigo que bootstrap-datepicker funcione con Bootstrap 3?

Question

Utilizo la versión de bootstrap-datepicker mantenida por eternicode (Andrew Rowls).

En Bootstrap 2 funcionó, pero ahora no funciona con la biblioteca Bootstrap 3.

¿Cómo puedo hacer que bootstrap-datepicker funcione con Bootstrap 3 ?

Nota: El repositorio se movió de eternicode a una cuenta de organización (uxsolutions).

Answer 1

Para cualquier otra persona que se encuentre con esto ...

La versión 1.2.0 de este complemento (actual a partir de esta publicación) no funciona en todos los casos, como se documenta con Bootstrap 3.0, pero sí con una solución alternativa menor.

Específicamente, si utiliza una entrada con un ícono, el marcado HTML es, por supuesto, un poco diferente a medida que cambian los nombres de las clases:

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

Parece que debido a esto, debe usar un selector que apunte directamente al elemento de entrada en sí NO al contenedor principal (que es lo que sugiere el HTML generado automáticamente en la página de demostración).

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

Una vez hecho esto, probablemente también desee agregar un oyente para hacer clic / tocar en el ícono para que se enfoque en la entrada de texto al hacer clic (que es el comportamiento cuando se usa este complemento con TB 2.x de manera predeterminada).

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

NB: Solo uso un atributo booleano data-datepicker porque el nombre de clase ''datepicker'' está reservado por el plugin y ya uso ''date'' para diseñar elementos.

Answer 2

También utilizo http://www.eyecon.ro/bootstrap-datepicker Stefan Petre y no funciona con Bootstrap 3 sin modificaciones. Tenga en cuenta que http://eternicode.github.io/bootstrap-datepicker/ es una bifurcación del código de Stefan Petre.

Tienes que cambiar tu marcado (el marcado de muestra no funcionará) para usar el nuevo CSS y formar el diseño de cuadrícula en Bootstrap 3. Además, tienes que modificar algunos CSS y JavaScript en la implementación de bootstrap-datepicker actual.

Aquí está mi solución:

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

Cambios de CSS en datepicker.css en las líneas 176-177:

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

Cambio de JavaScript en datepicker-bootstrap.js en la línea 34:

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

ACTUALIZAR

Usando el código más nuevo de http://eternicode.github.io/bootstrap-datepicker/ los cambios son los siguientes:

Cambios de CSS en datepicker.css en las líneas 446-447:

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

Cambio de JavaScript en datepicker-bootstrap.js en la línea 46:

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

Finalmente, el JavaScript para habilitar el datepicker (con algunas opciones):

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

Probado con Bootstrap 3.0 y JQuery 1.9.1. Tenga en cuenta que esta horquilla es mejor de usar que la otra ya que es más rica en características, tiene soporte de localización y posiciona automáticamente el marcador según la posición de control y el tamaño de la ventana, evitando que el selector salga de la pantalla, lo cual era un problema con la versión.