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
Have a fresh tip? Share with Coderwall community!
JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.
Security insights from Cside