In this article I will explain with an example, how to implement Bootstrap DateTimePicker in HTML.
 
 
Download Bootstrap DateTimePicker Plugin
You will need to download the plugin files from the following location.
Bootstrap DateTimePicker
The complete documentation is available on the following page.
https://getdatepicker.com/4/#bootstrap-3-datepicker-v4-docs
 
 
HTML Markup
The following HTML Markup consists of an HTML TextBox and a HTML Input Button.
The HTML TextBox has been assigned Bootstrap classes and is associated with an HTML SPAN element which displays the FontAwesome Glyphicon Calendar Icon.
<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date'>
                    <input type='text' class="form-control" id='txtDateTime' />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <input type="button" id="btnSubmit" value="Submit" class="btn btn-primary" />
            </div>
        </div>
    </div>
</div>
 
 
Bootstrap DateTimePicker Plugin implementation
Inside the HTML Markup, first the following CSS files are inherited.
1. bootstrap.min.css
2. font-awesome.min.css
3. bootstrap-datetimepicker.css
 
And then, the following JS scripts are inherited.
1. jquery.min.js
2. bootstrap.min.js
3. moment-with-locales.min.js
4. bootstrap-datetimepicker.min.js
Inside the jQuery document ready event handler, the HTML TextBox has been applied with the Bootstrap DateTimePicker plugin and also the HTML SPAN element with class glyphicon-calendar has been assigned with jQuery Click event handler.
Inside the Click event handler, the focus function of the HTML TextBox is called which displays the Bootstrap DateTimePicker Calendar.
Also the HTML Button has been assigned with jQuery Click event handler.
Inside the Button Click event handler, the value of the selected Date and Time is displayed using JavaScript Alert Message Box.
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#txtDateTime").datetimepicker();
        $('.glyphicon-calendar').click(function () {
            $("#txtDateTime").focus();
        });
        $("#btnSubmit").on("click", function () {
            var dt = new Date($("#txtDateTime").val());
            alert("Selected Date and Time: " + dt.toLocaleString());
        });
    });
</script>
 
 
Screenshot
Implement Bootstrap DateTimePicker in HTML
 
 
Browser Compatibility

The above code has been tested in the following browsers.
Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code