Bootstrap DateTimepicker Example
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">
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>
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 :
- Read Also : Laravel Signature Pad Example
- Read Also : Laravel 8 Autocomplete Search from Database
- Read Also : Laravel 8 Socialite Login with Facebook Account
- Read Also : How To Integrate Stripe Payment Gateway In Laravel 8
