jQuery Interactive Date Range Picker with Shortcuts
Posted by Scott and Maggie on 05/14/2008
- Topics:
- jQuery
- ui design
- visual design
01/05/2009 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.6 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).
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
Hi,
I tried to download the demo page to check it before using in my application and it doesn’t have the right and left arrows for the dropdown. Could any one point me how I could download it for use on my company’s website?
Thanks,
-H
Comment by Hemanth on 08/05 at 10:10 AM
@Hemanth: we’re really encouraged by your interest in our code, however, the version you see here is our first proof of concept—it’s not ready for prime time so we didn’t make it readily available for download. We’re working on a new/improved version based on the latest jQuery UI datepicker widget (http://docs.jquery.com/UI) and will post it when ready. Until then, feel free to use the code you see here “as is” with proper attribution.
Comment by Maggie (Filament) on 08/05 at 10:36 AM
Hello, I was looking for a JS calendar widget and googled around the web to find the best one. This one looks quite promising, but after trying to manually install it on my webapp, it was still not working ok (it modified the look of my hosting page, and the style was not working).
You should indeed prepare a full archive with instruction as soon as possible - this could be one of the best calendar out there. I am wondering, does the API offer (or will offer) options to choose the preset options?
Comment by Jean-Noel Rivasseau on 08/15 at 10:50 AM
Have you seen this before?
http://ajaxorized.com/dateslider/slider.html
Comment by Andrew Care on 08/16 at 06:18 PM
Have you guys considered integrating the datejs engine to do all the heavy lifting? Love the ui!
Comment by Matt on 08/19 at 11:44 AM
Hello,
First of all I want to say thank you for the wonderfull job you made with jQuery Interactive Date Range Picker.
I want to use it in my system… but I am having some trouble.... I want to chage the date format to iso standart:
dateFormat: ‘YMD-’
But it is not working…
It is still giving me:
8/20/1998
8/20/2008
Can you send me a .js withe the iso format ? Or, can you tell me how to make it ?
Thank you very much !
Gabriel
Comment by Gabriel on 08/20 at 06:59 PM
I am trying to use this widget in my site in a div but the sliding parts of the calendar stays behind the div. How can I show the date range selection part above all the other elements? The code is very hard for me to understand
Thanks.
Comment by Aimee on 08/22 at 08:36 AM
@Jean-Noel Rivasseau: Thanks. As noted in “Code Usage” above, this article is simply a demonstration of a widget we’ve been working on. We plan to release a rewrite of the code soon which will be compatible with the new jQuery UI datepicker’s API. For now, you can certainly use the code, but you’ll likely need to make modifications to make it work in your site.
@Matt: Good question, as a matter of fact, we have been considering replacing portions of our logic with date.js, since ours was built more for a certain set of keywords. Look for something soon!
@Gabriel: The option you’re looking for is available in the jQuery UI datepicker’s API. So it’s possible, but you’ll need to dig into our source and make the modifications wherever the datepicker is initialized. At this point, we haven’t released this code for ease of reuse, so if you’d like to use it, you’ll need to
@Aimee: It sounds like you’re having a z-index stacking conflict. Try setting your parent div’s CSS z-index to something high enough to sit above the elements in question. As for the code being hard to understand, that’s the main reason we have yet to release this code for download. We’re planning to update it soon using the new jQuery UI datepicker’s API and then it will be packaged for ease of reuse.
Comment by Scott (Filament) on 08/22 at 09:18 AM
could you update your script so there were not only date to choose but time (hh:mm:ss) too?
Comment by Dmitry on 08/23 at 06:21 AM
Hi! Great datepicker, very nice work. I think most commenters here don’t read all comments before posting, because you’ve made clear this isn’t production code ready for deployment. I always have to laugh when someone spends their time and effort to make something they’re providing to the world free of charge, and then people complain in the comments that it doesn’t work how they want it to.
That being said, I’m just curious when you plan on releasing the more stable version? I ask because I’d like to use your work as a base for a project I’m working on, and while I can start with what you have available now, if a more stable version will be out in a week or two I see no reason to put my inferior skills to work on this when you guys will do it better anyway
Either way, thanks for a great interaction pattern!
Comment by Jimothy on 08/27 at 01:14 PM
@Jimothy: Thanks for reading the comments
We’re actually pretty far along with the rewrite using the new jQuery UI datepicker but it’s hard to say when we’ll have a chance to package it up and post. We want to make sure it’s completely ThemeRoller-ready, and we’re toying with using date.js to handle all the string conversion for shortcut options. At this point, we’d recommend either using the code posted here or trying to mimic the pattern with a fresh copy of jQuery UI and some custom animation. Good luck!
Comment by Scott (Filament) on 08/27 at 02:03 PM
I’m looking forward to potentially using this widget in a project of mine as well. That usage would probably be rolled up into the open source distribution of the UI framework as well. Looking forward to an update when you have something further to show.
Comment by Daniel Einspanjer on 09/07 at 09:15 AM
Here’s another project with a similar goal:
http://stephencelis.com/projects/timeframe#example_information
Comment by marcus on 09/11 at 06:33 PM
The demo looks good .. Let me know how do I get the source code for this?
Comment by jerish on 09/30 at 10:55 AM
Excellent work, I must say. Made me say WOW. And trust me, I rarely say WOW for anything. So keep it up!
Comment by Alec on 10/06 at 06:41 AM
This is awesome. I’m trying to play with it a little bit now. Looking forward to the rewrite.
Comment by Chris on 10/09 at 11:24 AM
I also attempted to move this code more toward a production version here:
http://chrisstormer.com/2008/10/18/transcendent-jquery-date-range-selector-short-cuts/
Comment by Chris Stormer on 10/18 at 11:27 PM
Just wanted to update everyone that we’ve rewritten the date range picker and released the code for download.
You can view the article here:
http://www.filamentgroup.com/lab/update_date_range_picker_with_jquery_ui/
Comment by Scott (Filament) on 10/24 at 06:41 PM
Hello,
Contratulations for this date picker. I just have a question : When a load my web page, the default date range is “1st oct 2008 - 31 oct 2008”.
I don’t see where I can change this default. I’d like to set the date after the form is posted. I choose 20 oct, I submit the form on the same page, and I’d like that the date to be 20 oct.
Is it possible ?
Thanks
Comment by Saeba on 10/31 at 04:35 AM
@Saeba: Please refer to the new version of this script. It includes a multitude of new configuration options, including several ways to handle the situation you’ve mentioned.
http://www.filamentgroup.com/lab/update_date_range_picker_with_jquery_ui/
Comment by Scott (Filament) on 10/31 at 10:50 AM
Hi,
Great working! I test yout plugin and it is so good,I want to use it for one of my business plugin for wordpress,and I will get $100 from my wordpress plugin.Need I give money to you for any lisence?Can I use your plugin to any of my business plugin(not open source)?
Thanks!
Comment by tom on 11/04 at 11:52 PM
Excellent work
Small Bug might need to be corrected
Date picker allows to select date range like 2-dec -08 to 2-nov-08
Comment by Kunal on 12/12 at 06:51 AM
Good
Comment by krishna on 01/03 at 01:29 PM