View Full Version : Ext.ux.form.DateRange

19 Jan 2010, 7:37 PM
My first contribution to ExtJs. Demo and some documentation included in the zip file.
I'm still very new to ExtJs (mostly jquery/ui background) and would appreciate constructive criticism and suggestions for future releases.

Hope you find it useful!


If you like this extension, you'll be happy to know about the rewrite I made of it. You can find more information about it here: http://www.sencha.com/forum/showthread.php?122551-Ext.date.RangeField


0.2a changes

Listens for when a user presses ENTER (while the field is focused).
Now the default value can be set through the 'value' configuration.
Tested and bundles on ExtJs 3.2.1.

21 Jan 2010, 4:51 AM
it looks great, I will try it today.


21 Jan 2010, 6:06 AM
great 1st (or 2nd?) post!

29 Jan 2010, 4:22 PM
Firstly -- Nice Extension -- It's quite extend-able its-self... Which makes me happy as I can extend you class to suit me needs nicely...

I'm embedding it into a prefigured ToolBar (ext-3.1.0) - which works seamlessly in FF3.0 - 3.6. However in IE8 the Custom Date Range side by side DatePicker's would render @ 100% browser width - completely Left Justified...

This may be due to an ext-3.1.0 bug - but don't mention that you heard that form me.

The following is a simple workaround that I've added.
Added a width parameter to the menu constructor.
Line 279++

