Ext.ux.form.DateRange

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!

News:

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/showthre...ate.RangeField

Enjoy!

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.

it looks great, I will try it today.

Marty

great 1st (or 2nd?) post!

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

Glad you liked my extension. Thank you for your contribution!

Honestly, i think the whole

Code:

---

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.

How does one override the Max and Min Dates?

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:

Code:

---

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)


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

---

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

Any idea why it could fail like that?

Thanks.

Great Extension! How to setup daterange default value?

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.

Validation should be working or in this version is not available, execution after clicking enter?