JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div>
<div style="padding-top: 25px;">
<center><h1>jQuery Datetimepicker</h1></center>
</div>
<br />
<div class="row">
<div class='col-sm-4'>
</div>
<!-- DATETIMEPICKER -->
<div class='col-sm-4'>
<label>Date Time Picker:</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<label>Date Picker:</label>
<div class="form-group">
<div class='input-group date' id='datepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<label>Time Picker:</label>
<div class="form-group">
<div class='input-group date' id='timepicker'>
<input type='text' class="form-control" />
...
JavaScript
$(function () {
$('#datetimepicker').datetimepicker({
format: 'DD MM YYYY HH:mm',
});
$('#datepicker').datetimepicker({
format: 'DD MMMM YYYY',
});
$('#timepicker').datetimepicker({
format: 'HH:mm'
});
});