Update: Date Range Picker with jQuery UI

Posted by Scott on 10/24/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. If you need this plugin to work with jQuery UI 1.5.3, read on.

Back in May, we demonstrated a date range picker we had built using jQuery UI, and it continues to be one of our most popular articles. We have since completely rewritten the component to make it much easier to work with, and we're releasing the code for download.

Notable Updates

  • Uses jQuery UI.latest: The range picker now uses the latest version of jQuery UI's datepicker, and allows passing of native datepicker options.
  • Date.js Integration: We've integrated the fantastic date.js library to allow for easy preset development.Date JS
  • Functional Arrows: More of a bug fix than a feature, the optional forward and back arrows allow a user to jump forward and backward by range duration.
  • Flexible Presets: The menu presets are now optional and very easy to add and modify.
  • ThemeRoller-Ready: The range picker is now entirely customizable with jQuery UI ThemeRoller.ThemeRoller-Ready

Working Demo:

Demo Page

The demo above was generated off the following code:


<input type="text" />


  arrows: true, 
  dateFormat: 'M d, yy'

Download This Code

01/05/2009 Note: This script is built for an old version of jQuery UI (v1.5.3). We have updated it to work with the new jQuery UI and posted a new article detailing its changes. To read the article and download the script, visit Date Range Picker using jQuery UI 1.6 and jQuery UI CSS Framework.

Version 1.0: FilamentGroup_daterangepicker.jQuery.js.zip (13kb Zip)

Developer Options

The following options are available in this plugin:

  • presetRanges: Array of objects to be made into menu range presets. Each object requires 3 properties:
    • text: string, text for menu item
    • dateStart: date.js string, or function which returns a date object, start of date range
    • dateEnd: date.js string, or function which returns a date object, end of date range
  • presets: Array, datepicker toggle options. Available options are: 'Specific Date', 'All Dates Before', 'All Dates After', 'Date Range'
  • earliestDate: Date.js string, earliest date allowed in system
  • latestDate: Date.js string, latest date allowed in system
  • rangeSplitter: String, character between two dates in a range.
  • dateFormat String, date formatting, see available values
  • closeOnSelect: Boolean, true will close the rangepicker when a full range is selected.
  • arrows: Boolean, true will add date range advancing arrows to input.
  • posX: int or string, left absolute position of rangepicker
  • posY: int or string, top absolute position of rangepicker
  • appendTo: jQuery selector or element, element to append range picker to.
  • datepickeroptions: Object, Options to pass directly to the datepickers inside the range picker. See UI datepicker options.

Development Notes

This plugin is a work-in-progress, and we would love to hear your input on how it could be improved. We've tested it in Firefox 2/3, Safari 3, and IE6/7.


This plugin requires jQuery and jQuery UI Datepicker (needs UI Core). It also uses ThemeRoller CSS as well as one additional custom CSS file. The demo in the zip file links to all necessary dependencies.

Setting Menu Presets

Setting preset ranges is now very easy and powerful with the help of date.js. To add a preset, simply pass an array to the presetRanges option like this:

$('input').daterangepicker( {
  presetRanges: [
    {text: 'My Range', dateStart: '03/07/08', dateEnd: 'Today' }
 } );

Note that the dateStart and dateEnd properties can accept strings (as shown), or functions which return a date object. The string will be parsed by date.js to generate a date (visit Date.js for a list of values). For more custom dates, you can write a function that returns a date object. Keep in mind that you can use Date.js within that function for any helpers you might need.

About Date.js

Date.js is an open source date parsing library written by Coolite. Essentially, you can pass some text into it and get a date in return. For example, it would parse the words "next week" and return a date object for a day 7 days from today - VERY slick! The library does a heck of a lot more than that too, and we strongly advise checking it out at Datejs.com to find out more.

Multiple Inputs

If you'd like to use this plugin with 2 inputs for the start and end dates, simply call the plugin on two inputs instead of one. The plugin will update them in order of appearance.

Demo page using 2 inputs

Driven by Input Value

The datepickers will be generated based on any values that are in the inputs at page load. For single inputs, it will split the input value by the rangeSplitter character (default: '-'). Each value is parsed by date.js, so you could even begin with a range like "today - next week" in the input, and the datepickers will be set accordingly.

Still to do...

  • Collision detection: At the moment, the rangepicker simply gets placed on the page by coordinates. There's no collision detection yet.
  • Automatic positioning: The rangepicker does not currently position itself in relation to the input. You'll need to pass in coordinates manually through the posX and posY options.
  • Date formatting: We'd like to integrate this tighter with the datepicker to better support internationalization on date formats. Thanks Alex!
  • Instance management: Currently, 2 rangepickers on one page won't play well together. We'll look to improve this soon.

Your thoughts?

We'd love to hear what you think of this plugin and any suggestions you have for how it could be improved. Please use our form below.

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site


It is pretty, and amazing.. In fact, it is pretty amazing.  I can’t wait to get it integrated into our dashboard filters.

Comment by Daniel Einspanjer on 10/25  at  03:22 AM

This is simply sweet! Will you consider doing a Prototype version?

Comment by Jacques on 10/25  at  04:05 AM

looks very nice

Comment by alexander farkas on 10/25  at  12:20 PM

The range picker doesn’t seem to work properly in Opera. Clicking on the second date changes the first one. Otherwise, this is exactly what I’m looking for.

Comment by Brad Abrahams on 10/25  at  03:11 PM

Thanks for the nice comments everyone - glad you like it!

@Brad: I just tested in Opera 9.2 and 9.6 and I couldn’t find any problems. Which version and platform are you using?

Comment by Scott (Filament) on 10/25  at  03:39 PM

I mentioned a couple of problems I noticed over on my blog (linked on my name).

Also, I’m happy to report it works on my Android G1 browser. :)

Comment by Daniel Einspanjer on 10/25  at  04:08 PM

@Daniel: Thanks! I had just read it actually. Those darn arrows… :/
I’m not sure I’m seeing the off by one error you mentioned, so I’ll respond on your blog to discuss and hopefully we’ll figure it out.

Also, good news on Android!

Comment by Scott (Filament) on 10/25  at  04:42 PM

The arrows don’t work for me - they work for maybe a couple of clicks then seem to stop working.

Also, would be nice to be able to start typing in a humanised date, eg. “next thursday” and see the datejs parsed date appearing underneath or above so I know it’s got the right date.

Other than that, very sweet control!

Comment by Guy Fraser on 10/25  at  11:28 PM

@Scott: Just tested it on Opera at work (9.52) and it works fine. No idea what was causing it to act funny at home… I choose to ignore it and pretend that it never happened.

Comment by Brad on 10/27  at  11:17 AM

A slight oddity in the demo when I looked at it today, in that there seems to be an extra blank line in the display for November 2008.

Comment by Neil on 10/27  at  11:38 AM

This is great script. I really liked it. Thanks.

Comment by Veera on 10/28  at  12:08 PM

@Daniel, @Guy Fraser : We updated the script and ZIP with a couple of fixes. First, the arrows are now more stable. This appears to have been fixed through an update to the UI datepicker itself, rather than any changes on our part.
As for the ‘off-by-one’ error, this is now fixed as well. The arrows will always increment by the difference between dates, plus one day.
This ends up simplifying our code by a line as well, since we don’t have to check if the difference is zero before adding a day (which we were doing for single date choices).

By the way, if anyone comes up with new ThemeRoller themes for this component, please share the URL in the comments!

Comment by Scott (Filament) on 10/31  at  05:46 PM

It is a master piece, and match to my requirement but i am unable to customize the drop down calendar that should appear exact the below of text box, I think it is aligned left side and i m unable to move it till the textbox

All in all good and it will be best i will be able to use it.

Comment by Khan Tanveer Alam on 11/01  at  08:56 AM

This is a very nice datepicker but I am having trouble with the “today” option. When I load the page and click on the datepicker and then click “today” nothing seems to happen. If I select a date or a range and then click “today”, again nothing happens. Tried this in FF 3, Safari 3.1, Webkit, Opera all on OS X 10.5.5. Same results in all of them.

It seems to be behaving oddly when I select a range like “month to date” and then try to use the left or right arrow (does not change the displayed date). After I’ve used the arrow as described above when I choose another option (or even the same one again) it updates to the date the arrow should have moved it to.

It seems like the same behavior is happening for the “today” and the left and right arrows. They both seem to be applied to the user’s next selection, not the date currently displaying in the box. Hope that helps with the issue.

I realize that this may not be your issue, but I thought I’d point it out here because I’m seeing it here.

The animation and style look great, it will be super when all the kinks are ironed out.

Comment by Dan Evans on 11/03  at  01:37 PM

If the text box contains a date range, the “Month to Date” and “Year to Date” perform different actions to the end date in the range.  I would expect the start date in the range to be the first of the month or year accordingly _and_ the end date in the range changed to be the current date.  Alas, this is not what happens to the end date for both options.  To demonstrate, populate the text box with a date range where the end date is *not* today. Then select “Month to Date”, and note the end date. Reset the text box with the original date range, then select “Year to Date”.

Comment by Brian Patrick on 11/04  at  10:12 PM

On os x and FF2 (.0.0.17), ‘today’, ‘last 7 days’ and ‘month till today’ on your demopage don’t work.

However, it really looks great!

When selecting a daterange, you might want to color the intermediate days also with the ‘date selected’ color

Comment by Werner Teeling on 11/10  at  01:48 PM

I can’t seem to get the picker to show up appended to the text input. It keeps showing up at the bottom of the page after all other HTML.

Am I missing something really obvious, or do you suspect I have some sort of CSS somewhere messing stuff up?

Comment by Kris on 11/12  at  12:24 AM

@Kris: you’ll want to either use the appendTo option to append the datepicker to a relatively positioned div that comes directly after the input, or use the posX and posY to postion your current datepicker to the right postion on your page.
The first option might give you better control, but depending on z-index conflicts, you might not have the luxury of placing it there in the DOM. In that case, you might need to append the picker to the end of the body, which is the default. Then you can position it dynamically by using the offset of the input, like posY: $(this).offset().top + $(this).height().

Let us know if that works for you.

Comment by Scott (Filament) on 11/12  at  12:31 AM

@dan @Werner: The bugs you pointed out were working a week ago, so I’m concerned that the bug is the result of changes in the jQuery UI library file we’ve linked to (on google’s hosting). I’ll check with the jQuery team about it.

Comment by Scott (Filament) on 11/12  at  12:34 AM

Cool, here’s what I got:

<input type="text" id="datepicker" />
<div id="datePickerContainer" style="position:relative;z-index:999;"></div>

// javascript
$(document).ready(function() {

But now instead of showing it at the bottom of the body, it doesn’t show at all. (By the way, no errors in the Firebug console)

Am I using the “appendTo” wrong?

Comment by Kris on 11/12  at  12:37 AM

Just wanted to follow up:

I got the posY and posX to work splendidly. Thanks!

Comment by Kris on 11/12  at  12:57 AM

@dan @Werner: The demos should be better now. Let us know. Thanks!

Comment by Scott (Filament) on 11/12  at  01:06 AM

Under ‘Developer Options’, the dateFormat option is listed as:

> dateFormat String, See UI datepicker options

I’ve tried things like:

> dateFormat: ‘M dd, yy’

And I’ve tried more straightforward variations like:

> dateFormat: ‘MM’

In all cases I get garbage returned.

The documentation does also say:

> Date formatting: We’d like to integrate this tighter with the datepicker to better support internationalization on date formats.

This would imply that the dateFormat option is not fully functional.

Any guidance would be appreciated.

Comment by Alex on 11/12  at  04:13 PM

@Alex: dateFormat is functional, just very limited. Right now it only really lets you change the order of ‘MDY’ to something like ‘DMY’, for European formatting. And the last character can be changed to something other than a slash if you’d like.
Formatting like you are trying to do is something we have yet to implement. Patches are welcome :)

Comment by Scott (Filament) on 11/12  at  05:41 PM

Hey Scott,

When setting “earliestDate” to

earliestDate: ‘7/1/2008’

I get “05/21/2008 - 11/12/2008” back when I select “All Dates Before > 11/12/2008”

Do you know what’s up?

Comment by Kris on 11/12  at  06:54 PM

How would you like patches submitted?

I don’t know if you are interested in rolling this into your official version however I have altered the fDate function (see below).

This allows the dateFormat option to be set to anything that UI datepicker can accept:


For anybody reading this that wants more control over the way dates are formatted, my revised function looks like:

//function to format a date string
function fDate(date){
if(!date.getDate()){return ‘’;}
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
month++; // adjust javascript month
var dateFormat = settings.dateFormat;
return jQuery.datepicker.formatDate( dateFormat, date );

Comment by Alex on 11/12  at  07:01 PM

Hey Scott,

I was a bit off before. Here is the bug with the “All Dates Before”:

- Setting earliestDate:’07/01/08’ gives “11/28/2008 - 11/12/2008” in the input

- Setting earliestDate:’07/01/2008’ gives “05/21/2014 - 11/12/2008” in the input

Comment by Kris on 11/12  at  07:11 PM

@Alex: THANKS! Great update. We’ve rolled your changes into the “official” version.

This means that ‘dateFormat’ now accepts the same variety of values that the jQuery UI datepicker’s dateFormat option does. It defaults to ‘m/d/yy’ so your dates will look like 3/8/2008 if you don’t change the option. But as you can see in our demos, we’ve set the option to ‘M d, yy’ for a more friendly look.

For returning visitors, a hard refresh is probably necessary.

Thanks again Alex!

Comment by Scott (Filament) on 11/12  at  08:12 PM

Lovely work. What I’d love to see is some kind of time picker integrated, or another component to do this. Judging by the lack of well-written timepickers it would seem I am alone in needing to build booking forms with time ranges!

Comment by Peter on 11/13  at  12:50 PM

(I apologize if this is a duplicate, I think I may have made a mistake in which page this posted to and don’t know if it submitted at all)

I found that to get the datepicker to work in noConflict() mode, line 233 needed to be changed from:

After this, I was able to get datepicker working with Prototype and jQuery both included on the page.  However, when including Scriptaculous things break.  At line 104 there begins a block of code that makes ‘this.text’ undefined.  (immediately before that its defined, immediately after that it is undefined).

There seems to be some sort of conflict going on with the way that block is written, does anybody with better javascript skills than me know of a simple way to rewrite that line to the same effect?  Unfortunately our entire app was written on prototype/scriptaculous before we saw a lot of the benefits of jQuery!


Comment by Mike on 11/20  at  04:49 AM

This is fantastic work, Scott.  Could you point me towards where in the code I could make changes to help it accommodate multiple instances?  I’d love to use this in a current project but I do need to have two or three daterangepickers on the same form.

One very minor thing I found, I wanted to add a line to my document.ready to instantiate a daterangepicker on any elements of a certain class - using something like ... $(’input.daterangepicker’).daterangepicker();

... but this chucks up an error if the selector doesn’t match any elements.  Should just be silent in this case?

Great work Scott, many thanks

Comment by Martin on 12/06  at  10:28 PM

Hi, nice work! If I run the demo on Firefox 3.1 Beta 2 it works.
If I run it on Internet Explorer 7 it does not work. Can that be? Or do I just face a local browser issue.

Would be nice if you could tell it the demo works for you and is specified to work on IE 7.

Thanks, Peter

Comment by Peter on 12/17  at  09:56 PM

Broken on Google Chrome

Comment by Sanz on 12/24  at  01:09 PM

This is really amazing,
but there seems to be some problem with the site today as the demo is not working and only textbox appear.

Comment by PSR on 01/02  at  10:40 AM

Hey Guys,

Really love this plugin but it DOESNT work on Google Chrome/Safari ?

Is it possible to update it so it works ?

Comment by Andy on 01/05  at  03:37 PM

Thanks for the comments everyone. Seems we’ve linked to some javascript files which have changed location on us. We’ll be posting an update shortly that ports this plugin to the new version of jQuery UI. Stay tuned and thanks for your patience.

Comment by Scott (Filament) on 01/05  at  05:57 PM

These demos are now working again. Keep in mind that this uses jQuery UI 1.5.3, which is not the latest version. Stay tuned for an update to the new UI version!

Comment by Scott (Filament) on 01/05  at  07:04 PM

We’ve updated the Date Range Picker plugin for the new jQuery UI v1.6rc4 and have posted a new article detailing the changes. The new plugin has some new features and uses the new jQuery UI CSS Framework for a fresh new look and feel. Please discontinue using this plugin unless you are tied to jQuery UI 1.5.3.

Here’s a link to the new Date Range Picker article:

Comments are welcome. Thanks!!

Comment by Scott (Filament) on 01/06  at  03:01 AM

i try to used it on my web page, but when i put the field inside a div that have specified height, when i click the input field the picker show on the bottom of div not under te input field. what’s is wrong? can u help me?

Comment by robi on 01/08  at  10:35 AM

i’ve got it work now, thank you..

Comment by robi on 01/09  at  06:24 AM

Choosing a date range appears to leave a div hanging around after you click done. I can see it covering your right column menu… otherwise: it’s fantastic.

Comment by Sam on 01/18  at  03:19 PM

everything works perfectly for me except :
- european characters in the calendar (in fact french ans spanish). That’s ok in the left div (last week...) but the characters are not displayed in the right tables. I tried html encoding but same trouble.
- i think i’m just bad, but how can i get the value ?
I tried


but i don’t get anything at all :-(
Thanks for your help

Comment by Marc on 01/26  at  02:04 PM

This looks like a very useful tool, but does anyone have a sample of how they used it with a form?

When I attempt to add it to my forms, it populated every input field with the date I select.

Comment by Chris on 01/30  at  10:48 PM

@ Chris: You probably just need a more specific selector when calling the plugin so it only talks to a particular input. For more examples and a code update, please visit the newest version of this plugin, as this one is now outdated.

Comment by Scott (Filament) on 01/30  at  10:54 PM

Does any demo for using the cool tool on a aspx form. I am unable to get any sample how to use it like other standard date time picker control. How to get the date (start date, end date), how to set date.......

Comment by ramzan anjum on 03/19  at  11:37 PM

You have written a very potent plugin, but it’s a little heavy weight for a small part of the page and esspecially multiple dateselectors get rather messy.

I’m currently working on a reporting system for our company with rather specific design descriptions where we had to knit together some customized time selection tools. After rather brutally cannibalizing your code it now works fine though you might be weeping at what we did.

Just a note concerning multiple dateselectors per page:
I found a rather useful solution in overloading the rangeInput object on RPShow() with the one input field that caused the click/focus event. That way one date selector can fill a bunch of input fields and only needs one instance to do it.

The default behaviour was to always update all input fields, the daterangepicker is hooked on to which was precisely not what I needed.

The above solution is probably limited in various ways, but something like this seems still missing in the plugin (or I somehow missed it) . Maybe two different modes how a daterangepicker should work with the input fields it’s attached to:
single mode - the daterangepicker only updates the focussed input field.
distribute - (current behaviour when attaching the picker like $("input").daterangepicker() ) set all input values to new date.

Just a thought. Overall a great plugin!

Comment by Holger Göbber on 03/20  at  10:47 AM

Great work!!!...Thanks for the information on plugins..Tried few of them they are working quite fine...Thanks again...Looking forward for any new…

Comment by Ishika Mathew on 06/05  at  11:37 AM

It works perfectly!
Only portuguese characteres such as “ã”, “ç” and others.
Does anyone have the same problems?

Comment by Otimização de Sites on 07/28  at  04:12 AM

In my site these characters problems don´t exist.
It must be some problem in you site or plugin instalation, try again!

Great post and a amazing plugin!

Comment by Transportadora on 07/28  at  05:02 AM

Excellent work! Must say its one of the best plugins around. Regarding the Next and Previous buttons, is there a way to remove them?

Comment by Buzu on 07/28  at  01:26 PM

Great plugin!
But I couldn´t set up the date.
Thanks for any info.


Comment by fornecedores on 08/01  at  06:45 AM

Hi scott,

Nice and very useful but i wants only start date and end column whenever i click in input field .. is it possible ?

Comment by milind on 08/11  at  06:15 PM

Great script. Thank you

Comment by Loja virtual on 08/15  at  02:07 AM

onChange event is triggered two times

Comment by karthik on 08/17  at  09:29 AM

Hi, This is one of the most useful plugin I have ever use.  Could you please tell me how I can restric the sat and sunday as selecable dates?  I only want the selectable dates from Monday to Friday.  And how can I make Christmas as non-selectable date? 

Thanks for the help.

Comment by Jack on 11/04  at  11:18 AM

I did use this plugin was but Jquery given error during compilation is any error ???
or coding issue ??

Comment by womens health issues on 11/23  at  12:34 AM

is there a way to omit the menu and have it a calendar display the ‘Today’ date as default view.

Comment by victor on 11/26  at  06:32 PM


Comment by Scrwe on 12/02  at  11:28 PM

Good post!
im back other time!

Comment by Acompanhantes Curitiba on 12/04  at  07:33 PM

JQuery sometimes give the win32 error then resolve the issue within passage of time . but how to complete ?

Comment by custom clothes on 12/09  at  07:50 PM

Very good! im back other time!

Comment by Moda feminina on 01/07  at  01:49 PM

Thanks a lot, this script is usefull

Comment by Itaquera on 01/11  at  06:43 PM

thank you for this info! very useful. Great job
i enjoy reading your blog

Comment by credito rapido on 01/14  at  01:23 AM

The range picker doesn’t seem to work properly in Opera. Clicking on the second date changes the first one. Otherwise, this is exactly what I’m looking for.

Comment by Criação de Sites on 03/01  at  12:03 AM

Thanks for post. Congratulations!!!! : )

Comment by Acompanhantes BH on 03/01  at  01:57 PM

You love for post. Thak you.

Comment by Acompanhantes em BH on 03/02  at  05:41 AM

is there a way to omit the menu and have it a calendar display the ‘Today’ date as default view.

Comment by Contabilidade em Geral on 03/03  at  01:06 PM

Sorry, is there a way to omit the menu and have it a calendar display the ‘Today’ date as default view.

Comment by Contabilidade em Geral on 03/03  at  01:07 PM

Thanks! Very post!!

Comment by Acompanhantes BH on 03/05  at  05:58 AM

Thanks for post. Sensational info.
I look forward to seeing more. Congratulations!!

Comment by Locção de Servidores on 03/21  at  02:21 PM

I specified
earliestDate: Date.parse(’t - 61d’), //earliest date allowed
latestDate: Date.parse(’Today’), //latest date allowed
in the Date Range picker I can still select dates outside the range. 2009/7/23 to 2010/4/30 for example.

What is going on?

Comment by felix on 04/03  at  02:18 AM

I did use this plugin was but Jquery given error during compilation is any error ???
or coding issue ??

Comment by Piscina on 04/05  at  02:12 AM

Found a small problem with script. Scenario:
1) Click on All dates before (do not select anything), today’s date is highlighted
2) Then Click on ‘Specific Date’ - date from the past is highlighted - sometimes 2000, sometimes 1995 year (same month and day)

Any fix?

Comment by Marcin on 04/09  at  11:09 AM

Cool, nice post, I’m using that script and is working fine, thanks

Comment by Criar Site on 04/27  at  06:33 PM

Very good post thanks.

Comment by Clique on 05/13  at  04:07 AM


How can i set last month date range like “6/1/2008 - 6/30/2008” in text box if current date is “7/06/2010” by default.


Comment by Anil on 07/06  at  01:45 PM

Thanks for post. Congratulations.

Comment by Cursos de inglês em dvd on 07/15  at  12:33 AM

I got the posY and posX to work splendidly. Thanks!

Comment by Tele comida Chinesa BH on 07/15  at  12:56 AM

I watched it, it was really very interesting and cool I love apple

Comment by Projector infocus on 07/15  at  12:59 AM

Cool, nice post, I’m using that script and is working fine, thanks

Comment by Tele pizza em BH on 07/15  at  01:00 AM

Really cool! Just implemented into jquery ui tabs and noticed that the selection list appears outside the tabs - anyone else seen this and have a solution?

Comment by scott on 07/23  at  05:15 PM

Thanks for post.

Comment by Granitos on 10/10  at  04:56 AM

In my site these characters problems don´t exist.
It must be some problem in you site or plugin instalation, try again!

Comment by Supletivos on 10/10  at  04:59 AM

Thanks for post!!!

Comment by Otimização de Sites on 10/10  at  05:02 AM

Thanks !  This is great script. I really liked it.

Comment by Jucarii on 11/18  at  05:40 PM

JQuery is a pretty good new webtool, having to use java just by itself takes way longer.

Comment by dapoxetine on 11/23  at  12:02 AM

Thanks !  This is great script. I really liked it.

Comment by Nuvenus Chovendus on 12/13  at  12:12 AM

Thaks for post man.

Comment by Diretório de Sites on 12/13  at  12:13 AM

I’m using jquery 1.4.2 and jquery ui 1.8.7 and it does not work in IE 8, with or without compatibility mode.  The calendar simply doesn’t show up but everything else does.  It works fine in FireFox.  Can anyone help?

Comment by Jang Kro on 01/20  at  05:26 PM


I want to customize the Date Range Picker…
I want to place it to the right of my website, and i want the datepicker divs to appear to the left of the input element.
I want the Date Range Picker to work in a rtl direction, instead of the conventional ltr direction..
Is there a simpler way to make changes, instead of making changes to the component CSS or just overriding the properties of the div elements..?

Waiting for your reply..
Thank You.

Comment by A.K.A on 02/01  at  10:30 AM


Comment by Brindes Promocionais on 02/13  at  10:51 PM

Muito bom este post, gostei do blog, valeu!

Comment by Locaçao de impressoras BH on 03/13  at  10:53 PM

I recommend to my friends to this really nice article and thank you I will always follow

Comment by forklift on 03/15  at  12:31 AM


I am using daterange picker plugin for jquery. my problem is, how to relatively positioned the date options instead of absolute position.

// javascript $(document).ready(function() { $(’#datepicker’).daterangepicker({appendTo:"#datePickerContainer"}); });

But now instead of showing it at the bottom of the body, it doesn’t show at all. (By the way, no errors in the Firebug console)

Am I using the “appendTo” wrong?

Comment by vishnu on 03/21  at  02:46 PM

*Posting again as first one wasn’t submitted*

There seems to be a problem when the page is rendered yet the control is not dom visible. (display none etc).  For example, when using the JQuery tab panel and the control is on a hidden tab.

The problem is that the x/y positions are calculated on dom render which results in a 0/0 x/y coordinate.  When the control is eventually made visible, it appears in the wrong place.

As a temporary workaround, I have added the following method to the code:

function updatePopupPosition()
if (options.posX == 0)
options.posX = rangeInput.offset().left;
rp.parent().css(’left’, options.posX);
if (options.posY == 0)
options.posY = rangeInput.offset().top + rangeInput.outerHeight();
rp.parent().css(’top’, options.posY);

And, have called it in the showRP method:
//show, hide, or toggle rangepicker
function showRP()
if (rp.data(’state’) == ‘closed’)
rp.data(’state’, ‘open’);

The above is indeed a workaround but, it does resolve the problem until a more elegant mechanism can be found.

Cheers for a great control though.


Comment by Andy on 03/29  at  10:54 AM

** Postings do not seem to be working using IE9 **

Comment by Andy on 03/29  at  10:55 AM

will JQuery work in FBML page

Comment by Mehboob Talukdar on 04/07  at  12:10 PM

will JQuery work in blogspot page
waiting for reply

Comment by Mehboob Talukdar on 04/07  at  12:11 PM

Working with JQuery, is unlikely to have trouble loading the website, navigation becomes better, faster, for sure!

Comment by Briquete on 04/20  at  09:08 PM

Congratulation! Very nice post.

Comment by Guindastes locação de munk on 04/20  at  09:29 PM

hi every one here, I am using this calendar in this project. I have to store the “today”, last 7 days and so on… in a variable . How I can do that? As I have to specify a different query query for each. Please help

Comment by cinu on 05/03  at  03:23 PM

muito boa essa dica, obrigado

Comment by acompanhantes curitiba on 05/07  at  06:12 PM

legal gostei desse conteudo

Comment by sex shop on 05/07  at  06:13 PM

mto bom, gostei tbm

Comment by sex shop on 05/07  at  06:14 PM

parabens por mais esse post

Comment by sex shop on 05/07  at  06:15 PM

good job
I like your work!
and i find sth strang,if a pick “the last 7 days”
it will give me 8 days range,so i modify the code.
do you guys enjoy “eight days a week” ?

Comment by feng on 05/12  at  08:47 AM

thanks bro....
ijin sedot....

Comment by indra on 05/16  at  03:54 AM

For anyone interested in a version of the Date Range Picker that resolves the jQuery namespacing issue using “$”, I’ve forked the project, fixed the issue, and submitted a pull request.


My version:

Comment by James Wilson on 06/03  at  11:44 PM

This control not run with AjaxControlToolkit controls (other jQuery control yes...), Why??

Comment by miguel on 06/08  at  04:54 PM


is there an option to turn off displaying of the menu ?

thank you.

Comment by guido on 06/08  at  06:05 PM

Thanks for post man.

Comment by Concurso do INSS on 07/04  at  08:12 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