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

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <form method="post" action="" enctype="multipart/form-data">
    <div class="row">
      <div class="col-sm-6">
        <div class="form-group">
          <label for="review_date">Valid until *</label>
          <input id="review_date" type="text" name="review_date" value="26.10.2016" class="form-control">
          <p>Please set a validation date. (max 3 years)</p>
        </div>
      </div>
    </div>
  </form>
</div>
<!-- Modal -->
<div class="modal fade" id="info_modal" tabindex="-1" role="dialog" aria-labelledby="modal_title">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="modal_title">Dialog</h4>
      </div>
      <div class="modal-body">
        <div class="form-group mbn">
          <p class="mb10">Date successfully changed.</p>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
      </div>
    </div>
  </div>
</div>

JavaScript

var datumfeld = $("#review_date");
	var initialdatum = datumfeld.val();
  var i = 0;
	datumfeld.datepicker({
	  minDate: 0,
	  maxDate: "3y",
	  dateFormat: 'dd.mm.yy'
	});
	datumfeld.change(function() {
  	i++;
	  console.log('onchange triggered: ' + i);
	  if (validateDatum()) {
	    $("#info_modal").modal({
	      backdrop: "static",
	      keyboard: false
	    });
	  }
	});

	function validateDatum() {
	  var dateParts = datumfeld.val().split(".");
	  var review_date = new Date(dateParts[2], (dateParts[1] - 1), (parseInt(dateParts[0]) + 1));
	  if (((new Date(review_date - (new Date()))).getFullYear() - 1970) > 2) {
	    alert("Error: The date must not exceed 3 years from now.");
	    datumfeld.val(initialdatum);
	    return false;
	  }
	  if ((review_date - (new Date)) < 0) {
	    alert("Error: The date must not be in the past.");
	    datumfeld.val(initialdatum);
	    return false;
	  }
	  return true;
	}