We have created the design of the date-time picker made by Eonasdan. We have changed the colors, typography and buttons, so it can look like the rest of the dashboard.
<div class="form-group">
<label>Input DateTime Picker</label>
<div class="input-group">
<input type="text" class="form-control" id="datetime" name="datetime">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-calendar"></i>
</span>
</div>
</div>
</div>
$('#datetime').datetimepicker({
format: 'MM/DD/YYYY H:mm',
});
<div class="form-group">
<label>Input Date Picker</label>
<div class="input-group">
<input type="text" class="form-control" id="datepicker" name="datepicker">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-calendar"></i>
</span>
</div>
</div>
</div>
$('#datepicker').datetimepicker({
format: 'MM/DD/YYYY',
});
<div class="form-group">
<label>Input Time Picker</label>
<div class="input-group">
<input type="text" class="form-control" id="timepicker" name="timepicker">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-clock"></i>
</span>
</div>
</div>
</div>
$('#timepicker').datetimepicker({
format: 'h:mm A',
});