Last Updated: February 25, 2016
·
1.846K
· chrisbumgardner

Creating a great looking responsive date range form with validation

Picture

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.

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 ·