Last Updated: February 25, 2016
· chrisbumgardner

Creating a great looking responsive date range form with validation


Check out a live demo of the form here:

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. I wrote this originally as a means to select a range of dates of time-based data to run a report on.

It was built using:
- jQuery
- jQuery UI DatePicker
- jQuery Validation
- Zurb Foundation - excellent responsive UI framework (grids, forms, typography, etc)

You can play with the code here: or view the source JavaScript here:

2 Responses
Add your response

nicely done!

over 1 year ago ·

Hm the jsFiddle doesn't work, it only has HTML and no CSS/JS

over 1 year ago ·