PDA

View Full Version : [new version] DateTime Field



Pages : 1 2 3 [4]

jsakalos
4 Nov 2010, 12:37 AM
What if you set layoutOnTabChange or layoutOnCardChange?

mschwartz
4 Nov 2010, 10:16 AM
What if you set layoutOnTabChange or layoutOnCardChange?

I am calling doLayout() in the tab or card activate() event handler.

jsakalos
4 Nov 2010, 2:06 PM
That shouldn't be necessary if you set
layoutOnTabChange:true on the tabpanel.

daydreamer01
5 Nov 2010, 7:32 PM
Hi,I'm using your metaform plugin together with datetime field,and I configure it this way:

metaData:{fields:[{name:"date",fieldLable:"date",
editor:
{dateConfig:{allowBlank:false},
timeConfig:{allowBlank:false},
xtype:"xdatetime"}}]}

but When I don't input anything and call a form.getForm().isValid(). it doesn't validates the empty fields,any clue to solve this problem?thanks in advance

jsakalos
6 Nov 2010, 1:02 AM
Sounds strange because MetaForm does nothing to validate logic and DateTime logic is:


/**
* @return {Boolean} true = valid, false = invalid
* @private Calls isValid methods of underlying DateField and TimeField and returns the result
*/
,isValid:function() {
return this.df.isValid() && this.tf.isValid();
} // eo function isValid

annextjs
8 Nov 2010, 2:14 AM
Hi Saki,

Please help me out with this problems. I have still not been able to solve them.


Hi Saki,

I am trying to use DateTime field since two days as a editor in EditorGridPanel. Have been in trouble with few things.
My date for is m/d and time format is H:i A. The date coming from database is in Y-m-d H:i:s format.

1. Though I have given editable:false in dateConfig, it still allows me to enter the value in date field.
2. The date is being populated in date field but it always says "This date should be equal or after some date" But the date populated and date shown in error message are same.

When i change the code to this.df.setEditable(false), it said there is not such property.

Here is my DateTime editor


editor: new Ext.ux.form.DateTime({
id:'dtf',
fieldLabel:'Date & Time',
anchor:'-18',
timePosition: 'below',
timeFormat:'H:i A',
timeConfig: {
altFormats:'H:i:s',
allowBlank:false
},
dateFormat:'m/d',
dateConfig: {
editable: false,
minValue : tDate,
maxValue : ttDate,
altFormats:'Y-m-d|Y-n-d',
allowBlank:false,
validationEvent: false,
validateOnBlur: false
},
listeners: {
focus: function(){
this.df.setValue(this.getValue());
this.df.updateValue();
this.df.setEditable(false);
}
}
})

jsakalos
8 Nov 2010, 3:00 AM
1. editable is the config option for ColumnModel/EditorGrid so setting it on Date subfield has no effect. Use readOnly or disabled if you need only date non-editable
2. I have no idea where the error message comes from; there are no signs of validation in the code you posted.

Note: DateTime was designed to form one field that would behave as one unit. If you have so different requirements for Date and Time, wouldn't it be better to use two columns: one with DateField and other with TimeField?

annextjs
8 Nov 2010, 3:06 AM
I will give it a try on readOnly and see whats happening. Will read-only take the input given by the user by selecting date from the calendar?

The reason why I am using DateTime field is because, need to capture employee incoming date and time. Hence I need both to be shown together.

I will check with validation, if its coming from somewhere else. But not sure why error message comes tho the date given in error message and date in date field are same.

jsakalos
8 Nov 2010, 3:15 AM
No, readOnly makes the whole field readOnly so it cannot be changed neither with calendar popup nor with keyboard input. So you only want to disable keyboard input still allowing selection with date picker?

jsakalos
8 Nov 2010, 3:30 AM
Just looking into docs: editable (what I wrongly say is ignored in the previous post) should do the job.

annextjs
8 Nov 2010, 5:54 AM
Yes, i want user to select date only from date picker.

I tried putting editable in dateConfig to true but that didn't work. It still allows user to key-in the date. So as per the previous post, I should set the editable false in ColumnModel?

jsakalos
8 Nov 2010, 6:22 AM
I've just tested that dateConfig:{editable:false} does that what you want.

annextjs
8 Nov 2010, 6:24 AM
Yes, editable:false is what i wanted and i also tried it but didn't work.

jsakalos
8 Nov 2010, 6:27 AM
So there must be some difference as it works for me.

annextjs
8 Nov 2010, 9:26 AM
The readOnly false worked well with dateConfig and timeConfig. It doesn't allow user to key-in but allows to select from date picker.

But the validation error message still comes. Not sure from where does it come. I have put validationEvent:false and validateOnBlur:false. I ahve minimum and maximum date. Would it be because of that?

jsakalos
8 Nov 2010, 11:32 AM
Of course! Remove maximum and minimum.

demon222
13 Nov 2010, 2:30 AM
what about the button that resets the value of a date or time (clearable datetime field)
something like
http://www.sencha.com/forum/showthread.php?115085-ClearableTextField

Regards
Radek

jsakalos
13 Nov 2010, 3:39 PM
Yes, nice!

Joe Kuan
15 Nov 2010, 11:01 AM
Hi,

I am trying to use the xdatetime with extjs 3.2.1. However, I have problem displaying the xdatetime properly under fieldset type but it works perfectly fine outside fieldset type.

Anything I have done wrong?


Ext.BLANK_IMAGE_URL = '/extjs/resources/images/default/s.gif';
Ext.onReady(function(){
Ext.QuickTips.init();
var win = new Ext.Window({
title: 'New Applet',
modal: true,
items: [{
xtype: 'form',
frame: true,
width: 500,
items: [{
xtype: 'xdatetime',
fieldLabel: 'Date time outside fieldset'
}, {
xtype: 'fieldset',
checkboxToggle: true,
title: 'Date Time inside fieldset',
collapsed: true,
animCollapse: true,
id: 'filters_set',
items: [{
xtype: 'xdatetime',
fieldLabel: 'Date time'

}]
}]
}]
});
win.show();
});


Thanks in advance
Joe

mschwartz
15 Nov 2010, 11:04 AM
That shouldn't be necessary if you set
layoutOnTabChange:true on the tabpanel.

Doesn't fix it.

You might try creating a simple test case.. A tab panel with a datetime field in the 2nd tab.

Joe Kuan
15 Nov 2010, 11:12 AM
Further information, with "collapsed: true", it messes up the xdatetime field alignments.

jsakalos
15 Nov 2010, 1:36 PM
@Joe Kuan, does it work correctly if you use standard DateField? So we can isolate it as the problem of DateTimeField.

Joe Kuan
15 Nov 2010, 2:08 PM
Hi Saki,

FYI, substituted xdatetime as datefield with 'collapsed: true'....
When I checked the fieldset to expand, the text input field is less than a character size. However, specifying width property fixes that and the calendar icon works fine.

As for xdatetime, the datefield overlaps with the time field under the fieldset. Specifying width property doesn't fix it either.

Hope this helps
Joe

mschwartz
16 Nov 2010, 6:28 AM
Hi Saki,

FYI, substituted xdatetime as datefield with 'collapsed: true'....
When I checked the fieldset to expand, the text input field is less than a character size. However, specifying width property fixes that and the calendar icon works fine.

As for xdatetime, the datefield overlaps with the time field under the fieldset. Specifying width property doesn't fix it either.

Hope this helps
Joe

Saki,

This is the exact issue I've been describing with tab panel or card panel. The way he describes date field overlaps with time field, etc., is what I see too.

annextjs
17 Nov 2010, 1:02 AM
Hi Saki,

I still have issue with the error being shown.. Please have a look at the error message. The date shown in error message and date shown in field, both are same.

23376


The readOnly false worked well with dateConfig and timeConfig. It doesn't allow user to key-in but allows to select from date picker.

But the validation error message still comes. Not sure from where does it come. I have put validationEvent:false and validateOnBlur:false. I ahve minimum and maximum date. Would it be because of that?

mschwartz
18 Nov 2010, 9:02 AM
Saki,

Any word on fixing the display issue when the field is hidden then shown? I've got customers breathing down my neck over it ...

abraxxa
28 Nov 2010, 1:24 PM
I have the same problem with collapsed-on-load panels with the xdatetime field in a top toolbar.

jsakalos
30 Nov 2010, 9:29 AM
The only workaround I've found so far is:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="ext-3.3.0/resources/css/ext-all.css">
<script type="text/javascript" src="ext-3.3.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.3.0/ext-all-debug.js"></script>
<script type="text/javascript" src="js/Ext.ux.form.DateTime.js"></script>
<title id="page-title">Title</title>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ext-3.3.0/resources/images/default/s.gif';
Ext.onReady(function() {
var p = new Ext.Panel({
collapsible:true
,collapsed:true
,height:400
,renderTo:Ext.getBody()
,title:'Collapsed panel'
,width:300
,listeners:{
expand:{fn:function(){
this.dateTime.setWidth(200);
}}
}
,tbar:{
deferLayout:true
,items:[{
xtype:'xdatetime'
,ref:'../dateTime'
}]
}
});
});
</script>
</head>
<body>
</body>
</html>

abraxxa
3 Dec 2010, 1:01 AM
My workaround so far is to set hideMode: offsets.

jsakalos
3 Dec 2010, 10:35 AM
Yes, that works too, however I do not like the animation artifacts it produces in some browsers.

sean.zhou
7 Dec 2010, 3:14 PM
Hi Saki,

It looks like this widget is not completely destroyed when it is inside of a modal window and after the window is closed. Following code seems to fix this problem. Would you mind to verify it?



,destroy: function() {
if (this.df) {
this.df.destroy();
}
if (this.tf) {
this.tf.destroy();
}
Ext.ux.form.DateTime.superclass.destroy.call(this);
}

jsakalos
7 Dec 2010, 5:13 PM
Yes, I'll test it and will let you know then.

gabbay
15 Feb 2011, 7:54 AM
HI there!

I´m using with Ext 3.1 and when I submit, the post result in firebug is:
data_destino_real: Y-2-15 1:i:0

Is it work with 3.1 or just for 2.x ??

Look my code:

{
xtype:'xdatetime',
id:'data_destino_real',
name:'data_destino_real',
fieldLabel: 'Data destino real',
anchor:'-18',
timeFormat:'H:i:s',
timeConfig: {
altFormats:'H:i:s',
allowBlank:true,
increment: 1
},
dateFormat:'d/n/Y',
dateConfig: {
altFormats:'Y-m-d|Y-n-d',
allowBlank:true
}
}

jsakalos
15 Feb 2011, 3:48 PM
It works with 3.x too. What is your hiddenFormat config option?

chenzero
17 Feb 2011, 10:28 PM
it seems that the DateTime.getValue() returns the previous value after change Date or Time in version 3.3.0
I temporarily changed the DateTime.getValue() to be as following, it works.



,getValue:function() {
// create new instance of date
//return this.dateValue ? new Date(this.dateValue) : '';

//fix
var d = this.df.getValue();
var t = this.tf.getValue();
if (d==null||d=="" || t==null||t=="") { // one of Date field or Time field is not set.
return "";
}
// in version 3.3.0, TimeField getValue() returns a string
// need a Date object to get Offset time
t = this.tf.getRawValue();
t = this.tf.parseDate(t);
t.setFullYear(1970);
t.setMonth(0);
t.setDate(1);

// the locale time: 1970-1-1 00:00:00
var z0 = new Date();
z0.setFullYear(1970);
z0.setMonth(0);z0.setDate(1);
z0.setHours(0);z0.setMinutes(0);z0.setSeconds(0);z0.setMilliseconds(0);

var ret = new Date();
ret.setTime(d.getTime() + t.getTime() - z0.getTime());
return ret;
} // eo function getValue

please post a msg if you need the full testing code.

njsnow7
17 Feb 2011, 10:40 PM
Hi Saki,
Thank you very much for your cool components! It has saved me a lot of effort. I use it as a editor in a EditorGridPanel. I use hiddenFormat to config the date time format. I pass the date time as a formatted string into the grid. It display well and when I double click on it, your DateTime editor will come out and render the correct time in it. I'm able to change the date and time correctly, but when I click away, it displays the right date and time but always in one format: "Fri Jul 10 2011 22:01:00 GMT+1200(NZST)", where should I format this to a String and show on my table? Thanks a lot.

jsakalos
18 Feb 2011, 4:06 PM
I think it should be dateFormat and timeFormat config options.

chenzero
18 Feb 2011, 6:19 PM
I think it should be dateFormat and timeFormat config options.

Hi Saki,
you are right. that problem I encountered is related to the dateFormat.
I used your testing code, changed the dateFormat to be: dateFormat:'Y-m-d'
and this problem is ONLY occurred in the IE browser. I can reproduce it in the IE6 currently,
(I remember another computer of mine is IE7). but no occur in the Firefox(my version is 3.6.13).

Please see the attached image.
Thank you !

24750

jsakalos
18 Feb 2011, 11:30 PM
You can find out if it is a IE or core Ext issue by trying to use the standard date field.

chenzero
19 Feb 2011, 4:39 AM
You can find out if it is a IE or core Ext issue by trying to use the standard date field.

I tested that the standard DateField doesn't have this problem.
and for that problem, it's trick to reproduce because it needs to change Date/Time field several times!
sometimes it gets the right date, however, after change Date/Time field several times,
it will get wrong date.

jsakalos
19 Feb 2011, 4:47 AM
OK, so check some general things first:

1. run your javascript through http://jslint.com and fix all problems found
2. check if all ids on the page are unique

chenzero
19 Feb 2011, 11:09 AM
OK, so check some general things first:

1. run your javascript through http://jslint.com and fix all problems found
2. check if all ids on the page are unique

Hi Saki,
I am sure that the ids are unique.
please forget this because I found out that only occurred in the IE6 sp2.
I have upgraded IE to 8, and it works great!
Thank you!

if you are interested, the code as following


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:'xdatetime'
,id:'dtf'
,fieldLabel:'Date & Time'
// ,width:360
,anchor:'-18'
,timeFormat:'H:i:s'
,timeConfig: {
altFormats:'H:i:s'
,allowBlank:true
}
,dateFormat:'Y-m-d'
,dateConfig: {
altFormats:'Y-m-d|Y-n-d'
,allowBlank:true
}
}]
}]
,buttons:[{
text:'Submit'
,handler:function() {
//Ext.getCmp('form').getForm().submit();
Ext.MessageBox.show({
title:"DateTime"
,msg:Ext.getCmp('dtf').getValue()
,buttons: Ext.Msg.OK
,icon: Ext.MessageBox.INFORMATION
});
}
}]
});
win.show();
});

olka
7 Mar 2011, 1:36 AM
Thanks! The component is very useful :)

iryndin
20 Mar 2011, 1:28 PM
Where one can download up-to-date source code of the component?

jsakalos
20 Mar 2011, 3:00 PM
See the first post - it's the code I use.

maina
25 Mar 2011, 4:38 AM
When I use this component on the grid it does not work.
Clicking on the datefield I get editor.column is undefined and on clicking the time portion I get this.list is undefined.but when I do the same in a normal extjs form it works ok.

jsakalos
26 Mar 2011, 3:32 AM
See http://recordform.extjs.eu - DataTime is used in grid there

easley
12 Apr 2011, 12:13 AM
Hi Saki,

Thanks for this great component!

I had a couple of issues (note: my code changes flagged with "DPE"):

1) I use Ext.ux.form.DateTime as part of a composite component. The composite uses a column layout. On init, only the hidden input element gets added to the column layout, followed by my own custom parts. Later, onRender() does "Ext.DomHelper.append(this, ..." to add the table element. This gets added as the last column in my column layout, to the right of my own custom parts!
I think the hidden input element should be inside the x-form-field-wrap wrapper, along with the table (i.e. so they remain physically together). I achieved a fix as follows:


//[DPE - the hidden input field should be wrapped with the UI widgets. We'll render our layout table into the wrapper div.]
//was: ,defaultAutoCreate:{tag:'input', type:'hidden'}
,defaultAutoCreate:{tag:'div', cls:'x-form-field-wrap', children:[{tag:'input', type:'hidden'}]}

....
,onRender:function(ct, position) {
// don't run more than once
if(this.isRendered) {
return;
}

// render underlying hidden field
Ext.ux.form.DateTime.superclass.onRender.call(this, ct, position);

//[DPE start (previous code commented out)]
// // render DateField and TimeField
// // create bounding table
// var t;
// if('below' === this.timePosition || 'bellow' === this.timePosition) {
// t = Ext.DomHelper.append(this, {tag:'table',style:'border-collapse:collapse',children:[
// {tag:'tr',children:[{tag:'td', style:'padding-bottom:1px', cls:'ux-datetime-date'}]}
// ,{tag:'tr',children:[{tag:'td', cls:'ux-datetime-time'}]}
// ]}, true);
// }
// else {
// t = Ext.DomHelper.append(this, {tag:'table',style:'border-collapse:collapse',children:[
// {tag:'tr',children:[
// {tag:'td',style:'padding-right:4px', cls:'ux-datetime-date'},{tag:'td', cls:'ux-datetime-time'}
// ]}
// ]}, true);
// }
//
// this.tableEl = t;
// this.wrap = t.wrap({cls:'x-form-field-wrap'});
this.wrap = this.el; // Note: could instead go through this file replacing this.wrap with this.el
// render DateField and TimeField
// create bounding table
var t;
if('below' === this.timePosition || 'bellow' === this.timePosition) {
t = Ext.DomHelper.append(this.wrap, {tag:'table',style:'border-collapse:collapse',children:[
{tag:'tr',children:[{tag:'td', style:'padding-bottom:1px', cls:'ux-datetime-date'}]}
,{tag:'tr',children:[{tag:'td', cls:'ux-datetime-time'}]}
]}, true);
}
else {
t = Ext.DomHelper.append(this.wrap, {tag:'table',style:'border-collapse:collapse',children:[
{tag:'tr',children:[
{tag:'td',style:'padding-right:4px', cls:'ux-datetime-date'},{tag:'td', cls:'ux-datetime-time'}
]}
]}, true);
}

this.tableEl = t;
//[DPE end]

this.wrap.on("mousedown", this.onMouseDown, this, {delay:10});
....


2) In initComponent(), you have coded to allow Ext.form.DateField.prototype.format to provide a default:

,format:this.dateFormat || Ext.form.DateField.prototype.format

But this doesn't work as intended because this.dateFormat is assigned a default value:

/**
* @cfg {String} dateFormat Format of DateField. Can be localized. (defaults to 'm/y/d')
*/
//[DPE - comment out next line or we're denied the ability to initialise from Ext.form.DateField.prototype.format]
// ,dateFormat:'m/d/y'


Likewise timeFormat.

Note: It would be useful to also pick up Ext.form.DateField.prototype.altFormats and Ext.form.TimeField.prototype.altFormats in similar fashion, e.g.:

// create DateField
var dateConfig = Ext.apply({}, {
id:this.id + '-date'
,format:this.dateFormat || Ext.form.DateField.prototype.format
//[DPE - added line]
,altFormats:this.altDateFormats || Ext.form.DateField.prototype.altFormats
,width:this.dateWidth
,selectOnFocus:this.selectOnFocus
,validator:this.dateValidator
,listeners:{
blur:{scope:this, fn:this.onBlur}
,focus:{scope:this, fn:this.onFocus}
}
}, this.dateConfig);


Thanks again for sharing your work (here and elsewhere) - I've learned a lot by reading your code.

David

oldtenen
19 Apr 2011, 5:35 AM
Hi Saki,
I am sure that the ids are unique.
please forget this because I found out that only occurred in the IE6 sp2.
I have upgraded IE to 8, and it works great!
Thank you!

if you are interested, the code as following


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:'xdatetime'
,id:'dtf'
,fieldLabel:'Date & Time'
// ,width:360
,anchor:'-18'
,timeFormat:'H:i:s'
,timeConfig: {
altFormats:'H:i:s'
,allowBlank:true
}
,dateFormat:'Y-m-d'
,dateConfig: {
altFormats:'Y-m-d|Y-n-d'
,allowBlank:true
}
}]
}]
,buttons:[{
text:'Submit'
,handler:function() {
//Ext.getCmp('form').getForm().submit();
Ext.MessageBox.show({
title:"DateTime"
,msg:Ext.getCmp('dtf').getValue()
,buttons: Ext.Msg.OK
,icon: Ext.MessageBox.INFORMATION
});
}
}]
});
win.show();
});



I have the same problem in IE 7 while in FF it works fine. Ext DateField is ok but DateTime is not until I set focus to another component.

Here is brief description of a problem.

