Pasos para instalar el calendario de bootstrap (bootstrap-datepicker) 2020

tutoriales

Author : Jhon

Publicado : 30 diciembre, 2019

A continuacion explicaremos como utilizar correctamente el bootstrap datepicker paso a paso de forma rapida y cencilla en cualquier formulario de reservas para nuestras paginas webs:

  1. Descargar:

Crearemos un archivo .html o .php, dentro crearemos una estructura html Descargaremos jquery en su última versión 3.4.1, iremos a la página de bootstrap y pondremos los links de bootstrap cdn css y js. Ahora iremos a la web de bootstrap-datepicker : https://bootstrap-datepicker.readthedocs.io/en/latest/

Al clicar en el enlace nos llevara a la página oficial, una vez aquí veremos que hay un apartado que pone online Demo, haremos click y esto nos llevara a otra página.

En esta otra pagina podremos hacer pruebas para ver cómo funciona el datepicker, es una página demo.

Veremos un botón que pone download 1.9.0, haremos click y se descargara un  paquete .zip

Descomprimiremos el .zip, tendremos 3 carpetas

  • Css : aquí los archivos css de los diferentes tipos de calendarios
  • Js: el javascript del datepicker
  • Locales: los archivos de idioma .js del datepicker.

2. Configurar :

Ahora configuraremos todo y crearemos la estructura de los archivos. Como hemos dicho al principio crearemos un archivo .php o .html, con su estructura html

Así se verían los archivos, en js estarían el jquery 3.4.1 y un archivo que crearemos que sería el app.js, donde escribiremos nuestro código js para hacer funcionar el datepicker.

Ahora editaremos el archivo .html con sus links css y quedaría así:

<!--libreria jquery-->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- js para personalizar -->
<script src="js/app.js"></script>
<!--bootstrap css CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--css Date Picker-->
<link rel="stylesheet" href="libs/css/bootstrap-datepicker.standalone.css">

NOTA :

Si nos fijamos en el css estamos linkando el archivo css bootstrap-datepicker.standalone.css

Este es solo 1 de 3 tipos de datepicker que podemos elegir, asi que podeis elegir cualquiera de los tres, los encontraras en la carpeta css de la librería del bootstrap-datepicker.

Ahora con sus links js al final antes de cerrar la etiqueta body:

<!--bootstrap js CDN -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!--Obligatorio que la libreria datepicker este en el footer justo despues de los js de bootstrap para no causar conflicto-->
<script src="libs/js/bootstrap-datepicker.min.js"></script>
<script src="libs/locales/bootstrap-datepicker.es.min.js"></script>

Los links a los archivos deben de llevar este orden para no crear conflictos entre librerías y que el datepicker funcione correctamente.

3. Estilos :

Copiaremos un modal de bootstrap 4 y lo pondremos en nuestro archivo index.php y crearemos un nuevo archivo para poner un formulario que también copiaremos de bootstrap 4, a este archivo lo llamaremos por ejemplo formulario.php

El index.php quedaría así:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--libreria jquery-->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- js para personalizar -->
<script src="js/app.js"></script>
<!--bootstrap css CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--css Date Picker-->
<link rel="stylesheet" href="libs/css/bootstrap-datepicker.standalone.css">

</head>

<body>

<div class="container">
<h1>Modal Datepicker</h1>
<button type="button" id="boton-modal" class="btn btn-primary">Modal</button>

<div class="modal" id="modal-date" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">Reservar</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<?php include('formulario.php'); ?>
</div>
<div class="modal-footer">

<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>

</div>

<!--bootstrap js CDN -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!--Obligatorio que la libreria datepicker este en el footer justo despues de los js de bootstrap para no causar conflicto-->
<script src="libs/js/bootstrap-datepicker.min.js"></script>
<script src="libs/locales/bootstrap-datepicker.es.min.js"></script>
</body>

</html>

El archivo formulario.php quedaría así:

<form action="" method="post">
<div class="form-row">
<!--row-->
<div class="form-group col-md-6">
<label for="Check-in">Check-in</label>
<input type="text" readonly="" class="form-control" id="checkin" placeholder="Check-in">
</div>
<div class="form-group col-md-6">
<label for="Check-out">Check-out</label>
<input type="text" readonly="" class="form-control" id="checkout" placeholder="Check-out">
</div>
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<!--/row-->
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<!--row-->
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<!--/row-->
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>

Ahora para que esto funcione deberemos ir a nuestro archivo app.js y escribir el siguiente código:

$(document).ready(function() {

$('#boton-modal').on('click', function() {

//El metodo .modal(), se utiliza para abrir la ventana modal de bootstrap 4
$('#modal-date').modal();

})

$('#checkin').datepicker({
language: "es",
todayBtn: "linked",
clearBtn: true,
format: "dd/mm/yyyy",
multidate: false,
todayHighlight: true

});

$('#checkout').datepicker({
language: "es",
todayBtn: "linked",
clearBtn: true,
format: "dd/mm/yyyy",
multidate: false,
todayHighlight: true

});

})

Esto es lo más básico para que nuestro bootstrap-datepicker funcione.

 

 

 

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *