View Full Version : [3.x] Ext.date.RangeField

29 Jan 2011, 8:59 PM
Ext.date.RangeField is a completely new rewrite of "Ext.ux.form.DateRange". Fixes lots of problems, code has been cleaned up and well documented. Demo/documentation has also been updated to reflect changes. Any questions, feel free to let me know.

Like it's ancestor, this version also bundles DateJs. This version separates the DateJs locale information so you can include this independently for globalization. I had to remove all the standard DateJs globalizations because Sencha's forum didn't like the file size apparently. This only bundles en-US.js, sorry all international users! :s

Download plugin here: 24583
Live demo: http://jsfiddle.net/2P7K9/


02/05: Updated linguistic error with preset date names, now they say "Month to date", "Year to date", etc. Also fixed IE8 bug reported by sb32.
01/30: Updated to allow pickers to update values based on current dates selected.

You can view the old version here:

5 Feb 2011, 11:34 AM
Great add-in..

small linguistics issue..

use MonthToDate instead of MonthToDay ... and the same goes for YearToDate vs YearToDay


hope this helps and thanks again!!

5 Feb 2011, 12:22 PM
Thanks for the suggestion. I'll make the change and put up a new version.

5 Feb 2011, 1:30 PM
few other things..

CUstom date ranges don't render properly in IE8 (nor does your example at http://jsfiddle.net/2P7K9/ in ie8)

until resolved, I tried to remove the range picker but of course it's assumed to be there ( not a removable preset)

so I had to comment it out further down

5 Feb 2011, 1:45 PM
Interesting, I don't use IE here which is why it must have slipped by. I will try it out and see if I can find out what is breaking in IE8 -- thanks for the report(s). If you have an idea what is causing the break in IE8, it would help me out. Btw, I updated the release with the fixed linguistics.. as soon as we discover what's up with IE8, i'll put out a new patch.

5 Feb 2011, 3:05 PM
I tried to work out what the issue was - however IE compatability issues are not always trivial. Look forward to seeing a fix, thanks again

5 Feb 2011, 4:06 PM
I think I found the issue is with the hbox layout of the custom date range. I changed it to a column layout, and it is now working in IE8. Updating the version now.

6 Feb 2011, 6:04 AM
New version is attached to thread.

6 Feb 2011, 10:03 AM
One design consideration you may want to consider is:

Since it's a date range plugin - implement each option in such a way that it returns just that - a date range. For example, in the case of 'Today', return two date objects for the same date(today).

This makes using your plugin much easier in my opinion. Most services that deliver data given a specific date range, expects just that a range - even if it's the same start and end date. Your plugin made it hard for me to decipher what mode was used, thus making it hard to determine what a nil 'to' date would be. If you always return a date range, you decouple the user selection from the handling of values. (for the most part).


text: 'After date',
iconCls: 'calendar',
menu: new Ext.menu.DateMenu({
handler: function(dp, date){
DATE_MIN = date.add(Date.DAY,1);
DATE_MAX = new Date();

, '-', {
text: 'Specific date',
iconCls: 'calendar',
menu: new Ext.menu.DateMenu({
handler: function(dp, date){
DATE_MIN = date;
DATE_MAX = date.clone();

, '-', {
text: 'Month-to-date',
handler: function() {
var d = new Date().clearTime();
DATE_MIN = Date.parse(d.format('m/01/Y'));

Just an opinion though.. :-) Hope this helps and thanks for the quick response!!

fyi - DATE_MIN and DATE_MAX above are equiv to your to and from variables.

18 Feb 2011, 5:47 PM
Thanks for your suggestion sb32, I guess for my purposes I didn't need to have it that way. But feel free to make an extension off of this that handles presets the way you need. It should be pretty simple to achieve that functionality. It might be even easier to add a new method to the class that always returns a date range (array). That way you'll always have two values, but if for some reason a single date is supplied, one would be false.

11 Mar 2011, 5:40 AM
This looks good. One suggestion. The second date picked should black out all the dates before the first date selected.

11 Mar 2011, 8:38 PM
Hello, and thank you for your suggestion. With this new version, it doesn't matter which side you pick from, it will always deliver "[lowest date] to [highest date]". So the need to black out dates isn't necessary anymore. However, if you would like to do that, it's very simple to hook into the events for those pickers, or also you can make an extension of that renderer function to accommodate that functionality.

11 Mar 2011, 9:57 PM
Looks great!! I will give it a try...

22 Mar 2011, 1:04 PM
Good job on the new version. Been using the old one and it was a pain to manage all the i18n stuff. Now its easy. Also good job on adding events that we can trap.

9 May 2011, 7:44 AM
I am using this plugin and I was wondering how can I extend it so that it contains also time along with dates? Something like Ext.form.TimeField has.

Many thanks!

9 May 2011, 9:39 AM
Hi lizucagirl,

The way the pickers are generated is by using renderer functions, defined in the object: Ext.date.MenuRenderer

You can define a new renderer function that returns a configured time field and/or datetime field. To hook this renderer into the Ext.date.RangeField object, you can extend/overwrite the pickers() method which is defined by default in Ext.date.RangeField.defaults.

The values used internally for this object are JS Date() classes. So there shouldn't be any problem with storing the time value internally, but you'll also need to change the "format" configuration of the Ext.date.RangeField class, so that the time is displayed in the field.

Hope this helps!

8 Dec 2011, 3:00 AM
Any plans for ExtJS 4.x compatibility? thanks for the good extension!

12 Dec 2011, 3:40 AM
How are you leading with DateJs Vs Ext.Date incompatibity? Any Override dor Ext.3.++?

27 Feb 2012, 5:04 AM
I use it in ext2.0 . But I find when click the button "Custom date range",the right menu cannot show . How to resolve!
Thanks you!

8 Jan 2013, 11:53 PM
Is this control updated for extjs version 4.1.1a?

13 Feb 2014, 1:25 AM
I found a bug on method "clearTime".It's overwrites the ExtJS method without "clone" parameter.It fails with Extensible Calendar.