Creating a great looking responsive date range form with validation
Check out a live demo of the form here: http://jsfiddle.net/chrisbumgardner/VzYQn/embedded/result/
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: http://jsfiddle.net/chrisbumgardner/VzYQn/ or view the source JavaScript here: https://gist.github.com/cbumgard/4742703.
Written by Chris Bumgardner
Related protips
2 Responses

nicely done!

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