Datepicker in Bootstrap

Datepicker is very useful while you want to perform date and time related operation. it give very unique look to your html form.

many developer face various kind of problems on integration datepicker to their website, and finally we write code for easy integration of bootstrap datepicker.

Header of Page

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" async="" src="https://apis.google.com/js/platform.js" gapi_processed="true"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css">

HTML Code

<form method="post">
   <div class="form-group">
      <label for="email">Datepicker :</label>
      <input class="form-control" placeholder="Datepicker" name="date" type="text">
   </div>
</form>
<br><br>
<div class="row">
   <div class="col-md-12">
      <label for="email">Inline Datepicker :</label>
      <div class="datepicker"></div>
      <input class="form-control selected_inline_date" type="text">
   </div>
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *