PDA

View Full Version : XDateField with configurable submitFormat



jsakalos
9 Feb 2008, 9:08 PM
Hi all,

I've run into the problem of submitting date fields to server as they are submitted in their display formats that is very problematic if you develop an international, locale switching application. You have m/d/y in English, d.m.Y, d.m.y or Y-m-d in some European countries. MYSQL server I'm using wants always Y-m-d format.

Therefore this extension; you can configure date format that is submitted to the server regardless of display date format.

Enjoy!



// vim: ts=4:sw=4:nu:fdc=2:nospell
/**
* Ext.ux.form.XDateField - Date field that supports submitFormat
*
* @author Ing. Jozef Sakalos
* @version $Id: Ext.ux.form.XDateField.js 471 2009-01-22 23:05:23Z jozo $
*
* @license Ext.ux.grid.XDateField is licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/

/*global Ext */

Ext.ns('Ext.ux.form');

/**
* @class Ext.ux.form.XDateField
* @extends Ext.form.DateField
*/
Ext.ux.form.XDateField = Ext.extend(Ext.form.DateField, {
submitFormat:'Y-m-d'
,onRender:function() {

// call parent
Ext.ux.form.XDateField.superclass.onRender.apply(this, arguments);

var name = this.name || this.el.dom.name;
this.hiddenField = this.el.insertSibling({
tag:'input'
,type:'hidden'
,name:name
,value:this.formatHiddenDate(this.parseDate(this.value))
});
this.hiddenName = name; // otherwise field is not found by BasicForm::findField
this.el.dom.removeAttribute('name');
this.el.on({
keyup:{scope:this, fn:this.updateHidden}
,blur:{scope:this, fn:this.updateHidden}
}, Ext.isIE ? 'after' : 'before');

this.setValue = this.setValue.createSequence(this.updateHidden);

} // eo function onRender

,onDisable: function(){
// call parent
Ext.ux.form.XDateField.superclass.onDisable.apply(this, arguments);
if(this.hiddenField) {
this.hiddenField.dom.setAttribute('disabled','disabled');
}
} // of function onDisable

,onEnable: function(){
// call parent
Ext.ux.form.XDateField.superclass.onEnable.apply(this, arguments);
if(this.hiddenField) {
this.hiddenField.dom.removeAttribute('disabled');
}
} // eo function onEnable

,formatHiddenDate : function(date){
if(!Ext.isDate(date)) {
return date;
}
if('timestamp' === this.submitFormat) {
return date.getTime()/1000;
}
else {
return Ext.util.Format.date(date, this.submitFormat);
}
}

,updateHidden:function() {
this.hiddenField.dom.value = this.formatHiddenDate(this.getValue());
} // eo function updateHidden

}); // end of extend

// register xtype
Ext.reg('xdatefield', Ext.ux.form.XDateField);

// eof

tof
10 Feb 2008, 4:17 AM
Thanks,

That's something which sould have been native :)

vivid-planet
10 Feb 2008, 4:55 AM
Some time ago I posted a similar solution:
http://extjs.com/forum/showthread.php?t=7157

I tweaked the SubmitAction posted in this thread a bit further, it uses getValue now for all Fields. (Useful for eg. Checkbox, DateField, ComboBox)


Vps.SubmitAction = function(form, options){
Vps.SubmitAction.superclass.constructor.call(this, form, options);
};

Ext.extend(Vps.SubmitAction, Ext.form.Action.Submit, {
run : function(){
if (!this.options.params) this.options.params = {};

this.form.items.each(function(field) {
if (field.disabled) {
this.options.params[field.getName()] = null;
} else if (Ext.form.Checkbox && field instanceof Ext.form.Checkbox) {
if (field.getValue()) {
this.options.params[field.getName()] = 1;
} else {
this.options.params[field.getName()] = 0;
}
} else if (field.rendered && field.el.dom.type == 'file') {
//skip, can't be read out through JS
return;
} else {
var v = field.getValue();
if (typeof v == 'object') {
v = Ext.encode(v);
}
this.options.params[field.getName()] = v;
}
if (field.rendered) {
field.realName = field.getName();
field.el.dom.name = '';
}
}, this);

Vps.SubmitAction.superclass.run.call(this);

//restore names
this.form.items.each(function(field) {
if (field.realName) {
field.el.dom.name = field.realName;
delete field.realName;
}
}, this);
}
});
Ext.form.Action.ACTION_TYPES.submit = Vps.SubmitAction;

jsakalos
10 Feb 2008, 5:51 AM
Nice code!

I was also thinking about overriding the submit action but finally I've decided against it to avoid introducing any new bugs int tons of code of the running application. Further, the code above doesn't solve the problem of configurable submit format for DateField.

I decided to use extension as developer can freely choose if he needs XDateField or if DateField is enough for his purpose. I will make same extensions for TimeField and Checkbox (will give it also a nicer look) without touching the submit action.

jsakalos
10 Feb 2008, 5:56 AM
Thanks,

That's something which sould have been native :)


I also think so, however, the library was created in US where internationalization may very easy slip out of the attention as everywhere around there the date is m/d/y. Here in Europe we need to think about it very carefully as if we want to sell our software in wider than 300 km range it needs to be localized or, at least, ready for localization.

tof
10 Feb 2008, 8:50 AM
Indeed, but that's not only for i18n; my server-side framework treats timestamps as "epoch", and I had to make a DateField like this which send/read epoch, whatever the displayFormat.
Of course you're code is a lot much cleaner :)

JorisA
11 Feb 2008, 3:33 AM
Nice addon, I would also like to see this add to the core. Maybe with
if(submitFormat) {
// create hidden field and stuff
}

mash-morgan
12 Feb 2008, 12:28 AM
This should go into the proper DateField imho.

Its silly that there is one format for display and not one for data.

While Im at it.

Also with a Combobox...
the {hiddenName:} should default to {name:} unless otherwise specified

mirage
24 Feb 2008, 5:41 PM
Saki -

First of all thanks for this. I get two errors with your code:

1. Ext.isDate() is not a function. I'm running 2.0.1. Is that another extension of yours?

2. When clicking the trigger, Firebug says:


value.clearTime is not a function
setValue("1974-04-29 00:00:00")
onTriggerClick()
h(Object browserEvent=Event mouseout button=0 type=mouseout)
getViewWidth(click clientX=0, clientY=0)
this.value = value.clearTime(true);


Can you help me figure out what's going wrong? My date values come through from mysql as timestamps or datetime.

Thanks!

jsakalos
24 Feb 2008, 5:53 PM
Ext.isDate() is in SVN - you can replace it with:




if(xxx instanceof Date) {
....
}

mirage
24 Feb 2008, 6:04 PM
Ok Saki - thanks!

This gets rid of the errors. But now, clicking the trigger shows the calendar with today's date rather than date in the field. Any ideas?

jsakalos
24 Feb 2008, 11:44 PM
I've tested it and I haven't found any problem. One thing that comes to my mind is that if you setValue of the field in the form of 'yyyy-mm-dd hh:mm: ss" it resets itself tu empty value because 'Y-m-d H:i: s' is not in altFormats by default.

You can either add that format or you can strip time from value you wanna set. Keep in mind, it is XDateField and it behaves 99.99% same as it's parent DateField.

mirage
25 Feb 2008, 7:42 AM
I've tested it and I haven't found any problem. One thing that comes to my mind is that if you setValue of the field in the form of 'yyyy-mm-dd hh:mm: ss" it resets itself tu empty value because 'Y-m-d H:i: s' is not in altFormats by default.

You can either add that format or you can strip time from value you wanna set. Keep in mind, it is XDateField and it behaves 99.99% same as it's parent DateField.

Hi Saki -

I do setValue on the field. And I've also added 'Y-m-d H:i:s' to altFormats upon field creation. So that's apparently not it. I'll keep poking. I agree that your extension is very straightfoward and doesn't do much altering. Still odd that I'm not getting same results as with DateField. All I do is switch out the xType.

With DateField, I don't get my formatted submit value, with xdatefield my calendar's not working. Podo!!! :-)

Perhaps I'll just have to go with stripping the time.

mirage
25 Feb 2008, 10:44 AM
Saki -

I've updated to Ext 2.0.2 and pasted back your original code. It's all working now. Guess something little must've changed in the bowels of Ext.

Cheers,
Juergen

jsakalos
25 Feb 2008, 10:48 AM
Try the following code. The XDateField accepts also Y-m-d H:i:s format.



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript" src="../js/Ext.ux.form.XDateField.js"></script>
<script type="text/javascript">

Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var win = new Ext.Window({
width:500
,id:'winid'
,height:300
,layout:'fit'
,border:false
,closable:false
,title:'Ext.ux.form.DateTime Example'
,items:[{
xtype:'form'
,frame:true
,labelWidth:100
,id:'form'
,url:'.'
,items:[{
xtype:'xdatefield'
,fieldLabel:'XDateField'
,id:'xdf'
,altFormats:"Y-m-d H:i:s|m/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d|"
}]
}]
,buttons:[{
text:'Submit'
,handler:function() {
Ext.getCmp('form').getForm().submit();
}
}]
});
win.show();
});
</script>
<title>Ext.ux.form.XDateField Example</title>
</head>
<body>
</body>
</html>

michele.rota
17 Mar 2008, 5:46 AM
Hi,

I can't figure out how can I make work the xdatefield in Internet Explorer (6 & 7).
Populating the form with a datastore, the xdatefield works perfectly on Firefox, but it doesn't show anything on IE.

Commenting "this.el.dom.name = null" the form fills perfectly, but obviously if I send the form, the field is sent twice.

Thanks in advance

mirage
17 Mar 2008, 7:12 AM
Hi,

I can't figure out how can I make work the xdatefield in Internet Explorer (6 & 7).
Populating the form with a datastore, the xdatefield works perfectly on Firefox, but it doesn't show anything on IE.

Commenting "this.el.dom.name = null" the form fills perfectly, but obviously if I send the form, the field is sent twice.

Thanks in advance

Hi, I haven't looked into this in detail - but I'm experiencing the exact same problem. Glad I'm not the only one. xDateField seems fine on FF, Safari but not in IE6/7. Hopefully Saki can figure it out.

Here's how I use it:



// predefined somewhere
var cnsAltFormats = 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d|Y-m-d H:i:s|n/j/Y|n/j/y|n/j|m/j/Y|m/j/y|m/j|n/d/Y|n/d/y|n/d|j';

// then as part of a forms item config
{xtype:'xdatefield', fieldLabel: 'Date of Birth', name: 'dateofbirth', anchor: '45%', submitFormat: 'Y-m-d H:i:s', format:'m/d/Y', altFormats: cnsAltFormats},


Thanks,
Juergen

jsakalos
17 Mar 2008, 7:13 AM
Hi,

I can't figure out how can I make work the xdatefield in Internet Explorer (6 & 7).
Populating the form with a datastore, the xdatefield works perfectly on Firefox, but it doesn't show anything on IE.

Commenting "this.el.dom.name = null" the form fills perfectly, but obviously if I send the form, the field is sent twice.

Thanks in advance

True is that I haven't tested the field in IE as I 1) don't use Micro$oft "products" and 2) I force my users to use Firefox. Should you find a workaround I'll be happy to include it in the code.

mirage
17 Mar 2008, 7:18 AM
True is that I haven't tested the field in IE as I 1) don't use Micro$oft "products" and 2) I force my users to use Firefox. Should you find a workaround I'll be happy to include it in the code.

You're one lucky guy Saki. As this is an extension of the DateField, shouldn't one assume that there is a bigger problem here with Extending Ext [form] components? I don't see the code doing anything extremely overriding as far as rendering is concerned...

Juergen

michele.rota
17 Mar 2008, 7:29 AM
Hey,

I temporarily solved the problem forcing the field id the same as the field name.


{
xtype: "xdatefield",
format: 'd/m/Y',
fieldLabel: 'Data scadenza',
name: 'data_scadenza',
id: "data_scadenza"
}

mirage
17 Mar 2008, 7:39 AM
Hey,

I temporarily solved the problem forcing the field id the same as the field name.



Intresting that is. I don't know [yet] much about extending Ext classes. But one wonders if the id assignment is something that needs to be part of an extension like this. Saki, any idea why this would make it work?

jsakalos
17 Mar 2008, 8:16 AM
No idea. I'd say it's another IE bug...

mirage
17 Mar 2008, 8:23 AM
There's got to be more information on this.

Other people have extended form fields, including the Ext Team (which you are now part of). I think for Extension developers this is kind of a 'must know' sort of thing and I really think Ext Support Team should nail this one down.

Regards,
Juergen

jsakalos
17 Mar 2008, 8:45 AM
ux stands for User Extension and as such is not an official part of Ext. It is provided to the community as is, as a good will and of generosity of the author, and there is no warranty or support of it from Ext team whatsoever. The viewpoint is very simple: use if you like, don't use if you don't or write your own and give it to community or don't.

Quote from (L)GPL:


This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

mirage
17 Mar 2008, 9:05 AM
Sigh! I didn't really want to get into this sort of thing... It's got nothing to do with dissatisfaction regarding your plugin. I understand just fine how the Ext license works and that one should take the Extensions provided here as what they are: voluntary contributions by the community without any sort of warranty or support. I certainly see it that way.

And I'm not a ranter or whiner. I very much appreciate Ext and all the contributions you and others make here.

What I'm simply trying to communicate is that there may be something of value to be learned from what we discovered with this extension. And if there is a common thing to watch out for then I think it would be extremely valuable to communicate that back to the people who make the effort to contribute to Ext. Don't you think?

I'm not 'expecting' the Ext Team to do that. It was merely a suggestion to help the volunteers in this space avoid this kind of pitfall (if it is one) in the future. I can think of no one more qualified to determine the cause of this sort of issue and more interested in communicating it to the community than the Pros on the Ext Team.

As a personal side note:
I'm reading these forums regularly. I've build some extremely cool stuff thanks to Ext and do the best I can do learning from the generous examples and extensions provided.
I can tell you that there's an increasing sense that those who are labeled here as Ext Core Developers or Ext Support Team are taking a defensive attitude to just the smallest comments taken out of context.

jsakalos
17 Mar 2008, 9:10 AM
Good to here that from you :) Should a patch be available we'll learn from it for sure.

michele.rota
19 Mar 2008, 7:19 AM
SOLVED!

replace:
this.el.dom.name = null;

with:
this.el.dom.removeAttribute('name');

jsakalos
19 Mar 2008, 11:56 AM
Thank you very muuuuuuuuuuch :) :) :)

Updating the source...

mirage
19 Mar 2008, 12:06 PM
SOLVED!

replace:
this.el.dom.name = null;

with:
this.el.dom.removeAttribute('name');

Eureka!!!! Thanks for figuring this out!

Shyru
20 Mar 2008, 6:42 AM
Interesting how different the approaches are to solve the same problem.
My attempt was to write a new submit action (OOSubmit) which uses the fields getValue method (or if existant, a getSubmitValue()) method to retrieve the values. This fixes a lot of other problems, so I blogged about it a little bit. If you are interested, read more about it here: Submit Ext forms the right way (http://www.diloc.de/blog/2008/03/05/how-to-submit-ext-forms-the-right-way/).

luv2hike
25 Mar 2008, 6:32 AM
Shyru, nice approach but your solution does not send the correct values for radio buttons. I have a group of radios for race with the inputValues set as 'W', 'B', 'H', etc...
The value OOSubmitAction sent to my server was either true or false depending on whether or not the last button in the group was selected.

jsakalos
25 Mar 2008, 6:40 AM
Radio Buttons? This is XDateField and has nothing to do with radios.

jsakalos
25 Mar 2008, 6:43 AM
Oh, I see, this was the reply to Shyru's post. Perhaps he watches closer his OOSubmitAction thread... ;)

luv2hike
25 Mar 2008, 6:43 AM
Thank you for posting this solution, Saki. It works well and solves this issue for me. I too would like to vote having this functionality brought into the Ext core.

JorisA
25 Mar 2008, 1:35 PM
I think the OOSubmit thing looks quite interesting. I don't really understand why input fields are used instead of ext Fields in the first place. submitting the getValue result would make a lot of inputs a lot less complicated (no more hidden fields).

luv2hike
25 Mar 2008, 7:52 PM
Quick update: The RadioGroup user extension fixed the issue with radio button values that are submitted using the OOsubmit routine. Using this, dates work using either the standard DateField or the extended xdatefield type.

wm003
6 Apr 2008, 7:52 AM
According to a bugreport (http://extjs.com/forum/showthread.php?p=148787#post148787) you need to ensure this.name is either given and different from the id (IE does not like this)
Fortunately one line of code can solve this :)
You will never come in any trouble when giving different id and name anyway.


//-------------------
submitFormatAddon: '-format',
//-------------------
onRender:function() {

Ext.ux.form.DateFieldPlus.superclass.onRender.apply(this, arguments);
//------------------------------
//be sure not to have duplicate formfield names (at least IE moans about it and gets confused)
this.name = (typeof this.name=="undefined"?this.id+this.submitFormatAddon:(this.name==this.id?this.name+this.submitFormatAddon:this.name));
//------------------------------


this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name:this.name});
this.hiddenName = this.name;
this.el.dom.removeAttribute('name');

...
...

elDub
1 May 2008, 7:50 AM
Thanks Saki for creating something that I found out was very necessary for complete internationalization of an Ext project. (Again... why isn't this part of the 'core' product?)

In using this along with some custom field dependency routines (disabling or enabling fields based on the values of other fields), I found that disabled xdatefield components are still transmitting their values to the server with form data. So, here is my attempt to contribute to the product. I'm still green with Ext, so corrections or comments are appreciated. (This was tested with Firefox only so far.)

Add the following


,onDisable: function(){
// call parent
Ext.ux.form.XDateField.superclass.onDisable.apply(this, arguments);
this.hiddenField.dom.setAttribute('disabled',true);
}
,onEnable: function(){
// call parent
Ext.ux.form.XDateField.superclass.onEnable.apply(this, arguments);
this.hiddenField.dom.removeAttribute('disabled');
}

jsakalos
1 May 2008, 9:44 AM
@elDub,

thank you, you're right. I only tweaked the code you posted a bit and I've updated the first post.

wm003
14 May 2008, 1:49 AM
I updated the code to support a given value at config time. If the trigger got never fired and the datefield had given a default value at config time, the hiddenfield stayed empty before. This is now solved:

change these lines (


...
//this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name:this.name});

this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name:this.name, value:this.formatHiddenDate(this.parseDate(this.value))});
...
//new function
formatHiddenDate : function(date){
return Ext.isDate(date) ? Ext.util.Format.date(date, this.submitFormat) : date;
},

//replace the old updateHidden function
updateHidden:function() {
this.hiddenField.dom.value = this.formatHiddenDate(this.getValue());
}

jsakalos
14 May 2008, 7:23 AM
Yes, you're right. Updating code in the first post...

Thank you.

mystix
9 Jun 2008, 7:59 PM
useful ux :)

there's a small issue when using this with the applyTo config however -- the DOM name gets wiped away, leaving the hidden input field's name "undefined".

