Date Checker

by Shawn Wood

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.min.js"></script>
<div class="container">
  <form id="submissionForm" name="submission_frm" role="form" autocomplete="on">
    <div class="row">
      <div class="col-md-12">
        <div class="form-group required">
          <label class="control-label" for="incidentDt">Incident Date</label>
          <div class="input-group col-md-12">
            <input id="incidentDt" type="datetime" name="my.incidentDt" class="form-control" placeholder="mm/dd/yyyy or Click" data-msg-required="You must enter an Incident Date." required />
          </div>
        </div>
        <div class="form-group required">
          <label class="control-label" for="startDt">Start Date</label>
          <div class="input-group col-md-12">
            <input id="startDt" type="date" name="the.startDt" class="form-control" placeholder="mm/dd/yyyy or Click" data-msg-required="You must enter an Incident Date." required />
          </div>
        </div>
        <div class="form-group required">
          <label class="control-label" for="endDt">End Date</label>
          <div...

JavaScript

$(document).ready(function() {
  initializeDatePicker();
});

$('#testForm').on('click', function() {
  $('submissionForm').validate();
  if ($('submissionForm').valid()) {
    return true;
  }
});

jQuery.validator.setDefaults({
	debug: true,
	success: "valid",
	highlight: function(element) {
		$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
		$(element).nextAll('.form-control-feedback').removeClass('fa-check').addClass('fa-close');			  
	},
	unhighlight: function(element) {
    	  $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    	  $(element).nextAll('.form-control-feedback').removeClass('fa-close').addClass('fa-check');
	},
	errorElement: 'span',
	errorClass: 'help-block',
	errorPlacement: function(error, element) {
		showError(element);
		$(element).nextAll('.form-control-feedback').on('click', function () {
			  $(this).closest('.form-group').removeClass('has-error');
              $(element).closest('.form-group').removeClass('has-error');
			  $(element).nextAll('.form-control-feedback').removeClass('fa-close');
			  error.hide();
		});        
		if(element.parent('.input-group').length) {
			error.insertAfter(element.parent());
		} else {
			error.insertAfter(element);
		}
	}
});

function initializeDatePicker() {
  $('.input-group input[type="date"]:not([datepicker="true"])').each(function(index, elem) {
    $elem = $(elem);
    if ($elem.attr("readonly") || $elem.attr("disabled")) {
      $elem.datetimepicker({
        format: "MM/DD/YYYY",
        keyBinds: function(e) {
          e.preventDefault(); //prevent delete key from working
          return false;
        }
      });

    } else {
      $elem.datetimepicker({
        format: "MM/DD/YYYY",
        minDate: "01/01/1900"
      }).data("DateTimePicker");
    }
    $elem.attr('datepicker', 'true');
  });
  $('.input-group input[type="datetime"]:not([datepicker="true"])').each(function(index, elem) {
    $elem = $(elem);
   ...