I have 2 datetime fields and a button in grid toolbar. When I select date in datetime field and click button, I don't get new value but the old one from datetime field.
But if I click on grid or some other component after selecting date and before clicking button, then it is ok and I get new value.
I think it has something to do with change event which occurs only after datetime field losing focus.

So I changed getValue function like chenero wrote and now is ok.
Is there some better solution to this?

Jangla
5 May 2011, 7:05 AM
I've been using this control for a while but just found a possible issue with it. Despite having the most up to date code, if I have an invalid field (as in one I've marked invalid on purpose using markInvalid() ), any of these code lines returns true:



Ext.getCmp('my-xdatetime-field').isValid()

or


Ext.getCmp('my-xdatetime-field').df.isValid()

or


Ext.getCmp('my-xdatetime-field').tf.isValid()


The control looks fine on the form - it has the relevant invalid css classes applied and the invalid icon shows up but getting it's valid state always returns true.

Anyone else have this problem and has a solution? I'd really like to be able to have this on a form that has formBind enabled-buttons but until I can reliably get the valid/invalid state of the control, this is impossible.

jsakalos
6 May 2011, 2:20 AM
Sounds strange, never heard about a similar problem. Could you post a showcase? I'd take a look.

Jangla
6 May 2011, 7:03 AM
Re: my previous post. Reading through the Ext docs, I think I understand what the problem is - markInvalid doesn't actually mark a form or control invalid per se; for a control to be invalid it must contain data that is of an invalid format so in a date field this would mean an invalid date format. Marking a field as invalid doesn't mean that isValid() will return false. Therefore a button on a form set to formBind will remain enabled as the validation that's working against looks at the format validation and not the status that we may have programmatically set with markInvalid()

So, to a solution; say I have 6 date fields (startA, endA, startB, endB, etc) and I've linked each pair of fields with the startDateField and endDateField config options (startA to endA etc).

I want to be able to mark startB as invalid (and therefore the form on which the controls reside would be invalid) if it's less than endA.

Any help?

krishnaswamy
9 May 2011, 12:18 PM
Hi
First many thanks for this xtn, below is my code,
my time config is


var time = new Ext.form.TimeField({
minValue : '12:00 AM',
maxValue : '23:00 PM',
increment : 60
});
function y2k(number) { return (number < 1000) ? number + 1900 : number; }

function getNextSixteenHrs() {
var today = new Date();
var d = today.getDate();
var m = today.getMonth();
var y = today.getYear();
var h = today.getHours();
var nextSixteenHr = new Date(y2k(y), m, d, h + 16, 0, 0);
return (nextSixteenHr)
}



{
xtype : 'xdatetime',
dateValue : getNextSixteenHrs(),
name : 'goodUntilDate',
timeWidth : 75,
timeConfig : time,
dateFormat : 'm/d/Y',
dateConfig : {
altFormats : 'Y-m-d|Y-n-d',
allowBlank : true
},
fieldLabel : 'Good Until Date'
}
when loaded it show the next 16th hour, but if change the time and submit its sending the original value I loaded, if i change date and time it sends the new date but not the time
Please help me to find what i am doing wrong here

icarey
27 May 2011, 1:02 AM
Can this extension be used in extjs 4?
I am going to migrate my application from 3 to 4 but I am not sure how to use this extension in extjs 4

Thanks,
Ivan

codeable
7 Jun 2011, 5:33 PM
Not sure if this is already present in the comments, but I suggest you add an option for the deferred change notification instead of always deferring it.

The use case is thus:

1) A user changes the Date
2) Moves to the time field [blur,focus]
3) Changes the Time
4) Submits the form (without blur)

Problem is:

A lot of integration pieces rely on "change" events to wire to data-bound elements. When the change event is deferred, it does not fire before the submit takes place.

I've added the following minor adjustment to handle this:

Change this:


// fire events later
(function() {
if(!this.df.hasFocus && !this.tf.hasFocus) {
var v = this.getValue();
if(String(v) !== String(this.startValue)) {
this.fireEvent("change", this, v, this.startValue);
}
this.hasFocus = false;
this.fireEvent('blur', this);
}
}).defer(100, this);

To:



var scope = this;
var changeFunction = function() {
if(!scope.df.hasFocus && !scope.tf.hasFocus) {
var v = scope.getValue();
if(String(v) !== String(scope.startValue)) {
scope.fireEvent("change", scope, v, scope.startValue);
}
scope.hasFocus = false;
scope.fireEvent('blur', scope);
}
};

if(this.deferChangeEvent){
// fire events later
(changeFunction).defer(100);
} else {
changeFunction();
}


And added this at the top for clarity:


/**
* @cfg {Boolean} deferChangeEvent if true will defer the change event to 100 (defaults to true)
*/
,deferChangeEvent:true

stevek
9 Jun 2011, 6:43 PM
I wanted to ask about events.
I would like to utilize the 'select' event on the timeField aspect of the DateTimeField widget. How can I use that?

Some help would be most appreciated.
Thanks.

icarey
17 Jun 2011, 10:13 PM
Will this extension be migrated to extjs 4 or what is needed to make it extjs4 compatible

jonaldomo
28 Jun 2011, 9:04 AM
Will this extension be migrated to extjs 4 or what is needed to make it extjs4 compatible

I am also looking for a datetime solution for ext js 4

pibree
13 Jul 2011, 7:15 AM
Hi
I have Ext 2.0 and I try to use DateTimeField extension.
All works fine except with Chrome.
I have that the calendar "explodes" I send you a screenshot about this. 26977
My code is :


<html>
<head>
<meta http-equiv="Content-Type" content="text/html" />

<script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext/ext-all.js"></script>
<script type="text/javascript" src="js/ext/extension/DateTimeField.js"></script>
<link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="js/ext/resources/css/xtheme-gray.css" />

</head>
<body>
<script>
Ext.BLANK_IMAGE_URL = 'js/ext/resources/images/default/s.gif';
Ext.onReady(function() {
Ext.QuickTips.init();
var simple = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form',
bodyStyle:'padding:5px 5px 0',
width: 550,
defaultType: 'textfield',

items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},new Ext.ux.form.DateTime({
fieldLabel: 'Data Pubblicazione',
name:'data[Event][started]',
readOnly:true,
timeFormat:'H:i',
timeConfig: {
altFormats:'H:i',
value: '',
readOnly:true,
allowBlank:true
},
dateFormat:'d/m/Y',
dateConfig: {
altFormats:'Y-m-d|Y-n-d',
value: '',
allowBlank:true,
readOnly:true
}
})
],

buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});

simple.render(document.body);
});
</script>
</body>
</html>

calavera
18 Aug 2011, 6:54 AM
Did you ever fixed this ? I am facing the same problem, I get POST from dateTimeField like this: Y-7-31 0:i:0 . I don't recall changing code, don't know what's wrong because it has worked before. Anyway, my hiddenFormat is this: hiddenFormat:'Y-m-d H:i:s'.

Any idea ?

Thanks.


HI there!

I´m using with Ext 3.1 and when I submit, the post result in firebug is:
data_destino_real: Y-2-15 1:i:0

Is it work with 3.1 or just for 2.x ??

Look my code:

{
xtype:'xdatetime',
id:'data_destino_real',
name:'data_destino_real',
fieldLabel: 'Data destino real',
anchor:'-18',
timeFormat:'H:i:s',
timeConfig: {
altFormats:'H:i:s',
allowBlank:true,
increment: 1
},
dateFormat:'d/n/Y',
dateConfig: {
altFormats:'Y-m-d|Y-n-d',
allowBlank:true
}
}

boyan.dimitrov
21 Aug 2011, 11:08 AM
I'm trying to align the existing control to extjs 4. overall everything was smooth except anchoring. any hints how to anchor control correctly ?

bee
22 Aug 2011, 7:57 AM
Hi I would like to use this xdatetime in my forms of extjs 4.0, but I am getting exception. Please let me know how to use it in extjs 4.0

marcvdm
9 Oct 2011, 8:29 AM
Hello,

I use the xdatetime extension in combination with Extjs 3.4.0. (but I had the same problem already in some older 3.0 versions).

At first sight, everything is working fine. As long as I manually change the date and timefields, the values show up correctly, and can be correctly retrieved with formValues().

But I want to preset values in those fields by using setValue(). Also this seems to work at first sight: if I do setValue(date) or setValue(time), date and time are indeed showing up correctly in the date and timefields.

However, when the form is processed (=when I use formValues() ), the retrieved date and time fields of the xdatetimefields still contain the old values (the ones before setValue() was used). So I can never submit the correct preset values to the server, only values that have been changed manually.

I also noticed that if I just focus/blur those fields once manually before I call formValues(), then I do get the right values. So I thought about a workaround by simulating this with fireEvent(focus) or fireEvent(blur), but this does not have the desired effect.

Anybody has an idea what is going on?

Best regards, Marcvdm.

Below is a sample of code. The buttons are meant for quickly jumping a day or a week backwards, similar buttons exist on the page to jump a day or a week forward. Which is what they appear to do on screen, but as explained above, they keep submitting the original values.
And yes, I checked already that hey all have unique component id's



{
xtype: 'panel',
layout: 'column',
hidden: false,
items: [{
xtype: 'button',
text: '<<&nbsp',
tooltip: 'a week sooner',
listeners: {
click: function ClickWeekSooner(){
var begintime=Ext.getCmp('begintime');
begintime.df.setValue(begintime.df.getValue().add(Date.DAY,-7));
var endtime=Ext.getCmp('endtime');
endtime.df.setValue(endtime.df.getValue().add(Date.DAY,-7));

}
}

},{
xtype: 'button',
text: '<&nbsp&nbsp',
tooltip: 'a day sooner',
listeners: {
click: function ClickdaySooner(){
var begintime=Ext.getCmp('begintime');
begintime.df.setValue(begintime.df.getValue().add(Date.DAY,-1));
var endtime=Ext.getCmp('endtime');
endtime.df.setValue(endtime.df.getValue().add(Date.DAY,-1));

}
}

}]

}

marcvdm
9 Oct 2011, 8:37 AM
I forgot to make oine thing clear in the previous message: 'begintime' and 'endtime' are id's of two different xdatetimefields. The buttons change both, preserving the timeslot.

nbourdeau
16 Nov 2011, 5:48 AM
This thread is pretty huge and searching in it is a pain ....
Does someone made an updated version of the DateTime Field for ExtJs 4 ???

