jQuery Interactive Date Range Picker with Shortcuts
Posted by Scott and Maggie on 05/14/2008
- Topics:
- jQuery
- ui design
- visual design
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).
Working Demo:
View this demo in a new window
Development Notes
We built this demo using the principles of Progressive Enhancement. Markup consists of two standard HTML input tags, so that when a device can't handle advanced scripting or has javascript disabled the date picker is still perfectly usable. As the page loads we run a quick test using our testUserDevice.js script to determine if the user's device is capable of rendering an enhanced experience. If the device passes our test, we transform the inputs into the interactive date range picker shown above. For more information on testUserDevice.js and Progressive Enhancement, check out Delivering the right experience to the right device.
Code Usage
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.
Comments
Hey Scott and Maggie, nice work! I’m glad to see a great use of the datepicker. Hopefully UI Datepicker v4 can offer something like this out of the box.
Comment by Marc Grabanski on 05/15 at 08:47 PM
This has to be the best calendar I’ve seen yet. Very well styled, very fluid, very easy to use.
Comment by Todd Rafferty on 05/16 at 07:10 AM
i’m consistently experiencing a bug where the ‘left arrow’ button which should decrement both dates of the range actually INCREMENTS the begin date but properly decrements the end date
Comment by Luka Kladaric on 05/16 at 07:46 AM
gracefully degrades in FF3 on OSX - the datepicker doesn’t render, but the two input fields do. Looks great in Safari, though
Comment by Bryan Buchs on 05/16 at 08:14 AM
Great up until the point I selected Date Range and the second calendar showed “NaN”.
Comment by RichB on 05/16 at 08:33 AM
Sorry, I should have given repro steps for the NaN bug....
1) Click the drop down
2) Click specific date
3) Choose a date and click Done.
4) Use the right arrow to advance the date by 1 day.
5) Click the drop down
6) Click date Range
Expected Result: Both calendars set to the same date as specified in the “specific date” scenario
Actual Result: Second calendar is empty and shows “Undefined NaN”.
Comment by RichB on 05/16 at 08:36 AM
This is gorgeous. I needed a model just like this. Perfect work.
Comment by Glen Lipka on 05/16 at 09:18 AM
One suggestion for improvement, after clicking to expand the dropdown and then mousing out of the dropdown area set a timeout to close after a couple of seconds. Browser dropdowns behave this way so it seems proper that a simulated dropdown would also behave this way.
Otherwise really slick work. I’m not sure where I’d use it, but I love the bar it sets for good experience.
Comment by Bryan on 05/16 at 12:10 PM
Right and left buttons don’t seem ot work too consistently or even predictably.
1. Date range Apr 19 to May 19 is selected at start in the demo. I press the RIGHT button to the right of the picker.
2. Now the range selected is May 20 to June 18, which is a bit surprising but acceptably valid.
3. I press the LEFT button: Range is now May 21 to May 20, which is clearly confusing.
4. I press LEFT again: May 22 to May 19.. uhmmm…
5. Press RIGHT now: May 23 to May 22 and I’m totally lost.
Comment by Venkman on 05/19 at 06:07 AM
yes this is the issue i was talking about in my original comment
Comment by Luka Kladaric on 05/19 at 06:09 AM
@Luka @Venkman: Thanks for pointing out the behavioral issues with the arrows. We know the script doesn’t always calculate the dates correctly when you tap the arrows (the logic is a bit complex), but we felt it was worth leaving in to illustrate the idea of providing arrows like this to allow for a quick and easy way to move forward and back through whatever time increment you select. Hopefully, this idea may eventually be baked into the standard jQuery UI calendar control as an option.
@everyone: We really appreciate your comments, specifically because we’re hoping these lab articles will spark a rich conversation about interaction design and hopefully encourage others to build upon the ideas we present. Since we’re not a ‘cut and paste’ javascript site, we’re posting these lab examples as a way to illustrate what we think are interesting user interface and interaction ideas that we want to share. The reason why we don’t offer downloads for some of these more complex widget scripts is they are not fully bullet-proof at this point so we have made the decision not to offer a zip file. We hope these posts will serve as a starting point for others to extend and refine. As others have mentioned, folding some of these ideas into the core jQuery library will make everyone’s life easier and we’re working with the UI team to see how we can make this happen.
If you do have ideas, criticism or technical issues with a lab article, please try to be as constructive and thoughtful as you can be when posting. If there is a browser rendering issue, please be as detailed as you can in describing your environment and click flow so we can try to reproduce it on our end. We are listening to everyone’s feedback and will try to refine these articles and widgets as time allows. Thanks to everyone posting all the positive feedback!
Comment by Todd (Filament) on 05/19 at 09:40 AM
The UI is great! Very intuitive.
Bummer about the left/right buttons not working properly, tho.
Comment by Randolpho on 05/19 at 10:08 AM
@Todd: I think I expected (looking at it from a user pov) the arrows to navigate through available predefined date ranges. Something having some ranges defined:
May 1 to May 15 - May 16 to May 31 - June 1 to June 15 - etc
and that the arrows should navigate through that. At least this was what I imagined the arrows could be for when I first saw them.
Anyway, I do think the picker is quite nice.
Comment by Venkman on 05/19 at 10:11 AM
Looks nice!
But if there were Minutes and Seconds it would be better! May be as extension
Comment by Friend on 05/25 at 12:23 PM
may 31 to may 30? huh? As a user it’s hard for me to tell what exactly I’m picking! 30 days previous to may 31 - may 30?
Comment by roger on 05/29 at 12:42 PM
Really fantastic!!
1. Can we have features like selecting the complete month of a year, Like June 2008 or March 2006, with month and year selection, so I get dates like 1st June 08 to 30th June 08 etc.
2. Left and right arrows are really confusing
3. What about selecting a time range while we select a day from today, tomorrow, yesterday or a specific date?
-Arvin
Comment by Arvin on 06/25 at 02:14 AM