Estoy tratando de utilizar datepicker de bootstrap (http://eternicode.github.io/bootstrap-datepicker/) y todo funciona bien, excepto que ninguno de los glyphicons se están presentando.

Vi que glyphicons se mueven a otro directorio en bootstrap 3 (http://glyphicons.getbootstrap.com/) que es lo que estoy usando, pero no estaba segura de cómo se puede integrar.

Tanto

<input type="text" value="12-02-2012" date-date-format="yyyy-mm-dd" class="datepicker">

Y

<div class="input-append date datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
     <input class="span2" size="16" type="text" value="12-02-2012" readonly/>
     <span class="add-on"><i class="icon-th"></i></span>
</div>

No funciona.

Alguien sabe cómo puedo integrar bootstrap 3 con la cuenta de twitter datepicker?

  • Mostrar el código. En bootstrap 3 <span class="glyphicon glyphicon-refresh"></span> en bootstrap 2 <i class="icon-refresh"></i>
InformationsquelleAutor Penguinator | 2013-08-08

4 Comentarios

  1. 5

    Descargar el plugin de código fuente de Javascript y CSS (o menos) y sustituir a las antiguas referencias de clase a nuevo, ver: http://www.bootply.com/bootstrap-3-migration-guide.
    B. e. como se ha mencionado por PilHA reemplazar icon-* con glyphicon glyphicon-*, input-append con input-group etc.

    Hacer lo mismo para el código HTML. O utilizar un migrator/updater como: http://twitterbootstrapmigrator.w3masters.nl/, http://bootstrap3.kissr.com/ o http://code.divshot.com/bootstrap3_upgrader/

    Instalar Glyphicons de http://glyphicons.getbootstrap.com/: descargar los archivos y copiar todos los archivos de fuentes a un /directorio de fuentes cerca de tu CSS. Incluir el compilado el archivo CSS de la /css en el repositorio para su local de la carpeta css o descargar la Menos de archivo y compilarlo con el arranque de los archivos.

    actualización Glyphicons están de vuelta desde la RC2. Twitter Bootstrap 3 incluye 180 glifos en el formato de la fuente de la Glyphicon Halflings conjunto.

    • gracias por su ayuda!
  2. 3

    Además de cambiar la clase de referencias, he encontrado que hay algunas consideraciones de diseño rechazando un uno-a-uno el intercambio de ciertas clases, tales como span2 en el control de entrada. Terminé con los siguientes:

    <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 cambios en el selector de fecha.css en las líneas 176-177:

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

    Javascript cambio en datepicker-bootstrap.js en la línea 34:

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

    También escribí una entrada en el blog de entrar en más detalle aquí: http://kenyontechnology.com/2013/10/08/datepicker-for-bootstrap-with-twitter-bootstrap-3-0/

    • Gracias, el blog ayudó mucho, porque no estaba claro que se necesitaba para llamar datepicker en $(".input-group.date").datepicker({ autoclose: true, todayHighlight: true });!
  3. 1

    descarga de bootstrap3 desde aquí Descargar

    Ahora descomprimirlo y obtener de la fuente de la carpeta de la fuente .

    Copia de este .ttf , .otf ,.svg y otro archivo y pegar @ tu raíz del proyecto

    Y Se puede descargar glyphoicon.css a partir de aquí glifo.css

    incluir este archivo css en el archivo de índice

    Hecho eso

Dejar respuesta

Please enter your comment!
Please enter your name here