a few small changes are required in the onRender method to prevent this


,onRender:function() {
// call parent
Ext.ux.form.XDateField.superclass.onRender.apply(this, arguments);

var name = this.name || this.el.dom.name; // use DOM name if Component name is not defined
this.hiddenField = this.el.insertSibling({
tag:'input'
,type:'hidden'
,name:name
,value:this.formatHiddenDate(this.parseDate(this.value))
});
this.hiddenName = name; // otherwise field is not found by BasicForm::findField
this.el.dom.removeAttribute('name');
this.el.on({
keyup:{scope:this, fn:this.updateHidden}
,blur:{scope:this, fn:this.updateHidden}
});

this.setValue = this.setValue.createSequence(this.updateHidden);
}

jsakalos
11 Jun 2008, 12:52 AM
Thanks mystix, updated.

mystix
11 Jun 2008, 1:05 AM
just checked the code in the 1st post.

it seems you missed out the third change


this.hiddenName = name; // otherwise field is not found by BasicForm::findField


HTH. ;)

jsakalos
11 Jun 2008, 1:18 AM
Yeah, sorry, slept too little... ;)

Ziko
8 Jul 2008, 2:07 AM
Thanks for plugin! It works good for me but only with FormPanel. I tried to use it with EditorGridPanel as an editor for datefield, but it doesn't work :(
I mean that end date is not in Unix Timestamp format, but still in format looks like RFC 2822 ("Thu Jan 01 1970 04:00:00 GMT+0300 (Russian Standard Time)")
My code:


var cm = new Ext.grid.ColumnModel([
...
{
header: 'Date',
dataIndex: 'obj_pdate',
width: 70,
editor: new Ext.ux.form.XDateField({format:'d.m.Y H:i',submitFormat:'U'})
}
]);

Please help me!
PS: sorry for my English :-)

jsakalos
8 Jul 2008, 6:47 AM
Grid doesn't have any build-in submit routine, how do you submit then?

Ziko
8 Jul 2008, 10:57 PM
I use the "afteredit" event:


Content.grid.on('afteredit', function(e) {
var jsonData = '{"obj":{"obj_id":"'+e.record.get('obj_id')+'","'+e.field+'":'+Ext.encode(e.value+' ')+'}}';
Content.store.load({params:{start:0, limit:25, updData:jsonData}, callback: function() {...}});
});

jsakalos
9 Jul 2008, 3:07 PM
Hmm, it seems that you need a more clever submit routine...

d1rty
29 Aug 2008, 8:44 AM
I'm using the code from the first post, and I'm having problems with IE. The popup date choose always displays topleft of the screen and when i select a value its parsed incorrectly - like 10/2/2083 or something completely way off.

Has anyone else come across this problem ?

Heres, my test page




<html>
<head>
<linkrel="stylesheet"href="/resources/js/ext/resources/css/ext-all.css"type="text/css">
<scriptsrc="/resources/js/ext/adapter/ext/ext-base.js"></script>
<scriptsrc="/resources/js/ext/ext-all-debug.js"></script>
<scriptsrc="/resources/js/ext-plugins/XDateField.js"></script>
<script>

Ext

.onReady(function() {

alert(1);
var xdf =new Ext.form.DateField({
renderTo:"myDiv",
id:"xdf",
value:new Date(),
});


var btn =new Ext.Button({
renderTo:"myDiv",
handler:function() {alert(Ext.getCmp("xdf").getValue())},
text:"get date"
});
});
</script>
</head>


<body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<divid="myDiv"></div>
</body>
</html>

jsakalos
29 Aug 2008, 2:31 PM
Which version of Ext? 2.1 had some issues with date field. Please upgrade to Ext 2.2.

d1rty
18 Sep 2008, 9:37 AM
Which version of Ext? 2.1 had some issues with date field. Please upgrade to Ext 2.2.

I was using 2.1, but i have just downloaded 2.2 and i have the same issues.

Using the sample code below in IE7 the popup calendar always displays topleft of the screen and even though the value of the hidden field is updated the displayed value doe not get changed.




<html>
<head>
<link rel="stylesheet" href="/resources/js/ext-2.2/resources/css/ext-all.css" type="text/css">
<script src="/resources/js/ext-2.2/adapter/ext/ext-base.js"></script>
<script src="/resources/js/ext-2.2/ext-all-debug.js"></script>
<script src="/resources/js/ext-plugins/XDateField.js"></script>
<script>
Ext.onReady(function() {
var xdf = new Ext.ux.form.XDateField({
renderTo: "myDiv",
id: "xdf",
value: new Date()
});


var btn = new Ext.Button({
renderTo: "myDiv",
handler: function() {alert(Ext.getCmp("xdf").getValue().toString())},
text: "get date"
});
});
</script>
</head>
<body>
<div style="height:300px;">&nbsp;</div>
<div id="myDiv"></div>
</body>
</html>

