"Untitled"
Bootstrap 4.1.1 Snippet by ravi7284007

<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' });

Related: See More


Questions / Comments: