Bootstrap Datetimepicker, o cómo añadir un calendario a un campo input

Si tu sitio web utiliza el framework Bootstrap, añadir un calendario al campo input de un formulario es muy sencillo. El plugin bootstrap-datetimepicker te proporciona una forma sencilla de añadir un datetime picker en el elemento de un formulario de Bootstrap. Utilizando este datetimepicker, el usuario podrá seleccionar un día, mes, año, hora y minuto con un solo clic.

En este tutorial, veremos cómo añadir un calendario a un campo del formulario con el fin de seleccionar una fecha y hora. El plugin bootstrap-datetimepicker es una solución rápida de añadir un calendario en un formulario. A continuación te proporcionamos el código para integrar un datetimepicker en un formulario de Bootstrap.

Bootstrap

Lógicamente, debemos incluir las librerías de Bootstrap y jQuery para utilizar el framework Bootstrap en tu proyecto web.

<!-- Minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Minified JS library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Minified Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bootstrap DateTime Picker

Incluye las librerías de CSS y JS para añadir el bootstrap-datetimepicker en tu proyecto.

<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="js/bootstrap-datetimepicker.min.js"></script>

Datetime Picker

El siguiente código añade un datetimepicker para seleccionar una fecha y una hora.

<input size="16" type="text" class="form-control" id="datetime" readonly>

<script type="text/javascript">
$("#datetime").datetimepicker({
    format: 'yyyy-mm-dd hh:ii'
});
</script>

Datetime Picker y autocerrado

Una vez que el usuario seleccione una fecha y una hora, el datetimepicker se cerrará automáticamente.

<input size="16" type="text" class="form-control" id="datetime" readonly>

<script type="text/javascript">
$("#datetime").datetimepicker({
    format: 'yyyy-mm-dd hh:ii',
    autoclose: true
});
</script>

Datetime Picker y enlace a Hoy

En el enlace a Hoy aparecerá debajo del datetimepicker para seleccionar la fecha y la hora actual.

<input size="16" type="text" class="form-control" id="datetime" readonly>

<script type="text/javascript">
$("#datetime").datetimepicker({
    format: 'yyyy-mm-dd hh:ii',
    autoclose: true,
    todayBtn: true
});
</script>

Datetime Picker inline

<div id="datetime"></div>

<script type="text/javascript">
$("#datetime").datetimepicker();
</script>

Enviar e insertar el valor del DateTime en base de datos

Ahora vamos a ver como el enviar el campo datetime a un PHP, y a insertarlo en una base de datos MySQL. Para que me entendáis mejor, vamos a desarrollar un ejemplo en PHP que envíe el nombre del evento y la fecha y hora, y la inserte en la base de datos.

Código HTML

<form method="post" action="">
    Event: <input type="text" name="event_name" class="form-control">
    Date & Time: <input size="16" type="text" name="event_datetime" class="form-control" id="form_datetime" readonly>
    <input type="submit" name="submit" class="btn button btn-success" value="SUBMIT" />
</form>

Código Javascript

Se añadirá un calendario al campo #form_datetime. También, desactivaremos las fechas antes de hoy para que el usuario no las pueda seleccionar.

<script type="text/javascript">
$(function () {
    var today = new Date();
    var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
    var time = today.getHours() + ":" + today.getMinutes();
    var dateTime = date+' '+time;
    $("#form_datetime").datetimepicker({
        format: 'yyyy-mm-dd hh:ii',
        autoclose: true,
        todayBtn: true,
        startDate: dateTime
    });
});
</script>

Código PHP

Una vez que el formulario ha sido enviado, el nombre del evento y la fecha y hora se insertarán en la base de datos mediante este código:

<?php
if(isset($_POST['submit']) && !empty($_POST['event_name']) && !empty($_POST['event_datetime'])){
    //db details
    $dbHost = 'localhost';
    $dbUsername = 'root';
    $dbPassword = 'root';
    $dbName = 'codexworld';
    
    //Connect and select the database
    $db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
    
    //Insert datetime into the database
    $name = $db->real_escape_string($_POST['event_name']);
    $datetime = $db->real_escape_string($_POST['event_datetime']);
    $insert = $db->query("INSERT INTO events (name,datetime) VALUES ('".$name."', '".$datetime."')");
    
    //Insert status
    if($insert){
        echo 'Event data inserted successfully. Event ID: '.$db->insert_id;
    }else{
        echo 'Failed to insert event data.';
    }
}
?>

Fuente: codexworld.com