dateMenu = new Ext.menu.Menu({
plain: true,
items: [ dateForm ]

dateMenu = new Ext.menu.Menu({
width: 350,
plain: true,
items: [ dateForm ]

Which solved the issue for me...

29 Jan 2010, 4:31 PM
Glad you liked my extension. Thank you for your contribution!

Honestly, i think the whole

var dateForm = new Ext.form.FormPanel({
width: 350

feels a little "hacky", I'd much rather that everything shrinks according to size.
Any idea how to do this? I tried leaving it blank, but it kept turning it into a single column
instead of nicely laid out side by side.

1 Feb 2010, 4:44 AM
How does one override the Max and Min Dates?

23 Feb 2010, 9:20 AM
This is exactly what I was looking for, unfortunately it doesn't work on Ext 2.2.x. I tried to migrate it to 2.2.x and it renders well but when the menu pops up I get:

this.cells is undefined
anonymous(Tue Feb 23 2010 00:00:00 GMT-0500 (EST) _orient=1 _is=false _same=false _isSecond=false, true)ext-all-...943805849 (line 19704)
anonymous(Tue Feb 23 2010 00:00:00 GMT-0500 (EST) _orient=1 _is=false _same=false _isSecond=false)ext-all-...943805849 (line 19289)
anonymous("dateRange", "Custom Date Range")date-ran...943805849 (line 251)
anonymous(Object specificDate=Specific Date, function(), Object name=scope)extjs-ov...943805849 (line 103)
anonymous()date-ran...943805849 (line 199)
anonymous(Object browserEvent=Event mousemove button=0)ext-all-...943805849 (line 1733)
anonymous(click clientX=220, clientY=65)ext-base...943805849 (line 64)

chrome://firebug/content/blank.gif var cells = this.cells.elements;\r\n

It fails in this call: p1.picker.setMaxDate(cdateE);

Any idea why it could fail like that?


1 Jun 2010, 3:36 AM
Great Extension! How to setup daterange default value?

1 Jun 2010, 10:02 PM
Thanks for the comments, sorry i've been a little AWOL :) I believe in this version the default value is semi-static. BUT I have worked on another version (which i'll be posting soon, just doing a little polishing), this new version does support setting the default value. @ady, Not sure why that's happening in Ext 2.*, honestly, I didn't test in earlier versions of ExtJs. @mrlynn Currently, overriding the min/max dates is not really supported, (i never needed the functionality). I'll see if I can hack a way to override them in the next release i'm putting together.

1 Jun 2010, 10:14 PM
Validation should be working or in this version is not available, execution after clicking enter?

1 Jun 2010, 10:17 PM
I added a listener in the new version for when a user presses enter while the field is focused (in-case the user manually mods the date). Not sure about the validation end of it, I don't have much experience with that.

1 Jun 2010, 10:24 PM
Kryo, last question :) when you planned release new version?

1 Jun 2010, 10:25 PM
Doing a quick package as we "speak" :)

1 Jun 2010, 11:14 PM
Doing a quick package as we "speak" :)

I updated the main thread with the 0.2a version. It was quickly packaged and its kind of late, so if there is any issues, please let me know. I kept both versions in case some one finds a use for the older version.

0.2a should be completely compatible with 0.1a, but I am thinking about putting together a completely new element for date range selection which would include a few techniques i've picked up since I first wrote this. :)

1 Jun 2010, 11:30 PM
Kryo, thank you for your support! all my problems with the choice of dates is now solved :D

3 Jun 2010, 7:58 AM
Looks great. I am trying to shoehorn this into an existing app but having problems with the date formatting. Does this ux support the config parameter 'format'?

Right now the value being presented by your ux is 'Thu May 27 00:00:00 EDT 2010' however I would like it to present in MM/DD/YYYY format.

Thanks for a nice user-friendly addition to the ux library. Kudos!

3 Jun 2010, 11:14 AM
Does this ux support the config parameter 'format'?

Right now the value being presented by your ux is 'Thu May 27 00:00:00 EDT 2010' however I would like it to present in MM/DD/YYYY format.

Yes, configuration supports 'format' parameter, as indicated in the demo.html page. In the demo I am using a fixed format, so you'll need to change the default value format as well: ;)
Entry: format
Description: Sets the format that the dates should be formatted.
Default: Y-m-d

7 Jun 2010, 8:17 AM

Just so you know, it doesn't work with 3.0.0. I know you haven't tested it with that, but it might save someone the time it took me to figure it out.

Great extension though :)


7 Jun 2010, 8:19 AM
Hi Emily, question, when you say it doesn't work, what was the problem you were having? If it's something simple, I could patch it so it would be compatible for ExtJs 3.*.

9 Jun 2010, 8:58 AM
OK I have no idea what happened to my first response about this but it got lost somehow!

The error I got was 'this.cells is undefined' from in one of the standard extjs libraries in the update method of the DatePicker class (can't remember line number or which file!). I believe this error came up in a previous post when someone tried it with one of the 2.x versions. I didn't spend a lot of time debugging it (just tried up to date version of extjs instead), but the bit of DateRange that it didn't like was the switch case on line 241. What happened on a UI level was that the first time you clicked on the trigger the error above would get thrown and no menu would get rendered. If you clicked the trigger again (without reloading) the menu would appear and all work except that the dateRange / Custom Date Range preset option wouldn't appear.

If you want me to have another poke around let me know. I like the extension, and I don't mind contributing if I can spare the time.

Just out of curiosity, what is with the "$this = this;" assignation. I haven't seen that before in javascript and am not sure what it does.


9 Jun 2010, 9:35 AM
Thanks for the info, I'm going to look into it out a little bit later.

In this case ($this = this), it seems a little bit of jquery philosophy snuck-in. Since jQuery is no-where close to ExtJs as far as scoping is concerned, so I tend to emulate scoping by defining '$this' as the current 'this', so when i'm in a different scope, I can recall $this later. Some people do "var self = this;" but I like the '$' prefix, what can i say! :-)

18 Jun 2010, 4:37 AM
Hi there,

Great extension - am using it nicely here :)
It'd be great if you were able to allowBlank as sometimes you might not want a date to be entered in the field.
I'm going to have a quick look and see if its simple to implement myself and if so will post here afterwards.



12 Oct 2010, 8:30 AM
nice work! viewing the demo, this is exactly what i need. i am going to download it and give it a whirl! thx!

Carlos Bolina
17 Oct 2010, 7:36 PM
In Ext 3.3.0 the use of the class is affecting the DateField component.
DateField acquired the strange behavior.
there must be some incompatibility...

17 Oct 2010, 8:40 PM
This might be due to the DateJS bundle. There was a method conflict between the two libraries which required an ugly hack, it's probably come back to haunt me. In either case, I'm working on an improved version of this library which I will share as soon as it's ready.

26 Jan 2011, 2:06 PM
Great job. You should probably isolate the strings so we can translate them

fromdatetitle:'From Date',
todatetitle:'To Date',

p1 = instanciateDatePickerPanel({ role:'start', title:this.fromdatetitle },{maxDate: dateToday});
p2 = instanciateDatePickerPanel({ role:'end', title:this.todatetitle },{maxDate: dateToday});

P.S For this to work you need to add the this scope on the iterate statement


29 Jan 2011, 9:05 PM
Thank you all for your comments/suggestions. I have just released a totally new version of this plugin, which can be found here:


P.S. Edit post feature is broken... didn't let me fix my spelling error! :-)

2 Feb 2011, 5:22 AM
great extension indeed.. thanks u so much for sharing this with us Kryo..

2 Feb 2011, 7:57 AM
Glad you liked it talha06. I'm not sure if you've seen the new rewrite of this plugin, but if you haven't already, please check out http://www.sencha.com/forum/showthread.php?122551-Ext.date.RangeField

20 Sep 2011, 5:36 AM
Is it possible to embed this in ext gwt? If yes, how to do it?

11 Jun 2012, 8:49 PM
Great Plug-in !!!!!!!!


10 Jan 2014, 4:03 AM
I know this is bit old, but maybe there is similar control but for ExtJS4.2?
I know we can use vtype, but this control looks better :)

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