How to Add and Use Bootstrap Datepicker in Laravel 10
In this quick bit-by-bit guide, we will explain how to add and use Bootstrap calendar in Laravel8 application with the help of Bootstrap CSS UI framework.
A date picker, popup calendar, date and time picker, or time picker is a graphical user interface component that lets the user to choose a date and time from a specific range date and time range.
It consists of a simple input field with the calendar icon; by clicking on this input element, a popup appears on the screen through which the user can select the date and time.
Bootstrap datepicker is an awesome tool that gives an easy way to integrate datepicker widget in laravel; its design is ready to use and highly useful to manage dates and time.
We will take the help of the jQuery library to implement and use the bootstrap date picker in the laravel app.
Create Laravel App
We assume you have already pre-installed the Composer tool; after that, execute the suggested command to install the latest laravel application.
Although, you may skip installation if the app is already installed on your system.
composer create-project --prefer-dist laravel/laravel laravel_datepickerNext, get into the newly created app directory:
cd laravel_datepickerImplement Bootstrap Datetime Picker in Laravel 10
In this step, you will integrate date time picker in Laravel application, import Bootstrap CSS, JavaScript via CDN, and import moment js and Bootstrap datetime picker CSS.
Then call the datetimepicker() method at the bottom to display and use the date picker in the laravel app.
Open and add recommended code in resources/views/welcome.blade.php file:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Integrate Bootstrap Datepicker in Laravel </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<div class="container mt-5" style="max-width: 450px">
<h2 class="mb-4">Laravel Bootstrap Datepicker Demo</h2>
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function() {
$('#datetimepicker').datetimepicker();
});
</script>
</html>Start Laravel Project
Lastly, type the given below command on the command prompt and execute the given below command and recklessly start the laravel development server.
php artisan serveYou may check the app by using the below url on the browser:
http://127.0.0.1:8000
Conclusion
Laravel bootstrap datetimepicker tutorial is over.
Throughout this guide, we shared the simple and immaculate example on how to add moment js in laravel to implement and use the data and time picker in the laravel app using the bootstrap datetime picker module.
