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 Generate PDF and Send Email In Laravel 8
How To Generate PDF and Send E...

In this tutorial we will see how to generate pdf and send email in laravel 8. For generating PDF file we will use l...

Read More

Dec-20-2021

Laravel 9 Resize Image Before Upload
Laravel 9 Resize Image Before...

In this article, we will see how to resize image before uploading in laravel 9. we will install the intervention/im...

Read More

Jun-15-2022

How To Check Email Already Exist Or Not In Laravel
How To Check Email Already Exi...

In this article, we will show how to check whether the email already exists or not in laravel. Also, we will check...

Read More

Aug-07-2020

How to Display Validation Error Message in Laravel Vue JS
How to Display Validation Erro...

Hey folks, are you ready to make your Laravel Vue.js application even more user-friendly by implementing validation erro...

Read More

Mar-08-2024