jQuery Interactive Date Range Picker with Shortcuts

Posted by Scott and Maggie on 05/14/2008

Topics:

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).

Working Demo:

Choose A Date Range:

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.

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site

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/16  at  03:47 AM

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  02:10 PM

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  02:46 PM

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  03:14 PM

Great up until the point I selected Date Range and the second calendar showed “NaN”.

Comment by RichB on 05/16  at  03:33 PM

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  03:36 PM

This is gorgeous.  I needed a model just like this.  Perfect work.

Comment by Glen Lipka on 05/16  at  04:18 PM

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  07: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  01:07 PM

yes this is the issue i was talking about in my original comment

Comment by Luka Kladaric on 05/19  at  01:09 PM

@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  04:40 PM

The UI is great! Very intuitive.

Bummer about the left/right buttons not working properly, tho.

Comment by Randolpho on 05/19  at  05:08 PM

@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  05:11 PM

Looks nice!

But if there were Minutes and Seconds it would be better! May be as extension

Comment by Friend on 05/25  at  07: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  07: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  09: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  05:10 PM

@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  05:36 PM

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  05:50 PM

Comment by Andrew Care on 08/17  at  01:18 AM

Have you guys considered integrating the datejs engine to do all the heavy lifting? Love the ui!

Comment by Matt on 08/19  at  06:44 PM

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/21  at  01:59 AM

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  03:36 PM

@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  04:18 PM

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  01:21 PM

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 :p

Either way, thanks for a great interaction pattern!

Comment by Jimothy on 08/27  at  08: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  09: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  04:15 PM

Here’s another project with a similar goal:

http://stephencelis.com/projects/timeframe#example_information

Comment by marcus on 09/12  at  01:33 AM

The demo looks good .. Let me know how do I get the source code for this?

Comment by jerish on 09/30  at  05:55 PM

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  01:41 PM

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  06:24 PM

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/19  at  06:27 AM

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/25  at  01:41 AM

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  11: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  05:50 PM

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/05  at  07:52 AM

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  02:51 PM

Good

Comment by krishna on 01/03  at  09:29 PM

One of the things you run into when your blog becomes bigger, is that you need to cram more info into less space, to make it possible to display all the information you want to show. One of the things I did to do that is add an icon for the date, and then a bubble over that with the number of comments in it.
----------------------------------
austine

http://www.casualdate.net.au

Comment by austinepeter on 01/28  at  09:29 AM

it has the following bug- when you set the range value tu “dd/mm/yyyy” and open specific date - let’s say 3 feb 2009 it selects 2 mar 2009. if you select past 12 it is undefined.

Comment by adiz on 02/09  at  12:32 AM

another one: ui.datepicker.js : $(btns_prevnext).click(function()....
the algorithm is working only for next. for previous it should make newDate2 = inst1 - one_day and newDate1 = inst1 - difference (or something like that)

basically - if you have a 7 days or 30 days past period selected the prev button is not working.

Comment by adiz on 02/09  at  01:02 AM

This is really handy - well done, sir! I second Arvin’s comments though - complete month selection would be very handy.

Comment by Jimbo on 05/06  at  04:57 AM

Hi,

I implemented DateRangePicker on my website. Everything works great but I would like to date pop up to open on the right hand side of the text input box instead of left. Can anyone help please?

Thanks in advance,
Shifali Bansal

Comment by Shifali on 07/29  at  09:16 PM

Hi,
I know my post is coming too late but still Phenomenal work. Wonderful UI, great smoothness and easy to implement.

But I have got a suggestion as well as query.
Suggestion:
1. Could we have a year selection added to the calendar.

Query:
1. How do I attach a event after a date is selected.

Comment by Srinivas on 11/14  at  03:06 PM

Great Plugin!
How would I allow only 2 options like:
“Today”
“Specific Date”

Because some of my date inputs need only a single date.

thanks

Comment by Eric P. on 11/16  at  09:49 PM

Hi,
This is a great calender. But I am facing a problem when I use this calender in my page. When I click on any Input Field the option of selection of date is active and set the date in all of the fields.

Please help me out from this problem

Thanks & Regards

Pankaj Sharma

Comment by pankaj sharma on 11/17  at  08:32 AM

I have this daterange picker as part of a multi-input search tool. How can I set it’s default to be NOTHING. and if the user so chooses to only search a date range have all of the other useful parts of this picker?

Thanks

Comment by ConixIT on 12/10  at  12:19 AM

I was looking for this in google and i was afraid I won’t find any thing like this but i got it on the first try :) thanks for making such a flexible plugin

Comment by Aamir Afridi on 12/23  at  07:56 PM

Great date picker! Thanks :-)

Comment by myltik on 03/15  at  12:48 PM

hey this is not working in IE7 right now....

Line: 3
Char: 3
Error: Object expected
Code: 0
URL:http://www.filamentgroup.com/lab/jquery_interactive_date_range_picker_with_shortcuts/

Comment by shahab on 04/28  at  08:07 AM

Hi,

I’ve applied this to two textboxes, and it’s working well. However, I don’t want the menu to pop up when the user clicks the second i.e. ‘To’ textbox. How can I achieve this?

Regards,
Karan

Comment by karan on 07/19  at  08:29 AM

Hi,

I very much like the work you have done and I am thinking of using the datepicker in a commercial package.  What does “with a proper attribution to Filament Group” mean in practice?

Visible credit on the page?  Retain Authored by, etc in code?

Comment by Bill Ferrett on 08/09  at  05:29 PM

i am great fan of jquery..!! thanks..!!

Comment by yasam phani on 08/10  at  05:49 PM

Hello friends,

I have tried to implement simple date range control. Please look at it
http://aspnet-ajax-aspnetmvc.blogspot.com/2010/09/jquery-date-range-plugin.html

Thanks,
Mohan

Comment by Mohan Prajapati on 09/03  at  02:43 PM

I want to use 2 date pickers in the same page, I can’t figured out what to do that. Can you please help me?

Thanks in advance!

Comment by Ionut on 04/12  at  04:56 PM

Hi,

I’m using the dual daterange picker.  How can I set it so that the left calendar displays the previous month and the right calendar displays the current date?

Thanks,.

Comment by Adam Fekete on 06/03  at  12:32 PM

Commenting is closed for this post.

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site