easley
16 Nov 2011, 11:49 PM
Does someone made an updated version of the DateTime Field for ExtJs 4 ???
This worked OK for me. (http://stackoverflow.com/questions/6092112/ext-ux-form-field-datetime-questions)

Jojo79
17 Nov 2011, 4:54 AM
Not a extjs expert.. Just tried to migrate DateTime to Extjs version 4.
Attached the file 'datetime-extjs4.zip'.

The component is working on FF 4+/Chrome.. Not tested with IE.
To resolve layout issues, you can wrap this component in panel or field container.

Any improvements/comments are welcomed.

Thanks!

amsalak
17 Nov 2011, 11:30 AM
This thread is pretty huge and searching in it is a pain ....
Does someone made an updated version of the DateTime Field for ExtJs 4 ???

Update was successful for me without any errors

nbourdeau
17 Nov 2011, 11:43 AM
@easley (http://www.sencha.com/forum/member.php?186975-easley) : great thank you !

ithompson
23 Nov 2011, 1:38 PM
Is there an Ext JS 4.0 version of this?

ithompson
23 Nov 2011, 1:42 PM
Is there an Ext JS 4.0 version of this?

No functionality for the Delete button? Really? =(

SSzretter
29 Nov 2011, 7:00 AM
In the constuctor, I am getting a syntax error in Ext JS 4:
Uncaught TypeError: Cannot read property 'prototype' of undefined


// }}}
// {{{
/**
* @private
*/
,adjustSize:Ext.BoxComponent.prototype.adjustSize


Why?

I am including:
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>

Then I pasted the code from page 1 of this thread (up to the line Ext.reg('xdatetime', Ext.ux.form.DateTime);)

easley
29 Nov 2011, 7:10 AM
> Then I pasted the code from page 1 of this thread

That code relates to an earlier version of Ext. BoxComponent is no more in ExtJS4.

Since this thread is so old and long, you might do better to read it backwards ;-)

maiconschelter
23 Mar 2012, 5:45 AM
Found with ExtJS 4.1, tested in FireFox, Chrome and Safari. Not found in Internet Explorer.
33071

I_Leising
12 Apr 2012, 7:01 AM
Hi,

if i use the DateTime-Field in a grid it doesnt work correct in the last visible row.33926

The user cant select the time :(

Does anyone have a solution for this?

//edit: i use Ext 3.4

Keylan
8 May 2012, 11:19 AM
I have run into the same issue with this field in the last row of a grid, when the timePosition is set to below. It seems like the time field portion shows up inside the grid and gets cut off by the bottom of the grid. Has anyone come up with a solution for this issue (besides changing timePosition to right).

Deadlock
12 May 2012, 3:47 AM
I got previously posted version of DateTime picker for ExtJS 4.1 and it doesn't work.
May be it was tested with RC version, but with my version of ExtJS (4.1 release) it doesn't work.
I novice in Ext, have a little practice and try to fix it with my knowledge - I got to make it work.
Who want may diff my changes with previous version and put self correction.

abc_check
21 May 2012, 1:06 AM
Is there a version of this plugin for ExtJS 3.4???

zhaoshixuan
23 May 2012, 12:55 AM
Hi, I encounter a problem. When the cursor is in the datetime field, I submit and the defered funcion in onBlur function will take effect after the request is sent.
Thus, the new value of this field will miss passing to the controller.
Now, I have to defer 100ms the submit function and wait for datetime field's onBlur taking effect.
It is not a good idea, 100ms is too large and lowers performance.
If I reduce the defer time of onBlur function, It will bring another problem. If you focus is in date field, onBlur function will take effect when you click the time field's trigger button. Thus, the cursor will blur out of the component.
Will anyone have better solution?
Beg for your help!

nbourdeau
24 May 2012, 4:16 AM
Hi, I encounter a problem. When the cursor is in the datetime field, I submit and the defered funcion in onBlur function will take effect after the request is sent.
Thus, the new value of this field will miss passing to the controller.
Now, I have to defer 100ms the submit function and wait for datetime field's onBlur taking effect.
It is not a good idea, 100ms is too large and lowers performance.
If I reduce the defer time of onBlur function, It will bring another problem. If you focus is in date field, onBlur function will take effect when you click the time field's trigger button. Thus, the cursor will blur out of the component.
Will anyone have better solution?
Beg for your help!

Hi, this is the version I'm using and it works great for me (inspect the onSpecialKey handlers) :



Ext.define('Ext.ux.form.field.DateTime', {
extend:'Ext.form.FieldContainer',
mixins: {
field: 'Ext.form.field.Field'
},
alias: 'widget.datetimefield',
layout: 'fit',
timePosition:'right', // valid values:'below', 'right'
dateCfg:{},
timeCfg:{},
allowBlank: true,


initComponent: function() {
var me = this;
me.buildField();
me.callParent();
this.dateField = this.down('datefield');
this.timeField = this.down('timefield');
me.initField();
},


//@private
buildField: function() {
var l;
var d = {};
if (this.timePosition == 'below') {
l = {type: 'anchor'};
d = {anchor: '100%'};
} else
l = {type: 'hbox', align: 'middle'};
this.items = {
xtype: 'container',
layout: l,
defaults: d,
items: [Ext.apply({
xtype: 'datefield',
format: 'Y-m-d',
width: this.timePosition != 'below' ? 100 : undefined,
allowBlank: this.allowBlank,
listeners: {
specialkey: this.onSpecialKey,
scope: this
},
isFormField: false // prevent submission
}, this.dateCfg), Ext.apply({
xtype: 'timefield',
format: 'H:i',
margin: this.timePosition != 'below' ? '0 0 0 3' : 0,
width: this.timePosition != 'below' ? 80 : undefined,
allowBlank: this.allowBlank,
listeners: {
specialkey: this.onSpecialKey,
scope: this
},
isFormField: false // prevent submission
}, this.timeCfg)]
};
},


focus: function() {
this.callParent();
this.dateField.focus(false, 100);
},


// Handle tab events
onSpecialKey:function(cmp, e) {
var key = e.getKey();
if (key === e.TAB) {
if (cmp == this.dateField) {
// fire event in container if we are getting out of focus from datefield
if (e.shiftKey) {
this.fireEvent('specialkey', this, e);
}
}
if (cmp == this.timeField) {
if (!e.shiftKey) {
this.fireEvent('specialkey', this, e);
}
}
} else if (this.inEditor) {
this.fireEvent('specialkey', this, e);
}
},


getValue: function() {
var value, date = this.dateField.getSubmitValue(), time = this.timeField.getSubmitValue();
if (date) {
if (time) {
var format = this.getFormat();
value = Ext.Date.parse(date + ' ' + time, format);
} else {
value = this.dateField.getValue();
}
}
return value
},


setValue: function(value) {
this.dateField.setValue(value);
this.timeField.setValue(value);
},


getSubmitData: function() {
var value = this.getValue();
var format = this.getFormat();
return value ? Ext.Date.format(value, format) : null;
},


getFormat: function() {
return (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeField.submitFormat || this.timeField.format)
},


getErrors: function() {
return this.dateField.getErrors().concat(this.timeField.getErrors());
},


validate: function() {
if (this.disabled)
return true;
else {
var isDateValid = this.dateField.validate();
var isTimeValid = this.timeField.validate();
return isDateValid && isTimeValid;
}
},


reset: function() {
this.mixins.field.reset();
this.dateField.reset();
this.timeField.reset();
}


});

marc123
19 Nov 2012, 5:15 AM
Hi,

I use Sakalos' xdatetime plugin version 2.0. When opening the timefield with the trigger I can select timevalues each 15 minutes so I can select 15:00:00, 15:15:00 etc.
But I want to be able to also select intermediate values - e.g.15:12:00 or 15:23:46.
This is not possible because onBlur the entered value gets rounded to the closest predefined value - e.g. 15:23:13 becomes 03:15:00 - 03 instead of 15 is probably due to the timeFormat config not properly configured.

Is this maybe because the value in the timefield _has_ to be one of the predefined values?
Is it possible to have this functionality?

Thanks,

Marc

marc123
19 Nov 2012, 5:36 AM
use the timefield config option 'increment'

Jangla
23 Feb 2013, 12:57 PM
None of the ext 4 versions mentioned here seem to work in 4.1.1. I keep getting the following error when trying to use the date time field on a form that's having it's details loaded via a call to loadRecord:

Uncaught TypeError: Cannot call method 'on' of undefined

Update: It seems to be a problem with the time field. If I comment out the time field in the class (and the initField call) the problem goes away. Obviously this isn't a solution, just hoping that bringing some more info to the table will help us all arrive at a solution :)

kirlisakal
3 Apr 2013, 6:57 AM
it should not be so hard to make a version matched download list?

i.e.
V3.4 > DateTime.v3.4.zip
V4.0.7 > DateTime.v4.0.zip
V4.1.1 > DateTime.v4.1.zip


it will stop all the turmoil in forum. pls... I just cant find for v4.0.7

Jojo79
9 May 2013, 10:41 PM
Not a extjs expert.. Just tried to migrate DateTime to Extjs version 4.
Attached the file 'datetime-extjs4.zip'.

The component is working on FF 4+/Chrome.. Not tested with IE.
To resolve layout issues, you can wrap this component in panel or field container.

Any improvements/comments are welcomed.

Thanks!

A better approach for ExtJs 4.x would be as mentioned here (http://www.sencha.com/forum/showthread.php?22661-new-version-DateTime-Field/page82)

danderson
30 Jan 2014, 9:27 AM
I realize this is the Ext 2.x forum, but it seems to be the most 'active' support area for Saki's extension.

I have an existing row editor grid using the DateTime field that is functioning in Chrome/FF/IE 11, but is throwing errors in IE8/9/10 whenever the row is double clicked to launch the editor.

IE 8: 'this.df.el' is null or not an object (line 543)
IE 9: Unable to get value of the property 'up' (line 543)
IE 10: Unable to get value of the property 'up' (line 543)

The offending block of code:


if (Ext.isIE) {
this.df.el.up('td').setWidth(w - this.timeWidth - 4);
this.tf.el.up('td').setWidth(this.timeWidth);
}


I'm at a loss as to if this error is being caused by a deficiency in the DateTime component, the RowEditor component, or something that I have done (although it is working elsewhere). In IE11, Ext.isIE returns false, so that block of code is never called.

endino
6 Apr 2014, 6:11 PM
Hii.When I use this component in a grid, all I see is a time dropdown.where is the calendar?thanks very much