Bootstrap 3 Template

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

by synz izynz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.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");
		var minsplit 	= calmin.split("-");
		var maxsplit 	= calmax.split("-");
		var newmin 		= false;
		var newmax 		= false;

		if(calmin !== ''){
			if(ths.data("type") === "max")
				newmin = new Date(minsplit[2]+"-"+minsplit[1]+"-"+minsplit[0]);
		}
		if(calmax !== ''){
			if(ths.data("type") === "min")
				newmax = new Date(maxsplit[2]+"-"+maxsplit[1]+"-"+maxsplit[0]);
		}

		     if(!calcheck){
				ths.attr("data-calcheck","true");
				ths.datepicker({
					format: 'dd-mm-yyyy',
					minDate: newmin ,
					maxDate: newmax ,
					autoClose: true
				});
				ths.datepicker("open"); /* Open Manually - Because we set datepicker on click */
		     }else{

				ths.datepicker("destroy"); /* Destroy old datepicker and recreate with new min/max date */
				ths.datepicker({
					format: 'dd-mm-yyyy',
					minDate: newmin ,
					maxDate: newmax ,
					autoClose: true
				});
				ths.datepicker("open"); /* Open Manually - Because we set datepicker on click */
		     }
		};

		$(".my_calendar, .my_calendar2").on("click",$.calendar_max_min);

	});