jsakalos
18 Sep 2008, 1:24 PM
It has nothing to do with XDateField. Replace it with DateField and you'll see the same in IE7. If you think it's an Ext bug post it to Bugs forum. (Search first not to create a duplicate and provide a showcase.)

d1rty
19 Sep 2008, 12:53 AM
It has nothing to do with XDateField. Replace it with DateField and you'll see the same in IE7. If you think it's an Ext bug post it to Bugs forum. (Search first not to create a duplicate and provide a showcase.)

Sorry Saki, but i beg to differ.

If i change the code above to use Ext.form.DateField it works correctly in IE. I have tried this using no doctype declaration, 4.01 transitional and xhtml 1.1 transitional - all work correctly in IE with DateField. The issues _only_ occur when using XDateField

Its also nothing to do with the way the vertical space is created as the same issues occur when placing the XDateField in an Ext FormPanel. Heres a couple of screenshots to clearly show the problem

datefield - http://farm4.static.flickr.com/3043/2869255089_d61057e577_o.jpg
xdatefield - http://farm4.static.flickr.com/3294/2869255103_0077c9955e_o.jpg (http://farm4.static.flickr.com/3294/2869255103_0077c9955e_o.jpg)

notice in the screenshot of xdatefield the popup calendar shows the 24th selected but the date is not displayed in the field.

I'm seeing these issues on IE6 & IE7 on XP SP3 (32bit)

jsakalos
19 Sep 2008, 2:02 AM
The problem is more serious that it looks. Add please the following method to XDateField - it is copy of DateField onTriggerClick with two debugging alerts added:


,onTriggerClick:function() {
if(this.disabled){
return;
}
if(this.menu == null){
this.menu = new Ext.menu.DateMenu();
}
Ext.apply(this.menu.picker, {
minDate : this.minValue,
maxDate : this.maxValue,
disabledDatesRE : this.ddMatch,
disabledDatesText : this.disabledDatesText,
disabledDays : this.disabledDays,
disabledDaysText : this.disabledDaysText,
format : this.format,
showToday : this.showToday,
minText : String.format(this.minText, this.formatDate(this.minValue)),
maxText : String.format(this.maxText, this.formatDate(this.maxValue))
});
this.menu.on(Ext.apply({}, this.menuListeners, {
scope:this
}));
this.menu.picker.setValue(this.getValue() || new Date());
alert(this.el.dom.type);
this.menu.show(this.el, "tl-bl?");
alert(this.el.dom.type);

}
Then click the trigger. this.el.dom.type is "text" before show (correct) and "hidden" (wrong) after show.

I have no idea what happens in IE7 "browser". In FF you get "text" in both alerts.

d1rty
19 Sep 2008, 9:43 AM
Yeah that seems very odd, I have no idea why that would happen either.
However through a process of trial and error i have found a possible work around, which might point you in the right direction to explain the cause. I have changed the onRender function to insert the hidden field after, rather than before the text field.


this.hiddenField = this.el.insertSibling({
tag:'input'
,type:'hidden'
,name:name
,value:this.formatHiddenDate(this.parseDate(this.value))
}, 'after');In my quick tests this seems to be working as expected in IE6 & 7, popups are aligned to the field, the field is updated correctly and the hidden value is submited correctly.

jsakalos
19 Sep 2008, 11:14 AM
Then it's fine, just enclose 'after' in an if(Ext.isIE){...} block so FF version stays untouched. If it would work I'll merge it to the main code.

masrodjie
11 Oct 2008, 2:22 PM
Add this small code to get formatted value:


, getFormatValue:function() {
return this.formatHiddenDate(this.getValue());
}

lobo-tuerto
8 Dec 2008, 11:05 AM
Hi saki, I'm trying to set some disabled dates dynamically, but I'm encountering some problems.

With setDisabledDays there is no problem, the XDateField updates correctly. But setDisabledDates isn't "working" at all. Even if I set the disabled dates at config time. Any ideas?


Ext.ComponentMgr.get('prestamo_fecha_de_inicio').setDisabledDates(["01/01"]); (this doesn't "gray" out the 01/01 on any year)
Ext.ComponentMgr.get('prestamo_fecha_de_inicio').setDisabledDays([6]); (this works as intended, grayes out every saturday)

Here is the config object of my XDateField:

{
"allowBlank":false,
"xtype":"xdatefield",
"disabledDates":["01/01"],
"vtype":"daterange",
"value":"2008-12-08",
"name":"prestamo[fecha_de_inicio]",
"endDateField":"prestamo_fecha_de_vencimiento",
"listeners":{"change":function(){Ext.ComponentMgr.get('-613003748').ajustaFecha();}},
"fieldLabel":"Fecha de inicio",
"id":"prestamo_fecha_de_inicio"
}

jsakalos
8 Dec 2008, 11:54 AM
What about format of disabled dates? Is '01/01' valid string?

jasonb885
10 Jan 2009, 5:28 PM
I am submitting a date that is optional, but the onRender was setting the hidden field to the string "undefined". I made the change below, which seems to resolve my issue:



this.hiddenField = this.el.insertSibling({
tag:'input'
,type:'hidden'
,name:name
// Handle possible empty value
,value:(function() {
return !this.value === undefined ? this.formatHiddenDate(this.parseDate(this.value)) : '';
}).createDelegate(this)()
});


I picked up that pattern -- the anoymous function as a property value -- from your recordForm plugin. Thanks for all the plugins and code you've provided!

jsakalos
11 Jan 2009, 4:38 AM
I think that setting the value to a function can cause problems, but YMMV.

jasonb885
11 Jan 2009, 7:49 AM
I think that setting the value to a function can cause problems, but YMMV.

I guess I was being too slick for my own good. :)

