Recently I started upgrading one of my old projects that was written in plain php/javascript to start using Laravel. I started configuring some basic stuff like select2, tinymce, date(time)picker and there is where I got stuck. Somehow the calendar(date) part isn't displaying properly in the default mode.
Here is my javascript and html code for configuring the datetimepicker.
Javascript:
$(function() {
$('input.date-time-picker#picker1').datetimepicker({
format: 'YYYY-MM-DD HH:mm',
icons: {
clear: 'fa fa-trash fa-fw',
close: 'fa fa-times fa-fw',
date: 'fa fa-calendar fa-fw',
down: 'fa fa-chevron-down fa-fw',
next: 'fa fa-chevron-right fa-fw',
previous: 'fa fa-chevron-left fa-fw',
time: 'fa fa-clock-o fa-fw',
up: 'fa fa-chevron-up fa-fw',
today: 'fa fa-calendar-times-o fa-fw'
},
/* sideBySide: true, */
showClear: true,
showClose: true,
showTodayButton: true,
});
$('input.date-time-picker#picker2').datetimepicker({
format: 'YYYY-MM-DD HH:mm',
icons: {
clear: 'fa fa-trash fa-fw',
close: 'fa fa-times fa-fw',
date: 'fa fa-calendar fa-fw',
down: 'fa fa-chevron-down fa-fw',
next: 'fa fa-chevron-right fa-fw',
previous: 'fa fa-chevron-left fa-fw',
time: 'fa fa-clock-o fa-fw',
up: 'fa fa-chevron-up fa-fw',
today: 'fa fa-calendar-times-o fa-fw'
},
sideBySide: true,
});
});
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Datetimepicker error</title>
<meta name="description" content="Bootstrap 4 datetimepicker error">
<meta name="author" content="Reflexecute">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
Wrong
</div>
<div class="card-body">
<div class="form-group">
<span class="label"><i class="fa fa-calendar"></i> Date time picker</span>
<input type="text" name="date-time-picker" id="picker1" class="form-control date-time-picker">
</div>
</div>
</div>
<div class="card">
<div class="card-header">
Sidebyside workaround
</div>
<div class="card-body">
<div class="form-group">
<span class="label"><i class="fa fa-calendar"></i> Date time picker</span>
<input type="text" name="date-time-picker" id="picker2" class="form-control date-time-picker">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here is a js fiddle with the error and a workaround: https://jsfiddle.net/Reflexecute/v6uzL2r9/
The workaround(sideBySide: true => side-by-side view) works for now but I prefer the default view since the side-by-side view doesn't have the clear, today and close buttons.
Does anybody have a suggestion because all the errors/fixes I could find are related to now showing at all and didn't fix it.
You can force the toolbar with the close button to display when usingsideBySide by setting toolbarPlacement to "top" or "bottom".
Try
toolbarPlacement: "bottom"