Date Range Form with Validation

By Chris Bumgardner Built with jQuery, jQuery UI DatePicker, jQuery Validation, and Zurb Foundation This form allows choosing a date range from any previous day up to and including today's date. When a start date is selected, the end date cannot come before it. When an end date is selected, the start date cannot come after it. Dates are represented in ISO-8601 format "YYYY-MM-DD" and are validated on the client.

by chrisbumgardner

HTML

<script src="https://raw.github.com/jzaefferer/jquery-validation/master/jquery.validate.js"></script>
<link rel="stylesheet" href="http://foundation.zurb.com/stylesheets/docs/presentation.css">
<br>
<div class="container">
    <div class="row"><div class="six columns">
    <h2>Date Range Form</h2>
    <h5 class="small">By <a href="https://github.com/cbumgard" target="_blank">Chris Bumgardner</a></h5>
    <h3 class="subheader">Built with <a href="http://jquery.com/" target="_blank">jQuery</a>, <a href="http://api.jqueryui.com/datepicker/" target="_blank">jQuery UI DatePicker</a>, <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" target="_blank">jQuery Validation</a>, and <a href="http://foundation.zurb.com/" target="_blank">Zurb Foundation</a></h3>    
    <h5 class="subheader">This form allows choosing a date range from any previous day up to and including today's date. When a start date is selected, the end date cannot come before it. When an end date is selected, the start date cannot come after it. Dates are represented in <a href="http://en.wikipedia.org/wiki/ISO_8601" target="_blank">ISO-8601</a> format "YYYY-MM-DD" and are validated on the client.</h5>
    <div>
<form id="download-csv" method="post" action="#" class="date-range nice">
  <fieldset>
      <legend>Date Range Form</legend>
      <h4 class="subheader">Please select a range of dates:</h4>
      <div class="row"><div class="six columns">
      <label>Start Date (required)&nbsp;<a id="reset-start-date" href="#" tabindex="-1">Reset</a></label>
      <input id="start-date" type="text" name="startDate" tabindex="1" class="dateISO input-text small required" placeholder="Please select a start date"/>

      <label>End Date (required)&nbsp;<a id="reset-end-date" href="#" tabindex="-1">Reset</a></label>
      <input id="end-date" type="text" name="endDate" tabindex="2" class="dateISO input-text small required" placeholder="Please select an end date"/>
      <input type="submit"...

JavaScript

$(document).ready(function() {
  // Initialize date pickers and form validation:
  $('form.date-range #reset-start-date').click(function(e) {
    e.preventDefault ? e.preventDefault() : e.returnValue = false; // stop link. returnValue is IE stuff
    $('form.date-range #start-date').datepicker('setDate', null); // null means reset
    onStartDate(''); // reset min start date
  });
  $('form.date-range #reset-end-date').click(function(e) {
    e.preventDefault ? e.preventDefault() : e.returnValue = false; // stop link. returnValue is IE stuff
    $('form.date-range #end-date').datepicker('setDate', null); // null means reset
    onEndDate(''); // reset max end date
  });    
  var onStartDate = function(date) {
    var minEndDate = (date !== '') ? date : null; // null means no minimum, the default min
    $('form.date-range #end-date').datepicker('option', 'minDate', minEndDate);
  };
  var onEndDate = function(date) {
    var maxStartDate = (date !== '') ? date : 0; // 0 means today, the default max
    $('form.date-range #start-date').datepicker('option', 'maxDate', maxStartDate);
  };    
  $('form.date-range #start-date').datepicker({ 
    maxDate: 0, // nothing past today
    dateFormat: 'yy-mm-dd', // Equiv to ISO-8601 'YYYY-MM-DD' which allows dateISO validation
    onClose: onStartDate
  }); 
  $('form.date-range #end-date').datepicker({ 
    maxDate: 0, // nothing past today
    dateFormat: 'yy-mm-dd', // Equiv to ISO-8601 'YYYY-MM-DD' which allows dateISO validation
    onClose: onEndDate
  });
  $('form.date-range').validate();
});