mschwartz
22 Jan 2009, 1:47 PM
Hey Saki,

I'm using DateField in a project but had to modify it. The mod may be useful to you or to include in the official sources...

Handles:
submitFormat: 'timestamp'



/**
* Ext.ux.form.DateField - Date field that supports submitFormat
*
* @author Ing. Jozef Sakalos
* @version $Id: Ext.ux.form.DateField.js 288 2008-06-11 08:53:17Z jozo $
*
* @license Ext.ux.grid.DateField is licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/

/*global Ext */

Ext.ns('Ext.ux.form');

/**
* @class Ext.ux.form.DateField
* @extends Ext.form.DateField
*/
Ext.ux.form.DateField = Ext.extend(Ext.form.DateField, {
submitFormat:'Y-m-d'
,onRender:function() {

// call parent
Ext.ux.form.DateField.superclass.onRender.apply(this, arguments);

var name = this.name || this.el.dom.name;
this.hiddenField = this.el.insertSibling({
tag:'input'
,type:'hidden'
,name:name
,value:this.formatHiddenDate(this.parseDate(this.value))
});
this.hiddenName = name; // otherwise field is not found by BasicForm::findField
this.el.dom.removeAttribute('name');
this.el.on({
keyup:{scope:this, fn:this.updateHidden}
,blur:{scope:this, fn:this.updateHidden}
});

this.setValue = this.setValue.createSequence(this.updateHidden);

} // eo function onRender
,onDisable: function(){
// call parent
Ext.ux.form.DateField.superclass.onDisable.apply(this, arguments);
if(this.hiddenField) {
this.hiddenField.dom.setAttribute('disabled','disabled');
}
} // of function onDisable

,onEnable: function(){
// call parent
Ext.ux.form.DateField.superclass.onEnable.apply(this, arguments);
if(this.hiddenField) {
this.hiddenField.dom.removeAttribute('disabled');
}
} // eo function onEnable

,formatHiddenDate : function(date){
if (Ext.isDate(date)) {
if (this.submitFormat === 'timestamp') {
return date.getTime()/1000;
}
else {
return Ext.util.Format.date(date, this.submitFormat);
}
}
return date;
}

,updateHidden:function() {
this.hiddenField.dom.value = this.formatHiddenDate(this.getValue());
} // eo function updateHidden

}); // end of extend

// register xtype
Ext.reg('DateField', Ext.ux.form.DateField);


Why is this useful?

Guy in Europe fills out form to add, say, an event to a calendar. Guy in USA sees event in his calendar with proper date/time (converted from UTC by JS Date object nicely).

jsakalos
22 Jan 2009, 3:06 PM
Yes, I agree, it can come useful and the extra if doesn't do any harm... Updating source in first post...

mschwartz
22 Jan 2009, 3:07 PM
Don't forget the divide by 1000 since JS Date returns milliseconds since the EPOCH

varsos
26 Mar 2009, 12:27 PM
Would it hurt to wrap your code inside onRender after the superclass call with:



if(typeof this.submitFormat !== 'undefined'){
...
}


This way it would behave just like a DateField.

jsakalos
26 Mar 2009, 3:13 PM
Probably not, however, post please full onRender how it would look after your change. I'll take a look.

Illiarian
8 Jul 2009, 6:06 AM
This may come in very late, but still.

Comment #37 (about IE not liking duplicate names) may solve the issue in comment #50 (about XDatePicker being rendered in top-left corner)

Miraculously, but it solved a similar problem for me :)

shiv
3 Sep 2009, 1:24 PM
This plug-in works great overall, but I can't get one little thing to work.

I've got a grid with a row editor to update existing data, including dates. But I'm using a formPanel to add new records.

Updating a record with RowEditor works fine -- the xDateField works as designed and my dates are correctly stored in the server-side DB and correctly displayed in the updated row. I'm using store.save() and store.commitChanges() with a Writer to do all this.

Adding a new record with the formPanel also works. Here's the function:



