Insertar datepicker en bootstrap

Hola comunidad.

Antes que nada aclaro que estoy iniciando en bootstrap. Quisiera saber cómo incluyo datepicker en mi página web. Básicamente necesitaría un ejemplo completo de la pagina.html con header y el form. Perdón por la petición pero no lo puedo hacer funcionar. Ya que estamos si tienen un link a los archivos de datepicker porque no estoy seguro de haber bajado los correctos/actualizados.

Estuve en este link http://www.eyecon.ro/bootstrap-datepicker/ pero no lo puedo hacer funcionar.

Desde ya agradecido.

Respuestas

Antes de insertar el datepicker, es necesario que tu página enlace correctamente los archivos normales de Bootstrap y de jQuery y tenga un <input type="text"> donde se mostrará el datepicker. Aquí te pongo unos enlaces a cdnjs que te van a funcionar si los copias y pegas tal cual, pero también puedes usar los archivos guardados en tu propio servidor:

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
 
<body>
    <form ...>
        <input type="text" id="fecha" name="fecha" />
    </form>
</body>

En segundo lugar, el datepicker que has enlazado está obsoleto, ya que se dejó de actualizar en 2013. No te preocupes, porque se ha creado un proyecto nuevo en github.com/eternicode/bootstrap-datepicker que parte del proyecto original y lo sigue manteniendo. Así que usaré ese nuevo proyecto en mi ejemplo.

Enlaza los archivos CSS y JS del datepicker en tu página:

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
</head>

Por último, añade el siguiente código JavaScript para activar el datepicker en tu página:

<head>
    ...
 
    <script>
        $( document ).ready(function() {
            $('#fecha').datepicker();
        });
    </script>
</head>
 
<body>
    <form ...>
        <input type="text" id="fecha" name="fecha" />
    </form>
</body>

Y ya debería funcionarte.

@javiereguiluz

4 noviembre 2015, 8:46

Gracias "javiereguiluz" Me sirvió mucho. Muy Agradecido por tu claridad en la respuesta. Ahora a juguetear con los formatos a darle.

Se vemos.

@DanielSalsi

4 noviembre 2015, 22:36

La verdad que datepiker lo pude hacer funcionar con los pocos ejemplos que probé. El problema es que necesito fecha y hora y datepiker no tiene para colocar hora (o no lo encontré). Alguna recomendación.

@DanielSalsi

5 noviembre 2015, 15:15

Gracias por la aportación @javiereguiluz. Me gustaría saber como cambiarle el idioma al datepicker. De antemano gracias!

@EkaMeggie

12 septiembre 2016, 20:18