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" onsubmit="return handleSubmit();">
                <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" data-controls-modal="info_modal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="modal_title" data-keyboard="false">
            <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>
                 ...

JavaScript

$(document).ready(function() {
                var datumfeld = $("#review_date");
                var initialdatum = datumfeld.val();
                var i = 0;
                datumfeld.datepicker({
                  minDate: 0,
                  maxDate: "3y",
                  dateFormat: 'dd.mm.yy'
                });
                datumfeld.change(function(e) {
                i++;
                  console.log('onchange triggered: ' + i);
                  if (validateDatum()) {
                    e.preventDefault();
                    $("#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;
                  }
                  else if ((review_date - (new Date)) < 0) {
                    alert("Error: The date must not be in the past.");
                    datumfeld.val(initialdatum);
                    return false;
                  } else {
                    return true;
                  }
                }

                function handleSubmit() {
                    console.log("form submitted....");
                    return false;
                }
            });