How to Use Bootstrap Datetimepicker in Laravel Framework

How to Use Bootstrap Datetimepicker in Laravel Framework – Brillian Solution. Many times we need datetime picking options in our project. Bootstrap Datetimepicker is very useful to enable input field for date and time entry. Use datetimepicker, user can select date and time from the bootstrap datetimepciker dialog without typing manually in the input field. DateTime picker provides a user-friendly way to select date and time.

DateTimePicker plugin helps to add DateTime picker in the input element of the form using jQuery. It provides an instant solution to add datetimepicker popup in a form field for selecting date and time in the website. You can allow the user to select day, month, year, hour, and minute with one click from DateTimePicker. So let’s start with Laravel Bootstrap Datetimepicker easy way step by step easy way.

Step 1: Add Input Box in Blade File

First, you need to add input box for datetime picker, you can put input in php file or your blade just like the below code:

<div class="col-md-8">
        <input type="text" class="form-control datetimepicker" name="Appointment_time"> 
 </div>

Step 2: Ass CDN

Add the below libraries in your layouts or your blade file.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>

Step 3: Add Js

Now, time to initializing bootstrap datetimepicker, here we use datetimepicker using class name .datetimepicker or you can use it using ID.

$(function () {
    $('.datetimepicker').datetimepicker();
});
bootstrap-datetimepicker

You can read full of documentation for bootstrap-datetimepicker in here.

I hope this to be useful for your example it is useful to add bootstrap date time picker in your laravel project or you can use it in other framework or cms easily.

Leave a Reply

%d bloggers like this: