Bootstrap DateTimePicker Example
Websolutionstuff | Apr-02-2021 | Categories : Laravel PHP jQuery
In this post i will show you how to implement bootstrap datetimepicker with example, bootstrap 4 datetimepicker is use to dispaly date as well as time in html, php or any laravel file.
Here, we will use use some jquery js, bootstrap css and js and bootstrap datetime-picker css and js for this date time picker example, jquery datepicker time provide many customised functionalities to user.
First of all we need to add JS and CSS in your <head> section.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
Now we will add bootstrap datetime-picker we need to add below code.
<div class="container">
<br><br><br>
<div class='col-sm-6'>
<div class="form-group">
<label for="">Date and Time</label>
<div class='input-group date' id='datetime'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#datetime').datetimepicker();
});
</script>
If you want to disable to select current date then add below code.
<script type="text/javascript">
$(function () {
$('#example').datetimepicker({
useCurrent: false,
});
});
</script>
If you want to set minimum date then below function is useful.
<script type="text/javascript">
$(function () {
$('#mindate').datetimepicker({
minDate : new Date(),
});
});
</script>
You can change date formate as well as as per your requirment.
<script type="text/javascript">
$(function () {
$('#dateformat').datetimepicker({
format:'Y-M-d'
});
});
</script>
Recommended Post
Featured Post
How To Change Month Name In jQ...
In this article, we will see how to change the month name in jquery datepicker. In the date picker, we can change t...
Jul-01-2022
How To Get Current User Locati...
In this article, we will see how to get the current user location in laravel 9. Many times we are required to...
Mar-23-2022
How to Create Custom Login and...
In the ever-evolving landscape of web development, crafting a tailor-made user authentication system stands as a pivotal...
Aug-25-2023
How To Image Upload In CKedito...
In this article, we will see how to image upload in CKEditor with laravel 10. Here, we will learn about image uploa...
May-08-2023