Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css">
Min
<input name='cal_min' data-type='min' data-target=".my_calendar" class="form-control my_calendar">
Max
<input name='cal_max' data-type='max' data-target=".my_calendar" class="form-control my_calendar">

<br>
<br>

Min 2
<input name='cal_min' data-type='min' data-target=".my_calendar2" class="form-control my_calendar2">
Max 2
<input name='cal_max' data-type='max' data-target=".my_calendar2" class="form-control my_calendar2">

JavaScript

$(document).ready(function(){

  $.calendar_max_min = function(){
  
    var ths = $(this);
    var caltarget = ths.data("target");
    var calcheck = ths.data("calcheck");
    var calmin  = (ths.data("type") === "min") ? '' : $(caltarget+"[data-type='min']").prop("value");
    var calmax  = (ths.data("type") === "max") ? '' : $(caltarget+"[data-type='max']").prop("value");
    console.log(calmin);
    console.log(calmax);
    
         if(!calcheck){
           ths.attr("data-calcheck","true");
           ths.datepicker({
           format: 'dd/mm/yyyy',
           startDate: calmin,
           endDate: calmax
         		});
            ths.datepicker("show");
         }else{
            ths.datepicker("destroy");
           ths.datepicker({
           format: 'dd/mm/yyyy',
           startDate: calmin,
           endDate: calmax
         		});
            ths.datepicker("show");
         }
  };
  
  $(".my_calendar, .my_calendar2").on("click",$.calendar_max_min);

});