In this article, we will see how to implement a bootstrap date time picker with an example, bootstrap 4 date time picker is used to dispaly date as well as time in html, php, or any laravel file.
So, let's see bootstrap 4 datetimepicker, jquery date time picker, date time picker bootstrap, bootstrap 5 datetimepicker example, date time picker jquery.
Here, we will use use some jquery, 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">
Read Also : Laravel 8 Mobile Number OTP Authentication using Firebase
Now we will add a bootstrap DateTime picker. So, add the below code in your file.
<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 it to select the current date then add below code.
<script type="text/javascript">
$(function () {
$('#example').datetimepicker({
useCurrent: false,
});
});
</script>
Read Also : Laravel Accessor and Mutator Example
If you want to set minimum date then below function is useful.
<script type="text/javascript">
$(function () {
$('#mindate').datetimepicker({
minDate : new Date(),
});
});
</script>
Also, you can change the date formate as well as per your requirement.
<script type="text/javascript">
$(function () {
$('#dateformat').datetimepicker({
format:'Y-M-d'
});
});
</script>
You might also like :
Top comments (0)