Bootstrap Datetimepicker – Add Date-Time Picker to Input Field

Datetime:2017-04-18 05:23:41         Topic: Bootstrap          Share        Original >>
Here to See The Original Article!!!

If your website uses Bootstrap framework, adding a datetimepicker to the form field is very easy. The bootstrap-datetimepicker plugin provides an easy way to add datetime picker in bootstrap form element. Using this datetimepicker, the user can select day, month, year, hour, and minute with one click.

In this tutorial, we’ll show how you can add a datetimepicker in the form field to select date and time. The bootstrap-datetimepicker plugin is an instant solution to add datetimepicker in a form field. Here we’ll provide the example code to integrate datetimepicker in the bootstrap form.

Bootstrap

The following Bootstrap libraries and the jQuery library are required to use Bootstrap framework in the web application.

<!-- 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

Include the CSS and JS library of the bootstrap-datetimepicker project.

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

Datetime Picker

The following code adds datetimepicker to pick the date & time.

<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 & Auto Close

Once the user selects a date & time, the datetimepicker will be closed automatically.

<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 & Today Link

The Today link will appear under the datetimepicker to select today’s date and the current time.

<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>

Inline Datetime Picker

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

Bootstrap DateTime Picker has various options for datetimepicker method, you can get the details from here .

Submit & Insert DateTime into the Database

Now you’ll learn how to submit the datetime form field and insert as DATETIME format into the database using PHP and MySQL. For the better understanding, we’ll build an example PHP script that submits the event name and date & time into the MySQL database.

HTML Code:

The following HTML contains two form fields, one for text data and another for datetime.

<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>

JavaScript Code:

A datetimepicker will be added to the “#form_datetime” input field. Also, all earlier dates will be disabled for preventing user select a previous date.

<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>

PHP Code:

Once the form is submitted, the event name and event date & time will be inserted into the database with PHP and MySQL.

<?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.';
    }
}
?>

Are you want to get implementation help, or modify or extend the functionality of this script?Submit paid service request








New