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
Laravel 9 Many To Many Polymorphic Relationship
Laravel 9 Many To Many Polymor...

In this article, we will see laravel 9 many to many polymorphic relationship. many to many polymorphic relationship more...

Read More

Apr-06-2022

How To Upload Multiple Image In Laravel 9
How To Upload Multiple Image I...

 In this article, we will see how to upload multiple images in laravel 9. here, we will see the tutorial of multipl...

Read More

Mar-18-2022

How To Get Last 7 Days Record In Laravel 8
How To Get Last 7 Days Record...

In this example, we will see how to get the last 7 days record in laravel 8. You can simply get the last 7 days record u...

Read More

Jan-31-2022

How To Add Date Range Picker In Angular 15 Material
How To Add Date Range Picker I...

In this tutorial, I will guide you through the process of adding a date range picker component to your Angular 15 applic...

Read More

Jun-30-2023