• Seo Expert
  • Khaali Paper

Bootstrap Datepicker

Simple Bootstrap Date Picker is used for creating a calendar.

  • Html
  • JavaScript
  • Example
<div class="form-group">
  <label for="inputState">Calendar</label>
  <div class='input-group date w150' id='datetimepicker1'>
    <input type='text' class="form-control" />
    <span class="input-group-addon">
    <span><i class="fa fa-calendar" aria-hidden="true"></i></span>
    </span>
  </div>
</div>
<script type="text/javascript">
  $(document).ready(function () {
    $('#datetimepicker1').datepicker({
        format: "dd/mm/yyyy",
        language: "es",
        autoclose: true,
        todayHighlight: true
    });
  });
</script>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap.min.css">
    <title>Hello, world!</title>
    <link href="source/bootstrap-datepicker.css" rel="stylesheet">
  </head>
  <body>
    <h1>HTML File Upload</h1>

    <div class="form-group">
      <label for="inputState">Calendar</label>
      <div class='input-group date w150' id='datetimepicker1'>
        <input type='text' class="form-control" />
        <span class="input-group-addon">
        <span><i class="fa fa-calendar" aria-hidden="true"></i></span>
        </span>
      </div>
    </div>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="jquery-3.3.1.slim.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="source/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $('#datetimepicker1').datepicker({
            format: "dd/mm/yyyy",
            language: "es",
            autoclose: true,
            todayHighlight: true
        });
      });
    </script>
  </body>
</html>
Current Date:
<div class="form-group">
  <label for="inputState">Current Date</label>
  <div class="input-group date" id="datePicker">
     <input type="text" class="form-control" name="date" value="">
     <span class="input-group-addon">
        <i class="glyphicon glyphicon-calendar"></i>
        OR
        <i class="fa fa-calendar" aria-hidden="true"></i>
     </span>
  </div>
</div>
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$( '#datePicker' ).datepicker( 'setDate', today );

Bootstrap DateTimePicker

You can customize this code further as per your requirement.