Search code examples
jquerybootstrap-4bootstrap-datetimepickereonasdan-datetimepicker

Bootstrap datetimepicker now showing calendar

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.

Solution

  • You can force the toolbar with the close button to display when usingsideBySide by setting toolbarPlacement to "top" or "bottom".

    Try toolbarPlacement: "bottom"