Tempus Dominus with Laravel 6

If you are looking for a nice responsive date-time input form, tempus dominus may be the right JS library for you. It is a nice jQuery Plugin and designed for Bootstrap 4. Here you find how to use this library in your Laravel 6 project with webpack.

Install Libraries

First of all, you’ll need to install two libraries. One is tempus dominus itself and the other one is moment.js. Last library is a date-time formatting library. More about this lib you will find here: https://momentjs.com/

Install moment.js:

npm install moment --save  

Install tempus dominus:

 npm install tempusdominus-bootstrap-4 --save

Add SASS File to your App

Got to your app.scss in the resources/sass directory and add these line at the bottom of your code:

@import '~tempusdominus-bootstrap-4/src/sass/tempusdominus-bootstrap-4-build'; 

JavaScript Setup

Now go to your bootstrap.js file in the resoruces/js directory and add the libraries to your app.

window.moment = require('moment');
window.datetimepicker = require('tempusdominus-bootstrap-4');

Also at the end of your bootstrap.js file you can initialize a datepicker. Here is an example:

$(function () {
    $('#datetime').datetimepicker({
        inline: true,
        sideBySide: true,
    });
});

HTML Part

Add this line i.e. to show the date-time picker.

<div style="overflow:hidden;">
    <div class="form-group">
        <div class="row">
            <div class="col-md-8">
                <div id="datetime"></div>
            </div>
        </div>
    </div>
</div>

Compile CSS and JS

Run npm run dev to compile your CSS and JS code. If everything is fine, you will see now your date-time-picker in your app.

For more examples and informations, visit the website of tempus dominus.