Save date data type(datepicker) to MySQL

According to wikipedia MySQL is a SQL database management system software (English: database management system) or DBMS. MySQL comes with several data types, one of which is for storing dates in its database system: DATE, TIMESTAMP, DATETIME and YEAR. MySQL has been established as the database platform of choice because of the undeniable quality of database servers. Data types DATE, TIMESTAMP, DATETIME and YEAR are widely used in date of birth, transaction date, article posting date, login date to the system and many more, you can check this tutorial about create database and the table in MySQL.

A date picker is popup calendar, date and time picker, or time picker is UI or user interface which allows the user to select a date from a calendar.

WHAT IS A BOOTSTRAP DATEPICKER

Bootstrap datepicker is a plugin that has the function of selecting the date and time without having to use special JavaScript code.

Here I use the bootstrap datepicker to display the date, month and year, the datepicker makes it easier for the user to choose the date to be input.

Content :

1.Creating databases and tables in MySQL
2.Create a config.php file
3.Create index.php page (Display Datepicker)
4.Create a save.php page

1.Creating databases and tables in MySQL

Creating database and table in MySQL in first step, because we will save datepicker value to the mysql database.

CREATE TABLE `tanggal` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`dates` date NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4

2. Create a config.php file

the config.php is a file that have functions to connecting to the database and tables we need, for the variables $server, $user, $pass, $database adjust your data, here’s the code:

<?php

$server = "localhost";
$user = "root";
$pass = "";
$database = "datadate";
 
$conn = mysqli_connect($server, $user, $pass, $database);
 
if (!$conn) {
    die("<script>alert('Gagal tersambung dengan database.')</script>");
}

?>

3. Create index.php page(Display Datepicker)

The index.php is the initial display which contains the form, input for the date (bootstrap datepicker) and the submit button, on this page the user will input the date and click the submit button to save the input data to the database. here I use the datepicker to input the date, here’s the code:

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

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Save data date to database MySQL</title>


</head>

<body>

<form action="save.php" method="POST" name="savebeli">     
    <div class="form-group col-md-3">
        <label for="inputPassword4">Tanggal </label>
        <input class="form-control" id="date" name="date" placeholder="mm/dd/yyyy" type="text"/>
        <input type="submit" class="btn btn-primary" value="Submit">
    </div>
</form>   

   
<script type="text/javascript" src="asset/jquery-1.11.3.min.js"></script>

<script type="text/javascript" src="asset/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="asset/bootstrap-datepicker3.css"/>

<link rel="stylesheet" href="asset/jquery-ui.css">
<script src="asset/jquery-ui.js"></script>

<script>
	$(document).ready(function(){

        
		//menampilkan datepicker
        var date_input=$('input[name="date"]'); //our date input has the name "date"
		var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
		date_input.datepicker({
			format: 'mm/dd/yyyy',
			container: container,
			todayHighlight: true,
			autoclose: true,
		})

       
    });

      
   
</script>

</body>

</html>

For Javascript and CSS for bootstrap datepicker can download from list below :

https://webbaliseo.com/download/bootstrap-datepicker.min.js
https://webbaliseo.com/download/bootstrap-datepicker3.css
https://webbaliseo.com/download/jquery-1.11.3.min.js
https://webbaliseo.com/download/jquery-ui.css
https://webbaliseo.com/download/jquery-ui.js

After download the file you can include it to your project

4. Create save.php file

The save.php file is useful for saving date data types to the database, here is the code below :

<?php
require 'config.php';
$tgl = date('Y-m-d', strtotime($_POST['date']));
$result = mysqli_query($conn, "INSERT INTO tanggal(dates) VALUES ('$tgl')");
if($result)
{
    echo "<script>alert('Data berhasil di simpan') </script>";
    echo "<script>window.location.href ='index.php'</script>";
} else {
    echo "<script>alert('Data GAGAL di simpan') </script>";
    echo "<script>window.location.href ='index.php'</script>";
}
?>

Thus the tutorial on saving data type date to MySQL, happy coding…

Leave a Reply

Your email address will not be published. Required fields are marked *