jQuery Interactive Date Range Picker with Shortcuts
Posted by Scott and Maggie on 05/14/2008
Note: We've created a new article with some major improvements to this plugin. To read the article and download the script, visit Date Range Picker using jQuery UI 1.7 and jQuery UI CSS Framework.
We recently modified jQuery UI's Datepicker, created and maintained by jQuery UI contributor Marc Grabanski. Our version is optimized for quickly selecting a date from a list of preset dates/ranges, and we added smooth transitions when additional options are revealed.
Our modifications to the original date picker include:
- shortcut links to preset date ranges, for example, "Past 30 days" or "Current YTD,"
- links to "All dates before..." and "All dates after..." to simplify selecting a range of values where the data set is very large or the high or low end value is an unknown, and
- only showing the number of calendars needed for choosing a particular range (i.e., you only need one calendar to choose "All dates before...", but you'll need two to select a custom range).
The interactive date range picker shown here is not coded for ease of modification, but is free to reuse and modify with a proper attribution to Filament Group. Feel free to visit our demo page and view the source code to see how it works.