
Tempus Dominus with Laravel 6
From: tristan | Comments: 0If 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.
Leave a Reply