function addNewRecord() {
if(newRecordForm.form.isValid()) {
newRecordForm.getForm().submit({
url: 'actions.php', waitMsg: 'Please wait...',
params: {xaction: 'add'},
failure: failureResponse,
success: function(form, action){
var newRec = new mainDataStore.recordType(form.getValues(), action.result.newRecID);
mainDataStore.insert(0, newRec);
newRecordWindow.hide();
Ext.MessageBox.alert('Added', 'The record was added successfully.');
}
});
} else {
Ext.MessageBox.alert('Warning', 'Your form is not valid!');
}
}
However, any xDateField inputs on the form appear in newly added grid row as "NaN/NaN/N". It's like the grid is receiving the submit-formatted date (as submitted to the server) and can't figure out how to display it, or even that it's a date at all.

The Record definition has dateFormat: 'Y-m-d', which is the same as the xDateField submitFormat. Is there some way to refresh or redraw the new row, so it recognizes the submitted date?

Note that when I reload the whole grid, the new row displays correctly and the date is correct as well. So, I know that the date is getting to the server in the correct format & is getting saved to the DB.

Any suggestions?

Illiarian
1 Oct 2009, 6:44 AM
This may come in very late, but still.

Comment #37 (about IE not liking duplicate names) may solve the issue in comment #50 (about XDatePicker being rendered in top-left corner)

Miraculously, but it solved a similar problem for me :)


The problem suddenly resurfaced sometime later. In this case make sure that name and id are different! That is:


{
xtype: 'xdatefield',
name: 'period_start',
//id: 'period_start', THIS CAUSED THE PROBLEM FROM COMMENT #50
format: 'd/m/Y',
submitFormat: 'Y-m-d'
}


Oh, how I hate IE :((

lacco
2 Aug 2010, 1:43 AM
The IE switch for the hiddenField in onRender is not at the correct place:



this.hiddenField = this.el.insertSibling({
tag:'input'
,type:'hidden'
,name:name
,value:this.formatHiddenDate(this.parseDate(this.value))
// ----> inserted here
}, Ext.isIE ? 'after' : 'before');
this.hiddenName = name; // otherwise field is not found by BasicForm::findField
this.el.dom.removeAttribute('name');
this.el.on({
keyup:{scope:this, fn:this.updateHidden}
,blur:{scope:this, fn:this.updateHidden}
// ----> removed from here
});

jsakalos
2 Aug 2010, 2:41 AM
Thank you for the patch.

realjax
21 Sep 2010, 10:59 PM
Hi, got a a problem when I use xdatefields in a composite field.
When using .getValues() either 'undefined' is returned, or '' when I set this as an initial value. A date is never returned.

Any clues?

Thanks in advance

EDIT: [B]Please disregard the above, it's not true. ( It's early here, haven't had enough coffee yet.)

rogerio.carrasqueira
6 Oct 2010, 12:16 PM
Hi Everybody!

I put the extension on my code, but the datefield when posts insists on send data as follow:


data{"fields.start_date":"2010-10-13T00:00:00"}Pay attention that JSON field has a T between the date and time. How to remove it from there?

My code:


// A new generic date field
var datePicker = new Ext.ux.form.XDateField({
format: 'd/m/Y', // Using the european date format
submitFormat: 'Y/m/d',
minValue: '{% now "d/m/Y" %}' // django implementation (it is ok)
})Here where I show may date field, this is on a grid:


{header: "Data InĂ­cio", width: 100, sortable: true, dataIndex: 'start_date', renderer: Ext.util.Format.dateRenderer("d/m/Y"), editor: datePicker},The date picker is appearing nice and is selecting the date without any problem, but when the system post to the server it claims about the date formatting.

Thanks for your help.

Cheers,

jsakalos
6 Oct 2010, 1:28 PM
Is it in grid? If so, there is no reason to use XDateTime as data is not submitted by a form but store itself sends data to server. Editor fields only provide use means to put data in the store, otherwise have nothing to do with submitting.

SSzretter
30 Nov 2011, 8:42 AM
In Ext JS 4 I was able to add these configs to my date field and it worked fine for mysql back end:

format: 'm/d/Y',
altFormats: 'Y-m-d',
submitFormat: 'Y-m-d',

mohaskuar
10 Dec 2013, 4:55 AM
please how can i use the above extension am using extjs,mvc to develope my application and am new to using extensions,,,am using extjs 4... i tried to use the extension ..but not still here is the step i follow.
1. i have copied the extension source code and saved it by the name datextansion.js and saved it under UX folder.
2. then i included the file in index.html using <script></script> tag
3.alsoi have changed the line
Ext.reg('xdatefield', Ext.ux.form.XDateField);
with
Ext.define('Ext.ux.form.XDateField',{
alias:'xdatefield'

});

since am using ext4... i thought its the way to register components and later use them as xtype
4.finally i tried to add an item to my panel like this
{xtype:'xdatefield';

}

undefined error occurs... what shall I do? Am I Wright on using the Extension...please its argent any help is appreciated.