Date Range Form with Validation. Live demo: http://jsfiddle.net/chrisbumgardner/VzYQn/2/embedded/result/. 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.…

date-range-form.html

<br>
<div class="container">
    <div class="row">
        <div class="six columns">
             <h2>Date Range Form</h2>

             <h5 class="small">By <a href="https://gist.github.com/cbumgard/4742703" 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><a href="http://jsfiddle.net/chrisbumgardner/VzYQn/" target="_blank">See the jsFiddle</a></h5>

             <h5><a href="https://gist.github.com/cbumgard/4742703" target="_blank">See the Gist</a></h5> 
             <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" value="Submit" tabindex="3" class="nice radius large blue button"
                                />
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>

date-range-form.js

$(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();
});

Demo: http://jsfiddle.net/chrisbumgardner/VzYQn/embedded/result/

Editable: http://jsfiddle.net/chrisbumgardner/VzYQn/

Hello @cbumgard

I tried the links, but they aren't working anymore (they have issues). Please check.

Demo: http://jsfiddle.net/chrisbumgardner/VzYQn/embedded/result/

Editable: http://jsfiddle.net/chrisbumgardner/VzYQn/