En este tutorial, explicaré cómo implementar Bootstrap Datepicker en PHP y MySQL usando Ajax. Te guiaré paso a paso sobre cómo trabajar. Entonces, en este ejemplo, crearemos una función que le pregunta al usuario su fecha de nacimiento.
Con la ayuda de Bootstrap Datepicker, podemos implementar un proceso rápido con una excelente interfaz de usuario en lugar de hacerlo desde cero o simplemente usar un selector de fechas nativo en Chrome que no es compatible con otros navegadores.
Archivo index.html
El siguiente es el código fuente completo de index.html:
<!doctype html>
<html lang="en">
<head>
<title>How To Use Bootstrap Datepicker in PHP & MySQL using Ajax</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Bootstra Datepicker CSS -->
<link rel="stylesheet" href="assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css">
</head>
<body>
<div class="container">
<br><br>
<h1>How To Use Bootstrap Datepicker in PHP & MySQL using Ajax</h1>
<br><br>
<form action="process.php" id="form">
<div class="form-group">
<label for="email">Date Of Birth:</label>
<input class="date form-control" type="text" name="date-of-birth">
</div>
<button type="button" class="btn btn-primary" id="btnSubmit">Submit</button>
</form>
</div>
<!-- Must put our javascript files here to fast the page loading -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Bootstrap Datepicker JS -->
<script src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<!-- Page Script -->
<script src="assets/js/scripts.js"></script>
</body>
</html>
Archivo script.js
A continuación, nuestro javascript se llama scripts.js, importado del código anterior. Por favor revise los comentarios en cada línea para que pueda comprender el proceso.
$(document).ready(function() {
// Initialize the datepicker
$('.date').datepicker({
todayHighlight: true, // to highlight the today's date
format: 'yyyy-mm-dd', // we format the date before we will submit it to the server side
autoclose: true //we enable autoclose so that once we click the date it will automatically close the datepicker
});
$("#btnSubmit").on("click", function() {
var $this = $("#btnSubmit"); //submit button selector using ID
var $caption = $this.html();// We store the html content of the submit button
var form = "#form"; //defined the #form ID
var formData = $(form).serializeArray(); //serialize the form into array
var route = $(form).attr('action'); //get the route using attribute action
// Ajax config
$.ajax({
type: "POST", //we are using POST method to submit the data to the server side
url: route, // get the route value
data: formData, // our serialized array data for server side
beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click
$this.attr('disabled', true).html("Processing...");
},
success: function (response) {//once the request successfully process to the server side it will return result here
$this.attr('disabled', false).html($caption);
// We will display the result using alert
alert(response);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// You can put something here if there is an error from submitted request
}
});
});
});
Crear tabla de base de datos
A continuación, cree nuestra tabla de base de datos. Si ya creó su base de datos, continuaremos y crearemos nuestra tabla "dob" como su nombre de tabla. Aquí está el código:
CREATE TABLE `dob` (
`id` int(11) NOT NULL,
`dob` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
Archivo proceso.php
A continuación, nuestro último fragmento de código se encarga de guardar los datos enviados:
<?php
$request = $_REQUEST; //a PHP Super Global variable which used to collect data after submitting it from the form
$date = $request['date-of-birth']; //get the date of birth from collected data above
$servername = "localhost"; //set the servername
$username = "root"; //set the server username
$password = ""; // set the server password (you must put password here if your using live server)
$dbname = "demos"; // set the table name
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
// Set the INSERT SQL data
$sql = "INSERT INTO dob (dob)
VALUES ('".$date."')";
// Process the query so that we will save the date of birth
if (mysqli_query($conn, $sql)) {
echo "New record created successfully.";
} else {
return "Error: " . $sql . "<br>" . mysqli_error($conn);
}
// Close the connection after using it
mysqli_close($conn);
?>
Ahora puede habilitar el selector de fecha de arranque para guardar los datos en el formulario utilizando PHP y MySQL Ajax.