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 Create Pie Chart in Vue 3 using vue-chartjs
How to Create Pie Chart in Vue...

Hello, web developers! In this article, we'll see how to create a pie chart in vue 3 using vue-chartjs. Here, w...

Read More

Jul-29-2024

Laravel whereBetween Query Example
Laravel whereBetween Query Exa...

In this article, we will see laravel whereBetween query example. SQL provides many different types of methods or qu...

Read More

Jan-13-2021

Building a Custom WebSocket Server with Laravel 11 and Ratchet
Building a Custom WebSocket Se...

In this tutorial, I'll walk you through the process of building a custom WebSocket server using Laravel 11 and Ratch...

Read More

Sep-23-2024

How to Add Select Clear Select2 Dropdown
How to Add Select Clear Select...

Hey everyone! Have you ever wanted to make your website's dropdown menus more interactive and user-friendly? Well, I...

Read More

Feb-19-2024