<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js'></script>
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
<div id="datetimepicker12"></div>
</div>
</div>
.bootstrap-datetimepicker-widget table {
border-collapse: separate;
border-spacing: 15px;
}
.bootstrap-datetimepicker-widget table td.day {
height: 55px;
line-height: 20px;
width: 20px;
border: 1px solid;
border-radius: 0;
}
th.prev {
text-align: left !important;
}
th.next {
text-align: right !important;
}
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
background-color: transparent;
}
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
background-color: #0035f0;
}
.bootstrap-datetimepicker-widget table th {
font-size: 12px;
font-weight: 400;
width: 100px;
}
th.picker-switch {
font-size: 14px !important;
text-transform: uppercase;
font-weight: 700;
}
moment.locale('en', {
weekdaysMin: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satuarday"],
week: {
dow: 1,
} // Monday is the first day of the week
});
$('#datetimepicker12').datetimepicker({
inline: true,
format: 'DD-MM-YY',
stepping: 30,
minDate: moment(),
dayViewHeaderFormat: 'MMMM ',
viewMode: 'days'
});
