PDA

View Full Version : [new version] DateTime Field



Pages : 1 [2] 3 4

dandfra
10 Jul 2008, 3:49 AM
If I have a container with a DateTime field, and I call container.remove(dateTiemField) the tags are not removed from the dom (and so the field doesn't disappear). The reason is that the destroy function should be reimplemented to destroy the DateField and the TimeFiled. This is my implementation (if you need it):



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

jsakalos
10 Jul 2008, 2:16 PM
Would you please test this implementation?


/**
* @private
* called from Component::destroy.
* Destroys all elements and removes all listeners we've created.
*/
,beforeDestroy:function() {
if(this.isRendered) {
this.removeAllListeners();
this.wrap.removeAllListeners();
this.wrap.remove();
this.tableEl.remove();
this.df.destroy();
this.tf.destroy();
}
} // eo function beforeDestroy

dandfra
10 Jul 2008, 11:05 PM
It says that this.removeAllListeners is undefined (Object doesn't support property or method). Commenting this line it works.
Ciao

jsakalos
10 Jul 2008, 11:28 PM
Thank you for testing. There is still one listener to remove - I'll handle that and let you know then.

anotherpit
11 Jul 2008, 3:54 AM
Thanks, jsakalos. Very useful extension. But the way the field updates its value seems a little bit strange to me. Here's the patch that I had to write for my project and that implements more senseful behaviour:


Ext.override(Ext.ux.form.DateTime, {
isValid:function() {
if (this.df.isValid() && this.tf.isValid()) {
this.updateValue();
return true;
}
return false;
},
validate:function() {
if (this.df.validate() && this.tf.validate()) {
this.updateValue();
return true;
}
return false;
}
});

I think update on validation is more proper then update on blur event and on Enter key pressed, isn't it?

jsakalos
11 Jul 2008, 8:21 AM
Validate mustn't do anything with value. The way it is is consistent with the rest of Ext.

dima
16 Jul 2008, 4:44 AM
How change interval in DataTime in control xdatetime :((

Barbanek
16 Jul 2008, 5:09 AM
Hi guys,

before I've seen this extension
we made something similar, so maybe it can come handy for some of you.
demo http://extjs.s4w.net

Cheers Tomas

kristalgic
16 Jul 2008, 9:10 AM
I tried the extension and it's quite lovely, but for some reason, whatever I do, the date field is always highlighted in red meaning it isn't happy with something. However, I havn't tried to implement any differences, just run it as is.

Any ideas?



editor: new Ext.ux.form.DateTime({
width: 100
})


I was trying to test to see how the hiddenFormat works since before, the dateTime always passed back Thr 12 .. GMT (Central..) no matter what the hidden format was.

Great extension though Saki,
Cheers from CZ!

jsakalos
16 Jul 2008, 10:16 AM
How change interval in DataTime in control xdatetime :((

http://extjs.com/deploy/dev/docs/?class=Ext.form.TimeField&member=increment

jsakalos
16 Jul 2008, 10:23 AM
What's your configuration? A showcase?

Generally, DateTime field puts together DateField and TimeField w/o changing either of 'em. You can configure them individually by passing dateConfig and/or timeConfig. So what's your dateConfig?



I tried the extension and it's quite lovely, but for some reason, whatever I do, the date field is always highlighted in red meaning it isn't happy with something. However, I havn't tried to implement any differences, just run it as is.

Any ideas?



editor: new Ext.ux.form.DateTime({
width: 100
})
I was trying to test to see how the hiddenFormat works since before, the dateTime always passed back Thr 12 .. GMT (Central..) no matter what the hidden format was.

Great extension though Saki,
Cheers from CZ!

jsakalos
16 Jul 2008, 10:26 AM
Hi guys,

before I've seen this extension
we made something similar, so maybe it can come handy for some of you.
demo http://extjs.s4w.net

Cheers Tomas

I was also thinking about similar design before but it's too wide for grids and I needed DateTime as GridEditor. Now I use timePosition:'below' for grids that further saves precious width in grids.

marco76
21 Jul 2008, 12:07 AM
Hi , I have a html page. Now when I click on a particular div I substitute this div with a datatime field.
My problem is in IE7,IE6.
The field is showed perfectly but when I click to change date the time disappears when I click to change the time the date disapears.
I post my code


function editorInPlace(element_id){

if(element = Ext.get(element_id)) {

element.on('click',function(){

if(!this.editor){

if(this.getHeight()<80) var height = 80;
else var height = this.getHeight();

if(this.getWidth() < 180) var width = 180;
else var width = this.getWidth() - 5;

this.editor = new Ext.form.FormPanel({
autoHeight:true,
width:width,
hideMode: 'offsets',
border:false,
items: [


new Ext.ux.form.DateTime({
width:width,
hideLabel: true,
name: input_name,
value:'14/04/2008 19:00',
allowBlank:false,
readOnly:true,
timeFormat:'H:i',
timeConfig: {
altFormats:'H:i',
allowBlank:false,
value: '19:00',
readOnly:true
},
dateFormat:'d/m/Y',
dateConfig: {
altFormats:'Y-m-d|Y-n-d',
allowBlank:false,
value: '14/04/2008',
readOnly:true
}
})


]

});


this.dom.innerHTML = '';
this.editor.render(this.dom);
this.show();

}
});
}
}

jsakalos
21 Jul 2008, 8:09 AM
Remove doctype if any. If it doesn't help, use Firefox ;) (kidding)

dgms
28 Jul 2008, 3:13 AM
where can i download the datetime.js? I just copy the source code on the first page.however, i found it's in an unreadable format.

jsakalos
28 Jul 2008, 6:42 AM
I've just tested copying the code from the first post and pasting it to my text editor and it worked. What is "unreadable format"?

rhuanca
28 Jul 2008, 11:02 AM
Hi jsakalos,

I found a bug when calling this function
Date.parseDate('28/07/2008-14:15', "j/n/Y-H:i");

I have added that line after calling the Ext.onReady(...) function.

The result is that the time field is impossible to change. it is always '00:00:00'.

This is my environment
Firefox 3.0.1
Windows Vista Ultimate
ExtJs 2.1

I made the test over the source code of the first post.

Renan Huanca ~o)

jsakalos
28 Jul 2008, 2:41 PM
What it has to do with the extension? Anyway, there were some date bugs in Ext 2.1 - search forums or use latest svn.

mystix
28 Jul 2008, 6:10 PM
Hi jsakalos,

I found a bug when calling this function
Date.parseDate('28/07/2008-14:15', "j/n/Y-H:i");

I have added that line after calling the Ext.onReady(...) function.

The result is that the time field is impossible to change. it is always '00:00:00'.

This is my environment
Firefox 3.0.1
Windows Vista Ultimate
ExtJs 2.1

I made the test over the source code of the first post.

Renan Huanca ~o)
use the override found here:
http://extjs.com/forum/showthread.php?t=33112

rhuanca
28 Jul 2008, 7:15 PM
Thank you very much mystix.

It helped me alot.

DeeZ
29 Jul 2008, 12:14 AM
Hi,

Testing "vtype" to set a valid period with this extension, I wrote this:



Ext.apply(Ext.form.VTypes, {Ext.apply(Ext.form.VTypes, {
xdatetimerange: function(val, field) {

// We need to force the picker to update values to recaluate the disabled dates display
var dispUpd = function(picker) {
var ad = picker.activeDate;
picker.activeDate = null;
picker.update(ad);
};

if (field.startXDateTime && field.endXDateTime) {
// Get info from xDateTime - start
var xdts = Ext.getCmp(field.startXDateTime);
var tfs = xdts.tf;
var dfs = xdts.df;
var ts = tfs.parseDate(tfs.getValue());
var ds = dfs.parseDate(dfs.getValue());

// Get info from xDateTime - end
var xdte = Ext.getCmp(field.endXDateTime);
var tfe = xdte.tf;
var dfe = xdte.df;
var te = tfe.parseDate(tfe.getValue());
var de = dfe.parseDate(dfe.getValue());

// Set min/max date
dfs.maxValue = de;
dfe.minValue = ds;

// update picker menu for xDateTime - start
if(dfs.menu && dfs.menu.picker) {
dfs.menu.picker.maxDate = de;
dispUpd(dfs.menu.picker);
}

// update picker menu for xDateTime - end
if(dfe.menu && dfe.menu.picker) {
dfe.menu.picker.minDate = ds;
dispUpd(dfe.menu.picker);
}

// Check time only if start aend end time are equal
if(Ext.isDate(de) && Ext.isDate(ds)) {
if (de.format('d/m/Y') == ds.format('d/m/Y')) {
tfs.maxValue = te;
tfe.minValue = ts;
} else {
tfs.maxValue = null;
tfe.minValue = null;
}
}

}
return true;
}
});
xDateTime fields must be defined like this:


...{// cannot be null and lesser than "xdatetimeEnd"
xtype: "xdatetime",
id: "xdatetimeStart",
fieldLabel: "xdatetime - start",
fieldClass: "fieldRequired",
dateConfig: {
disableKeyFilter: true,
vtype: "xdatetimerange",
startXDateTime: "xdatetimeStart",
endXDateTime: "xdatetimeEnd",
allowBlank: false
},
timeConfig: {
disableKeyFilter: true,
vtype: "xdatetimerange",
startXDateTime: "xdatetimeStart",
endXDateTime: "xdatetimeEnd",
allowBlank: false
}
},{// cannot be null and greater than "xdatetimeStart"
xtype: "xdatetime",
id: "xdatetimeEnd",
fieldLabel: "xdatetime - end",
fieldClass: "fieldRequired",
dateConfig: {
disableKeyFilter: true,
vtype: "xdatetimerange",
startXDateTime: "xdatetimeStart",
allowBlank: false
},
timeConfig: {
disableKeyFilter: true,
vtype: "xdatetimerange",
startXDateTime: "xdatetimeStart",
allowBlank: false
}
}...
It works for me but I'm sure there is a better a way to do it. :)
Hope this helps.
DeeZ

jsakalos
29 Jul 2008, 12:48 AM
Thank you very much for sharing your knowledge and work. :) :) :)

multiversal
3 Aug 2008, 8:51 AM
I think I found a small bug in the form.DateTime.
When I use 'h:i a' as a timeFormat and [space] as dtSeparator the am/pm part of time will not be parsed in the setValue method, because it also has a [space] in front, so string.split will put it into da[2]. We need to add it back to da[1]. The line is in the code below.


da = val.split(this.dtSeparator);
this.setDate(da[0]);
if(da[1]) {
if(da[2]) { da[1] += da[2]; } //Add am/pm part back to time
this.setTime(da[1]);
}It took me days to figure this one out :(

jsakalos
3 Aug 2008, 12:15 PM
Thank you very much for your effort of debugging.

EzBulka
12 Aug 2008, 2:25 PM
This is a great extension. Thanks for all the hard work. I've been having a devil of a time getting it to work, though. My time field is always rendering on top of the date field like so:

8708

I noticed this produced in Firebug:


<td id="ext-gen341" class="ux-datetime-date" style="padding-right: 4px;">
<div id="ext-gen342" class="x-form-field-wrap" style="width: 0px;">
<input id="fromDT-date" class="x-form-text x-form-field" type="text" autocomplete="off" size="10" style="width: 81px;"/>
Notice that the generated width style for the x-form-field-wrap is 0. I think that's the problem but I don't know why it's getting there.
Here is my JS code that generates the datetimes:


{
xtype:'fieldset',
title:'To',
autoHeight:true,
items:[{
xtype:'xdatetime',
id:'fromDT',
width:160,
dateWidth:75,
timeWidth:75,
value:Date.parseDate(new Date().format('n/j/Y'),'n/j/Y'),
hideLabel:true,
dateFormat:'n/j/Y',
dateConfig:{
allowBlanks:false
},
timeFormat:'g:i:s A',
timeConfig:{allowBlanks:false}
}]},{
xtype:'fieldset',
title:'To',
autoHeight:true,
items:[{
xtype:'xdatetime',
id:'toDT',
width:160,
dateWidth:75,
timeWidth:75,
hideLabel:true,
value:new Date(),
dateFormat:'n/j/Y',
dateConfig:{allowBlanks:false},
timeFormat:'g:i:s A',
timeConfig:{allowBlanks:false}
}]}


Any help would be greatly appreciated.

jsakalos
14 Aug 2008, 9:31 AM
You're most likely rendering into a hidden container (display:none).

EzBulka
14 Aug 2008, 7:20 PM
You're most likely rendering into a hidden container (display:none).

I don't think that's the case. Besides, how can that be? Aren't the date field and time field rendered together in the same container? Why would the datefield be hidden and the time field not? Besides, the CSS shows clearly that it is 0 width that is the problem. When I used Firebug to increase the width, it showed.

jsakalos
15 Aug 2008, 5:16 AM
Please search forums. I've meant rendering into an inactive tab, into a collapsed panel, etc. That is always problem, not only in the case of DateTime field. There are examples at http://examples.extjs.eu on how to deal with that, not for DateTime but for grid and form.

hAmpzter
15 Aug 2008, 6:04 AM
I made som "upgrades" to the xdatetimerange;


Ext.apply(Ext.form.VTypes, {
xdatetimerange: function(val, field) {
//Get the form to be able to search by name
var form = field.formObj.getForm();

// We need to force the picker to update values to recaluate the disabled dates display
var dispUpd = function(picker) {
var ad = picker.activeDate;
picker.activeDate = null;
picker.update(ad);
};

var chkTime = function(sdf, edf, stf, etf) {
if(Ext.isDate(sdf) && Ext.isDate(edf)) {
if (sdf.format('d/m/Y') == edf.format('d/m/Y')) {
stf.maxValue = field.parseDate(etf.getValue());
etf.minValue = field.parseDate(stf.getValue());
} else {
stf.maxValue = null;
etf.minValue = null;
//Clear invalid as the time no longer can crash
stf.clearInvalid();
etf.clearInvalid();
}
}
};

if (field.startXDTName) {
with(form.findField(field.startXDTName)) {
df.maxValue=field.parseDate(field.ownerCt.df.getValue());
if (df.menu && df.menu.picker) {
df.menu.picker.maxDate = df.maxValue;
dispUpd(df.menu.picker);
}
chkTime(df.getValue(),df.maxValue,tf,field.ownerCt.tf);
}
}
else if (field.endXDTName) {
with(form.findField(field.endXDTName)) {
df.minValue=field.parseDate(field.ownerCt.df.getValue());
if (df.menu && df.menu.picker) {
df.menu.picker.minDate = df.minValue;
dispUpd(df.menu.picker);
}
chkTime(df.minValue,df.getValue(),field.ownerCt.tf,tf);
}
}
/* Always return true since we're only using this vtype
* to set the min/max allowed values (these are tested
* for after the vtype test)
*/
return true;
}
});It uses name (and only looks in the present form) instead of id.. I'm not sure if it's neccesary, but I have an application with alot of FormPanels in different tabs..

The xdatetime is registered as this;

{
xtype:'xdatetime'
, fieldLabel:'Start date'
, name:'StartDate'
, dateFormat:'Y-m-d'
, dateConfig:{
allowBlank:false
, vtype:'xdatetimerange'
, endXDTName: 'StopDate'
, formObj: this
}
, timeFormat:'H:i'
, timeConfig:{
allowBlank:false
, vtype:'xdatetimerange'
, endXDTName: 'StopDate'
, formObj: this
}
},{
xtype:'xdatetime'
, fieldLabel:'Stop date'
, name:'StopDate'
, dateFormat:'Y-m-d'
, dateConfig:{
allowBlank:false
, vtype:'xdatetimerange'
, startXDTName:'StartDate'
, formObj: this
}
, timeFormat:'H:i'
, timeConfig:{
allowBlank:false
, vtype:'xdatetimerange'
, startXDTName:'StartDate'
, formObj: this
}
}Though to get it working with out to much problem I had to add some functionality to xdatetime main code (to get ownerCt).


this.df.ownerCt = this;
this.tf.ownerCt = this;
Copy of line 81 to 109, my added code are on 94 and 109:


// create DateField
var dateConfig = Ext.apply({}, {
id:this.id + '-date'
,format:this.dateFormat || Ext.form.DateField.prototype.format
,width:this.timeWidth
,selectOnFocus:this.selectOnFocus
,listeners:{
blur:{scope:this, fn:this.onBlur}
,focus:{scope:this, fn:this.onFocus}
}
}, this.dateConfig);
this.df = new Ext.form.DateField(dateConfig);
delete(this.dateFormat);
this.df.ownerCt = this;

// create TimeField
var timeConfig = Ext.apply({}, {
id:this.id + '-time'
,format:this.timeFormat || Ext.form.TimeField.prototype.format
,width:this.timeWidth
,selectOnFocus:this.selectOnFocus
,listeners:{
blur:{scope:this, fn:this.onBlur}
,focus:{scope:this, fn:this.onFocus}
}
}, this.timeConfig);
this.tf = new Ext.form.TimeField(timeConfig);
delete(this.timeFormat);
this.tf.ownerCt = this;

jsakalos
16 Aug 2008, 6:26 AM
Thank you. I've put your "ownerCt" lines in my code, I'll test it for a while if they won't break anything else and then I'll let you know.

Stripeman
18 Aug 2008, 11:53 PM
Is it possible to get the JS file as an option to DL ? damn copy and pasting removes all the damned tabs.

Thanks much

jsakalos
19 Aug 2008, 12:01 AM
I understand words, except DL, but I have no idea what are you asking. Wrong thread? If not, rephrase your question please.

hAmpzter
19 Aug 2008, 12:35 AM
It translates in my head that he want's to be able to download the file in a normal way and not need to copy and paste from the forum. Because when he copy and paste from the forum all tabs (\t) in the file is converted into spaces!

As a note to Stripeman:
Thought with a good editor it should be capable to automatically translate spaces into tabs.

Stripeman
19 Aug 2008, 2:09 AM
I understand words, except DL, but I have no idea what are you asking. Wrong thread? If not, rephrase your question please.

OOPS.. sorry. No correct thread. hAmpzter is correct.


It translates in my head that he want's to be able to download the file in a normal way and not need to copy and paste from the forum. Because when he copy and paste from the forum all tabs (\t) in the file is converted into spaces!

As a note to Stripeman:
Thought with a good editor it should be capable to automatically translate spaces into tabs.


Thanks hAmpzter. I know, but unfortunatly i cant load diddly on this machine. So im stuck with Notepad and Wordpad (ICK). Anyway.. i thought it wouldnt only benifit me.. but everyone by making it a bit easier to DL..er download.

Thanks much

Terry

jsakalos
19 Aug 2008, 1:37 PM
Hmm, I don't see anything wrong with spaces instead of tabs. If it's problem then:

%s/ /\t/g

- vim syntax but all editors have a substitute (find and replace) function.

henryli86
4 Sep 2008, 7:48 AM
Hi Saki,

I am not sure if this occurred to someone else, the time field does not render properly in my test case:


{
xtype: 'xdatetime',
width: 200,
fieldLabel: 'Receipt Date/Time',
name: 'receiptDate',
value: '2008-09-08 10:00:00'
}

The date shows "09/08/2008" which is correct, but time shows "11:34 AM".
However, if I change hiddenFormat to:'Y-m-d H:i', where seconds is not used, the problem will be gone.

I do not know if this is an issue of my usage, or Date Formatting (ext 2.2), or this component? Please instruct.

Thanks a lot.

Henry

jsakalos
4 Sep 2008, 11:26 AM
Try to set timeFormat. You may also need to tweak altFormats in timeConfig.

akannu
5 Sep 2008, 10:20 AM
I was also thinking about similar design before but it's too wide for grids and I needed DateTime as GridEditor. Now I use timePosition:'below' for grids that further saves precious width in grids.

Hi Saki,
This thread is so long that I apologize if this has been asked. Do you have a screenshot for the how you are showing DateTime as a GridEditor?

jsakalos
5 Sep 2008, 2:28 PM
Here you are.

rhytha
11 Sep 2008, 12:59 AM
Hi,

Kindly see the attached datetimeerror.jpg

This is the code am using

When i click "Add Action" button, i have called AddActionlog() function. It's working fine in FF but IE7 shows an error.



function AddActionlog(dataStore)
{
Ext.onReady(function() {
var comboActionlogcategory = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'content/actionlog/actionlog/actionlog.php?mode=comboActionlogcategory'
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'totalCount',
id: 'actionlog_category_id'
},[
{name: 'actionlog_category_id'},
{name: 'actionlog_category'}
]),
remoteSort: false
});

var comboActionlogstatus = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'content/actionlog/actionlog/actionlog.php?mode=comboActionlogstatus'
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'totalCount',
id: 'actionlog_status'
},[
{name: 'actionlog_status'}
]),
remoteSort: false
});

var actionlog_name = new Ext.form.TextField({
fieldLabel: 'Action Name',
name: 'actionlog_name',
allowBlank:false,
anchor:'80%'
});

var actionlog_category = new Ext.form.ComboBox({
fieldLabel: "Category",
name: "actionlog_category",
hiddenName: 'actionlog_category',
emptyText: 'Velg kategori',
mode: 'remote',
store: comboActionlogcategory,
displayField:'actionlog_category',
valueField: 'actionlog_category_id',
editable: false,
allowBlank:false,
disabled: false,
triggerAction: 'all',
width: 105,
anchor:'80%'
});

var actionlog_status = new Ext.form.ComboBox({
fieldLabel: "Status",
name: "actionlog_status",
hiddenName: 'actionlog_status',
emptyText: 'Velg status',
mode: 'remote',
store: comboActionlogstatus,
displayField:'actionlog_status',
valueField: 'actionlog_status',
editable: false,
allowBlank:false,
disabled: false,
triggerAction: 'all',
width: 105,
anchor:'80%'
});

var actionlog_datetime = new Ext.ux.form.DateTime({
id:'actionlog_datetime',
name:'actionlog_datetime',
fieldLabel:'Date & Time',
anchor:'80%',
timeFormat:'H:i',
timeConfig: {
altFormats:'H:i',
allowBlank:true
},
dateFormat:'d.m.Y',
dateConfig: {
altFormats:'d.m.Y',
allowBlank:true
}
});

var formPanel = new Ext.form.FormPanel({
baseCls: 'x-plain',
labelWidth: 80,
url:'content/actionlog/actionlog/actionlog.php?mode=createActionlog',
defaultType: 'textfield',
items: [
actionlog_name,
actionlog_category,
actionlog_status,
actionlog_datetime
]
});

// define window and show it in desktop
var window = new Ext.Window({
title: 'Add Action',
width: 400,
height:195,
minWidth: 400,
minHeight: 195,
layout: 'fit',
plain:true,
bodyStyle:'padding:5px;',
buttonAlign:'center',
items: formPanel,

buttons: [{
text: 'Lagre',
handler: function() {
// check form value
if (formPanel.form.isValid()) {
formPanel.form.submit({
waitMsg:'Vennligst vent..',
failure: function(form, action) {
Ext.MessageBox.alert('Feil', action.result.errorInfo);
},
success: function(form, action) {
dataStore.load({params:{start:0, limit:50}});
Ext.MessageBox.alert('Melding', action.result.info);
window.close();
}
});
} else{
Ext.MessageBox.alert('Feil', 'Vennligst fiks feil som er markert');
}
}
},{
text: 'Lukk',
handler: function(){window.close();}
}]
});

form = formPanel.getForm();
formPanel.on('render', function(){
var f = form.findField('actionlog_name');
if(f){
f.focus();
}
}, this, {delay: 200});
actionlog_category.setValue("Urgent");
actionlog_status.setValue("Red");
window.show();
});
}


If i replace to this means, IE7 will alert the message.



function AddActionlog(dataStore)
{
alert("test");
}


Any solutions, Any problem in my code

Thanks in advance.

hAmpzter
11 Sep 2008, 4:28 AM
Have you tried running your code through JSLint (http://jslint.com/)?

(Don't forget put "Ext" in predefined)

gfuture
11 Sep 2008, 6:14 AM
Hi,

Kindly see the attached datetimeerror.jpg

This is the code am using

When i click "Add Action" button, i have called AddActionlog() function. It's working fine in FF but IE7 shows an error.



function AddActionlog(dataStore)
{
Ext.onReady(function() {
var comboActionlogcategory = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'content/actionlog/actionlog/actionlog.php?mode=comboActionlogcategory'
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'totalCount',
id: 'actionlog_category_id'
},[
{name: 'actionlog_category_id'},
{name: 'actionlog_category'}
]),
remoteSort: false
});

var comboActionlogstatus = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'content/actionlog/actionlog/actionlog.php?mode=comboActionlogstatus'
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'totalCount',
id: 'actionlog_status'
},[
{name: 'actionlog_status'}
]),
remoteSort: false
});

var actionlog_name = new Ext.form.TextField({
fieldLabel: 'Action Name',
name: 'actionlog_name',
allowBlank:false,
anchor:'80%'
});

var actionlog_category = new Ext.form.ComboBox({
fieldLabel: "Category",
name: "actionlog_category",
hiddenName: 'actionlog_category',
emptyText: 'Velg kategori',
mode: 'remote',
store: comboActionlogcategory,
displayField:'actionlog_category',
valueField: 'actionlog_category_id',
editable: false,
allowBlank:false,
disabled: false,
triggerAction: 'all',
width: 105,
anchor:'80%'
});

var actionlog_status = new Ext.form.ComboBox({
fieldLabel: "Status",
name: "actionlog_status",
hiddenName: 'actionlog_status',
emptyText: 'Velg status',
mode: 'remote',
store: comboActionlogstatus,
displayField:'actionlog_status',
valueField: 'actionlog_status',
editable: false,
allowBlank:false,
disabled: false,
triggerAction: 'all',
width: 105,
anchor:'80%'
});

var actionlog_datetime = new Ext.ux.form.DateTime({
id:'actionlog_datetime',
name:'actionlog_datetime',
fieldLabel:'Date & Time',
anchor:'80%',
timeFormat:'H:i',
timeConfig: {
altFormats:'H:i',
allowBlank:true
},
dateFormat:'d.m.Y',
dateConfig: {
altFormats:'d.m.Y',
allowBlank:true
}
});

var formPanel = new Ext.form.FormPanel({
baseCls: 'x-plain',
labelWidth: 80,
url:'content/actionlog/actionlog/actionlog.php?mode=createActionlog',
defaultType: 'textfield',
items: [
actionlog_name,
actionlog_category,
actionlog_status,
actionlog_datetime
]
});

// define window and show it in desktop
var window = new Ext.Window({
title: 'Add Action',
width: 400,
height:195,
minWidth: 400,
minHeight: 195,
layout: 'fit',
plain:true,
bodyStyle:'padding:5px;',
buttonAlign:'center',
items: formPanel,

buttons: [{
text: 'Lagre',
handler: function() {
// check form value
if (formPanel.form.isValid()) {
formPanel.form.submit({
waitMsg:'Vennligst vent..',
failure: function(form, action) {
Ext.MessageBox.alert('Feil', action.result.errorInfo);
},
success: function(form, action) {
dataStore.load({params:{start:0, limit:50}});
Ext.MessageBox.alert('Melding', action.result.info);
window.close();
}
});
} else{
Ext.MessageBox.alert('Feil', 'Vennligst fiks feil som er markert');
}
}
},{
text: 'Lukk',
handler: function(){window.close();}
}]
});

form = formPanel.getForm();
formPanel.on('render', function(){
var f = form.findField('actionlog_name');
if(f){
f.focus();
}
}, this, {delay: 200});
actionlog_category.setValue("Urgent");
actionlog_status.setValue("Red");
window.show();
});
}
If i replace to this means, IE7 will alert the message.



function AddActionlog(dataStore)
{
alert("test");
}
Any solutions, Any problem in my code

Thanks in advance.


I got the same error message in IE. The error occured in the function setSize. I used a dirty hack for this by skipping this function in IE for now:

if(!w) {
return;
}To:

if(!w || Ext.isIE) {
return;
}

danh2000
22 Sep 2008, 7:13 PM
Nice component.

I found this to be useful when used in a GridEditor:


if(this.wrap.findParent('div.x-grid3-viewport')){
this.wrap.addClass('x-grid3-row-selected').setStyle('border','none');
}

This prevents the contents of the grid from showing up behind and in between the date and time fields.

Thanks,

Remy
23 Sep 2008, 1:45 AM
I'm having a strange problem when selecting the dateTime field for editing in a grid.

The grid is populated from a mySQL db with the standard mySQL date format
Y-m-d H:i:s

I have localised the date format to d/m/y and set the timeFormat to H:i

When I click to edit the field, the date is pre-populated with the existing DB date value ok but the timeValue is always being set to the current time.

It seems that the setValue function when checking the existing dateTime value fails to recognise the Time as valid.

I have placed a couple of alerts in the code to show what value it is dealing with:

val = val ? val : new Date(1970, 0 ,1, 0, 0, 0);
var da, time;
alert(val);
if(!val instanceof Date) {
this.setDate(val);
this.setTime(val);
this.dateValue = new Date(val);
}
else {
da = val.split(this.dtSeparator);
this.setDate(da[0]);
if(da[1]) {
if(da[2]) {
// add am/pm part back to time
da[1] += da[2];
}
this.setTime(da[1]);
alert(da[1]);
}
}
this.updateValue();The first Alert produces "8/9/2008 10:37:00 AM" which seems like a valid date to me but this fails 'if(!val instanceof Date)'

It then runs through the else section and alerts "10:37:00AM" (no space between time and AM). This doesn't look valid to me? Even if I format the time to a hard-coded valid time at this point the control still sets the value to the current time?

I hope I've been clear enough but I think there's something wrong with the time formats somewhere. My fields are initialised here:

store: dstore2,
columns: [
{id:'fx_fixtureid', header: "Fixture", width: 50, sortable: true, dataIndex: 'fx_fixtureid'},
{id: 'fx_date', header: "Date", width: 220, sortable: true, renderer:Ext.util.Format.dateRenderer('d/m/Y H:i'), dataIndex: 'fx_date',editor: new Ext.ux.form.DateTime({allowBlank: false, timeFormat:'H:i'})}, {id: 'fx_hometeam', header: "Home Team", width: 150, sortable: true, dataIndex: 'fx_hometeam',editor: new Ext.form.TextField({allowBlank: false})},
{id: 'fx_homescore', header: "Home Score", width: 75, sortable: true, dataIndex: 'fx_homescore',editor: new Ext.form.NumberField({allowBlank: false})},
{id: 'fx_awayscore', header: "Away Score", width: 75, sortable: true, dataIndex: 'fx_awayscore',editor: new Ext.form.NumberField({allowBlank: false})},
{id: 'fx_awayteam', header: "Away Team", width: 150, sortable: true, dataIndex: 'fx_awayteam',editor: new Ext.form.TextField({allowBlank: false})}
] Any assistance is gratefully accepted.

Remy

jsakalos
23 Sep 2008, 6:14 AM
You may need to set altFormats. BTW, mySQL date doesn't contain AM.

Remy
23 Sep 2008, 6:43 AM
Yeah, you're right about the mySQL date format, not sure what format it would require to support this?

The dates are in standard mySQL format, my field is rendered to 'd/m/Y H:i' the editorConfig sets the format of the date fine but doesn't seem to recognise the time as valid?

jsakalos
23 Sep 2008, 9:42 AM
Here are formats: http://extjs.com/deploy/dev/docs/?class=Date. Have you tried altFormats?

Remy
24 Sep 2008, 12:06 AM
Yeah, tried altFormats, doesn't seem to matter which format is applied, the time is changed to the current time upon editing.

jsakalos
24 Sep 2008, 12:25 AM
Try please to set otherToNow:false config option of DateTime field.

Remy
24 Sep 2008, 12:30 AM
Setting that config option sets the time to '00:00'?

jsakalos
24 Sep 2008, 12:35 AM
This all sounds very strange. If it would be a bug in DateTime, my users would already find it - I use DateTime in a lot of grids and I have at least 1000 users. BTW, which version of Ext? There were some date problems in 2.0x. Upgrade to 2.2 if applicable.

Remy
24 Sep 2008, 2:26 AM
hmmm, checking my JSON data and the dates appear to be getting returned in the format "8/16/2008 3:00:00 PM"

I will try reformatting my JSON data and seeing where that takes me..

Remy
24 Sep 2008, 2:27 AM
This all sounds very strange. If it would be a bug in DateTime, my users would already find it - I use DateTime in a lot of grids and I have at least 1000 users. BTW, which version of Ext? There were some date problems in 2.0x. Upgrade to 2.2 if applicable.

V2.2 in use. I'm sure there's nothing wrong with the component, it seems well established, just the usual Remy ineptitude at work!

Remy
24 Sep 2008, 2:30 AM
I have hard coded "15:00:00" into the JSON and set the altFormat accordingly and it brings up the date and time ok, seems its a JSON issue after all. I will work on that, really sorry to have bothered you with this.

Remy
24 Sep 2008, 2:48 AM
Got it by reformatting the JSON, in its original format the altFormat
"g:i:s A" should have worked but didn't?

jsakalos
24 Sep 2008, 5:18 AM
Now it works, right?

Remy
24 Sep 2008, 5:28 AM
Got it to work by reformatting my JSON data to "d/m/Y g:i" and setting the altFormat accordingly. The original time format of "g:s:i A" would not work, admittedly it was a strange format for the time to be in but I would still have expected the altFormat to cope.

danh2000
24 Sep 2008, 4:09 PM
When using this in an EditorGrid, it seems that the first click to the TimeField trigger stops the editing mode.

Steps to reproduce:

1. Double Click a cell to start editing.
2. Click the TimeField trigger straight away.
3. Editing has been cancelled.

I'll take a look later to see if I can fix this and will post back if I find the solution.

jsakalos
24 Sep 2008, 11:22 PM
I use it mainly in grids as editor and it doesn't stop editing on time trigger click. Which version do you use? (First post of this thread always contains latest code). If still in trouble, post please a showcase that I can run/debug locally.

Remy
25 Sep 2008, 12:07 AM
danh2000, not sure if its the same issue i had, I didn't set the container big enough to comfortably contain the edit controls and the effect was similar to your symptoms, the field was a bit small to render in its container. Don't know if you have this problem but worth looking at.

tubinee
27 Sep 2008, 8:31 PM
Dear friend, it is awesome and I have used it. But there seems to be some problem to use in the tbar of grid panel.

Code:


tbar:[
'Race: ', ' ',
new Ext.form.ComboBox({
store: datastore,
//store: store,
displayField:'title',
valueField:'value',
id:"race",
typeAhead: true,
mode: 'local',
triggerAction: 'all',
//allowBlank:true,
emptyText:'Select one type...',
selectOnFocus:true,
listeners:{
select:function(combo, record, idx)
{
Ext.getCmp("soldiers").store.load({params:{racekey:Ext.getCmp("race").getValue()},waitMsg: 'load....'});
}
}
}),'-',{
xtype:'xdatetime',
id: 'startdatetime',
name: 'startdatetime'
}]

Please give me help. Thanks.

jsakalos
27 Sep 2008, 10:23 PM
Post please your code - I've tested it in bbar and it works for me.

tubinee
28 Sep 2008, 2:15 AM
Dear friend, attached the source code. And the source code is base on the sample code of desktop in extjs release. I just include the datetime.js into the html and add the xdatetime field into the tbar. I test it in firefox(3.0.3) with firebug(1.2.1). The page an display, But the console will prompt javascript error.

the javascript error is below:

elp is null
http//localhost/sample/js/datetime.js
Line 171

this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});


Please give me help. Thanks





/*
* Ext JS Library 2.1
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

// Sample desktop configuration
MyDesktop = new Ext.app.App({
init :function(){
Ext.QuickTips.init();
//Ext.form.Field.prototype.msgTarget = "side";
},

getModules : function(){
return [
new MyDesktop.GridWindow()
/**
new MyDesktop.GridWindow(),
new MyDesktop.TabWindow(),
new MyDesktop.AccordionWindow(),
new MyDesktop.BogusMenuModule(),
new MyDesktop.BogusModule(),
new MyDesktop.SettingWindow()
**/
];
},

// config for the start menu
getStartConfig : function(){
return {
title: 'Travian toolkit',
iconCls: 'user',
toolItems: [{
text:'setting',
iconCls:'settings',
scope:this,
handler : function(){Ext.Msg.alert('setting', 'setting......');}
},'-',{
text:'about',
iconCls:'logout',
scope:this,
handler : function(){

}
}]
};
}
});



MyDesktop.GridWindow = Ext.extend(Ext.app.Module, {
id:'grid-win',
init : function(){
this.launcher = {
text: 'Grid Window',
iconCls:'icon-grid',
handler : this.createWindow,
scope: this
}
},

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-win');
if(!win){
win = desktop.createWindow({
id: 'grid-win',
title:'Grid Window',
width:740,
height:480,
iconCls: 'icon-grid',
shim:false,
animCollapse:false,
constrainHeader:true,

layout: 'fit',
items:
new Ext.grid.GridPanel({
border:false,
ds: new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'}
]),
data: Ext.grid.dummyData
}),
cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 70, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'}
]),

viewConfig: {
forceFit:true
},
//autoExpandColumn:'company',

tbar:[{
text:'Add Something',
tooltip:'Add a new row',
iconCls:'add'
}, '-', {
text:'Options',
tooltip:'Blah blah blah blaht',
iconCls:'option'
},'-',{
text:'Remove Something',
tooltip:'Remove the selected item',
iconCls:'remove'
},{
xtype:'xdatetime'
,id:'dtf'
,fieldLabel:'Date & Time'
// ,width:360
,anchor:'-18'
,timeFormat:'H:i:s'
,timeConfig: {
altFormats:'H:i:s'
,allowBlank:true
}
,dateFormat:'d.n.Y'
,dateConfig: {
altFormats:'Y-m-d|Y-n-d'
,allowBlank:true
}
}]
})
});
}
win.show();
}
});

// Array data for the grid
Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
];

jsakalos
28 Sep 2008, 9:45 AM
I've put your code into onReady and it doesn't work - some includes are missing. Post please a self contained workable sample.

jsakalos
28 Sep 2008, 9:50 AM
Is there any reason why you create grid with new keyword but not as xtype? That could be the root of the problem

tubinee
28 Sep 2008, 8:52 PM
No reason. It is just the desktop sample in Ext release. And I have change the code to create the gird with 'xtype'. The problem is still here.

jsakalos
28 Sep 2008, 9:34 PM
Strip your code down to contain only grid with datetime showing the problem and post it so I can run and debug it locally.

shiv
29 Sep 2008, 2:33 PM
I can't get the DateTime field to work in an editor grid. The same fields work fine in a "add record" form. Here's some sample code:



// column model....

var myColumnModel = new Ext.grid.ColumnModel([
{header: 'Name', dataIndex: 'guestName', id: 'guestName', width: 100, hideable: false, editor: new Ext.form.TextField( {allowBlank: false, maxLength: 60} )},
{header: 'Email', dataIndex: 'emailAddress', id: 'emailAddress', width: 100, sortable: false, hidden: true, editor: new Ext.form.TextField( {maxLength: 60} )},
{header: 'Arr time', dataIndex: 'arrTime', width: 75, renderer: formatShortDateTime, editor: new Ext.ux.form.DateTime( {xtype: 'xdatetime', id: 'arrTime', anchor: '-18', timeFormat: 'g:i a', dateFormat: 'n/j/y'} )},
{header: 'Arr airport', dataIndex: 'arrAirport', width: 75, hidden: true, editor: new Ext.form.TextField( {maxLength: 10} )},
{header: 'Arr flight', dataIndex: 'arrFlight', width: 75, hidden: true, editor: new Ext.form.TextField( {maxLength: 20} )},
{header: 'Dep time', dataIndex: 'depTime', width: 75, renderer: formatShortDateTime, editor: new Ext.ux.form.DateTime( {xtype: 'xdatetime', id: 'depTime', anchor: '-18', timeFormat: 'g:i a', dateFormat: 'n/j/y'} )},
{header: 'Dep airport', dataIndex: 'depAirport', width: 75, hidden: true, editor: new Ext.form.TextField( {maxLength: 10} )},
{header: 'Dep flight', dataIndex: 'depFlight', width: 75, hidden: true, editor: new Ext.form.TextField( {maxLength: 20} )},
{header: 'Notes', dataIndex: 'notes', id: 'notes', width: 100, sortable: false, editor: new Ext.form.TextField( {maxLength: 255} )}
]);

// etc...

// New Record form:

var newArrTime = new Ext.ux.form.DateTime( {xtype: 'xdatetime', id: 'arrTime', fieldLabel: 'Arrival time', timePosition: 'right', width: 100, timeWidth: 100, anchor: '-18', timeFormat: 'g:i a', dateFormat: 'n/j/y'} );
var newDepTime = new Ext.ux.form.DateTime( {xtype: 'xdatetime', id: 'depTime', fieldLabel: 'Departure time', timePosition: 'right', width: 100, timeWidth: 100, anchor: '-18', timeFormat: 'g:i a', dateFormat: 'n/j/y'} );

When I double-click the date/time fields in the EditorGridPanel (I have clicksToEdit = 2), nothing happens. What am I missing?

shiv
29 Sep 2008, 3:04 PM
oh yeah, forgot to include the Grid code:



myGrid = new Ext.grid.EditorGridPanel({
title: 'Guests (general)',
store: mainDataStore, colModel: myColumnModel,
enableColumnHide: true, enableColumnMove: true, clicksToEdit: 2,
autoWidth: true, autoHeight: true,
plain: true, layout: 'fit', closable: false, renderTo: 'gridArea',
viewConfig: {forceFit: true}, plugins: [ RowExpander ],
selModel: new Ext.grid.RowSelectionModel( {singleSelect: false} ),
autoExpandColumn: 'guestName',
autoExpandColumn: 'emailAddress',
autoExpandColumn: 'notes',
tbar: [
{text: 'Add new guest', iconCls: 'addButton', handler: displayFormWindow},
{text: 'Delete selected', iconCls: 'deleteButton', handler: confirmDelete},
{text: 'Email selected', iconCls: 'emailButton', handler: displayMailWindow},
{text: 'Search name', iconCls:'searchButton', handler: startSearch},
'-',
{text: 'Help', iconCls: 'helpButton', handler: showHelp}
],
bbar: []
});
myGrid.on( 'afteredit', saveTheGuest );

jsakalos
29 Sep 2008, 10:54 PM
Take a look at this example: http://recordform.extjs.eu/

shiv
30 Sep 2008, 5:44 AM
So there's no way to use this in a grid without using RecordForm? That's too bad.

Remy
30 Sep 2008, 5:53 AM
So there's no way to use this in a grid without using RecordForm? That's too bad.The extension can be used (as is used by many) within a grid.

shiv
30 Sep 2008, 6:13 AM
OK, but I don't understand Saki's example -- it looks totally different from my code. I can't just copy his code; my data is different and I've got lots of functions that are dependent on my column model, grid, etc

I'd like to be able to use DateTime in an editor grid. I posted my code and everything else works great, including the DateTime fields in a regular form. If I'm missing something, could someone please point it out?

Thanks

jsakalos
30 Sep 2008, 10:30 AM
I've pointed you to the recordform example only to show you that DateTime has no problems in EditorGrid and to show you how the ColumnModel is configured. If you have a problem it must be in your code.

BTW, If you think that you can copy someone's code without understanding it and your application would work, you're not going to code anything decent. First must come understanding then you will know what to copy, if anything, and what the fragment you've copied does. Understand first! is the only way to any coding success.

shiv
30 Sep 2008, 6:07 PM
I just said I can't copy your code, not that I'd want to anyway, but it's written and structured differently from mine, which I do understand. Clearly I am doing something wrong, yeah there's a problem in my code, but I've looked at it for hours and I still can't see what it is. That's why I posted the code (like the experts in this forum always say to do!), to see if anyone more experienced than myself could help me spot the problem.

Ext is generally working great for me and the application I'm building, but sometimes it's difficult to spot a mistake, especially when firebug gives no errors.

Frankly this attitude of condescension to less-experienced users is disappointing to me, yet it seems pervasive on these forums. I might not understand this as thoroughly as experts like you, Mr Sakalos, but that doesn't mean I don't know anything at all. Yeah I'm pretty new to AJAX & Ext, but I've got 90% of a "big app" built & it works great, except this one little bit. I don't need to be shown that DateTime works in a grid for everyone else, I already knew that! I want to know why it isn't working for me. But this forum seems to be more about telling people how stupid they are than actually helping, so I'll just piss off and spend another 8 hours and figure it out myself, or find an answer elsewhere.

jsakalos
30 Sep 2008, 11:44 PM
Sorry, I didn't mean to offend you. Post please a complete showcase that I can run/debug locally - I'll take a look. Code fragments are good if an error is obvious but best and fastest way to help is take user's code, copy it locally, run and debug.

shiv
1 Oct 2008, 8:00 AM
Thank you and sorry to get angry but it can be very frustrating to find a bug.

Here's something interesting about my problem. I tried viewing the same grid in Firefox 3 and it works perfectly! (I was developing on my home computer, which i have not yet upgraded to FF3.) Your RecordForm example works fine on both FF2 and FF3.

As I mentioned before, the DateTime field also works fine (FF3, FF2) in a form. There must be something about my implementation of the EditorGrid that is causing this. I'll dig a little more into that & then post some code if I still don't get it.

jsakalos
1 Oct 2008, 8:16 AM
No problem ;)

If it behaves differently on different systems, cannot it be a stale cache or different Ext version?

shiv
1 Oct 2008, 8:21 AM
Could be a cache thing, and I'll check that, thanks for the suggestion. However, I also checked my grid on a mac with firefox 2, and it doesn't work there, either.

Regarding different Ext versions, I've used only 2.2 for development, and my pages are getting it from a single location on a live server -- not running locally so that should not be an issue.

jsakalos
1 Oct 2008, 9:00 AM
I cannot check FF@Mac, I have no Mac around :(

BTW, does my example, posted a couple of posts back, work on that Mac? If yes, you could find out what is the difference between your and example's code.

shiv
1 Oct 2008, 9:13 AM
yes, your example does work in FF2/Mac. That's why I think my problem is caused by the way i'm implementing the EditorGrid (because the DateTime field does work for me when it's part of a Form). I'm creating the EditorGrid like so:



myGrid = new Ext.grid.EditorGridPanel({
title: 'Guests (general)',
store: mainDataStore, colModel: myColumnModel,
enableColumnHide: true, enableColumnMove: true, clicksToEdit: 2,
autoWidth: true, autoHeight: true,
plain: true, layout: 'fit', closable: false, renderTo: 'gridArea',
viewConfig: {forceFit: true}, plugins: [ RowExpander ],
selModel: new Ext.grid.RowSelectionModel( {singleSelect: false} ),
autoExpandColumn: 'guestName',
tbar: [
{text: 'Add new guest', iconCls: 'addButton', handler: displayFormWindow},
{text: 'Delete selected', iconCls: 'deleteButton', handler: confirmDelete}
],
bbar: []
});
myGrid.on( 'afteredit', saveTheGuest );


the column model is defined like so (before defining the grid):



var myColumnModel = new Ext.grid.ColumnModel([
RowExpander,
{header: 'Name', dataIndex: 'guestName', id: 'guestName', width: 100, hideable: false, editor: new Ext.form.TextField( {allowBlank: false, maxLength: 60} )},
{header: 'Email', dataIndex: 'emailAddress', id: 'emailAddress', width: 100, sortable: false, hidden: true, editor: new Ext.form.TextField( {maxLength: 60} )},
{header: 'Arr time', dataIndex: 'arrTime', width: 75, renderer: formatShortDateTime, editor: new Ext.ux.form.DateTime( {id: 'arrTime', timeWidth: 75} )},
{header: 'Arr airport', dataIndex: 'arrAirport', width: 75, hidden: true, editor: new Ext.form.TextField( {maxLength: 10} )},
{header: 'Dep time', dataIndex: 'depTime', width: 75, renderer: formatShortDateTime, editor: new Ext.ux.form.DateTime( {id: 'depTime', timeWidth: 75} )},
{header: 'Dep airport', dataIndex: 'depAirport', width: 75, hidden: true, editor: new Ext.form.TextField( {maxLength: 10} )},
{header: 'Notes', dataIndex: 'notes', id: 'notes', width: 100, sortable: false, editor: new Ext.form.TextArea( {grow: true, maxLength: 255} )}
]);
myColumnModel.defaultSortable = true;


the reason I'm splitting these up is that I have several separate but similar pages that show different "guest" columns by default. It's easier for me to reuse the grid code and simply modify the columnModel for different "views".

Worst-case scenario is that I require all my users to upgrade to Firefox 3! If I can't figure this out, that's what happens.

jsakalos
1 Oct 2008, 10:17 AM
autoWidth and autoHeight are mutually exclusive with layout:'fit' - they are ignored at best. I do not see any other obvious mistake.

seethrubob
3 Nov 2008, 1:12 PM
I think we found a bug in the widget that will only occur a few times a year.

The updateDate function calls initDateValue which sets the dateValue to the current date and time. The function then overwrites the year, month and date with the values supplied from the date field.


if(!(this.dateValue instanceof Date)) {
this.initDateValue();
if(!this.tf.getValue()) {
this.setTime(this.dateValue);
}
}
this.dateValue.setMonth(0); // because of leap years
this.dateValue.setFullYear(d.getFullYear());
this.dateValue.setMonth(d.getMonth());
this.dateValue.setDate(d.getDate());

What happened was the current date/time was 10/31/2008 12:00:00 and we selected an early September date from the calendar. The setFullYear worked fine. The date selected in the widget was in September, since September doesn't have 31 days when setMonth was called the dateValue ended up being set to 10/01/2008 ie. the 31st day of September. Then the setDate worked as expected. So the end result was the internal dateValue was a month ahead of what we selected, although the date we selected displayed properly in the date field.

I can see numerous ways to fix this but went with changing:


this.dateValue.setMonth(d.getMonth());
this.dateValue.setDate(d.getDate());

to:


this.dateValue.setMonth(d.getMonth(), d.getDate());

jsakalos
4 Nov 2008, 1:07 AM
Thank you for finding the bug and providing the patch.

dekely
5 Nov 2008, 1:17 AM
Hi,

When I use this component in a grid, all I see is a time dropdown.
where is the calendar?

thanks in advance,



var actionlog_datetime = new Ext.ux.form.DateTime({ id:'actionlog_datetime', name:'actionlog_datetime', fieldLabel:'Date & Time', timeFormat:'H:i', timeConfig: { altFormats:'H:i', allowBlank:true }, dateFormat:'d.m.Y',dateConfig: { altFormats:'d.m.Y', allowBlank:true } });


{
header: 'Arr time', dataIndex: 'arrTime', editor: actionlog_datetime
}

jsakalos
5 Nov 2008, 4:47 PM
Try to set timePosition:'below' or widen the column

dekely
8 Nov 2008, 10:56 PM
Solved!
It was a layout issue

thanks

dekely
8 Nov 2008, 11:16 PM
Hi,

How do I limit a maximum and a minimum date+time ?

thanks

dekely
9 Nov 2008, 12:10 AM
dueDateEditor.df.maxValue = new Date();
dueDateEditor.df.minValue = new Date();

dekely
9 Nov 2008, 12:43 AM
Hi,

The validation is done for each field individually and not to the whole value
My schenario:
I need to limit the component to a future date
If the date is tomorrow (which is ok) but the time is earlier today than the time field is invalid.

Is it possible to perform validation to the whole value ? (date+time)

thanks in advance

jsakalos
9 Nov 2008, 2:52 AM
Sure it is. Just implement the logic you need.

dekely
9 Nov 2008, 3:47 AM
Can you please give me a hand? this component looks good in my grid.
I don't want to allow past date but even when the date is tomorrow, if the time is lower
then the time now, it is no valid...






dueDateEditor = new Ext.ux.form.DateTime({
fieldLabel: getLocalizationValue('application.javascript.taskManager.column.dueDate'),
dateFormat: 'm-d-Y',
dateConfig: {allowBlank: false},
timeConfig: {allowBlank: false,increment: 30},
timeFormat: 'H:i',
dateWidth:100,
timeWidth:60,
id: 'displayDateFrom',
//name: 'displayDateFrom',
});
//do not allow to select old date

dueDateEditor.df.minValue =

new Date();
dueDateEditor.tf.minValue = new Date();

jsakalos
9 Nov 2008, 10:33 AM
You're on the right track, you just need to set correct min/maxValues for both underlying fields according to the logic you need.

dekely
9 Nov 2008, 11:45 PM
But the problem is that in my logic, Time is depend on Date


dueDateEditorField.df.minValue = new Date().clearTime();
dueDateEditorField.tf.minValue = new Date();

If you change the date for tomorrow, that you should be able to select any time but in fact, it is not valid if you select a time that is lower than now.

jsakalos
10 Nov 2008, 12:19 AM
Then you need some coding. Listen to change event on DateField, calculate your time limit and set it to TimeField.

dekely
10 Nov 2008, 1:02 AM
Ok, thanks for your help

michaelc
23 Nov 2008, 3:52 PM
I got it to work fine as a standalone, but when I add it into the general page, it gets compressed to non functional.

I have played for a while, but I don't see my error.
The image on the left is from my border layout, on the right a generic html page.


win = desktop.createWindow({
height : winHeight,
width : winWidth,
title : 'Data repository explorer ',
autoScroll : true,
constrainHeader : true,

layout : "border",
items : [{
region : "center",
title : "File content view",
layout : "card",
id : "cards",
defaults : {
// applied to each contained panel
border : false
},
layoutConfig : {
deferredRender : false
},

items : [{
border : false,
id : 'centerImage',
html : '<div id="centerImageLoad" />'
},

genericGrid]

}, {
region : "west",
title : "File hierarchy",
width : 250,
split : true,
collapsible : true,
titleCollapse : true,
items : [{
width : 320,
labelWidth : 75, // label settings here cascade
id : 'filterPanel',
hidden : true,
title : 'Filter options',
// bodyStyle : 'padding:5px 5px 0',
height : 300,
layout : 'fit',
border : false,
closable : false,
defaults : {
width : 80
},
defaultType : 'textfield',
items : [{
xtype : 'form',
frame : true,
labelWidth : 100,
id : 'form',
items : [{
boxLabel : 'Save filter on apply',
hideLabel : true,
name : 'saveFilter',
xtype : 'checkbox'
}, {
xtype : 'xdatetime',
id : 'dtf',
fieldLabel : 'Date & Time',
width : 170
// ,anchor:'-1'
,
timeFormat : 'H:i:s',
timeConfig : {
altFormats : 'H:i:s',
allowBlank : true
},
dateFormat : 'd.n.Y',
dateConfig : {
altFormats : 'Y-m-d|Y-n-d',
allowBlank : true
}
}, {
fieldLabel : 'End date',
name : 'last',
xtype : 'datefield'
}, {
fieldLabel : 'Tool',
xtype : 'toolselect'
}, {
fieldLabel : 'Requestor',
xtype : 'userselect'
}]
}],
tbar : [{
text : 'Apply',
tooltip : 'Apply filter options',
iconCls : 'demo-grid-add'

}, {
text : 'Clear',
tooltip : 'Clear the filter critera',
iconCls : 'demo-grid-add'

}]
}, {
xtype : 'filetreeviewer',
listeners : {
click : function(node) {
if (node.leaf) {
var imageScreen = Ext
.get("centerImageLoad")
if (node.attributes.sourceImg == null) {
store.baseParams.fileName = node.attributes.fileName;
store.load({
params : {
start : 0,
limit : 30
}
});

Ext.getCmp('cards').layout
.setActiveItem('genericGrid');

} else {
imageScreen.dom.innerHTML = "<img src='"
+ node.attributes.sourceImg
+ "' />"
Ext.getCmp('cards').layout
.setActiveItem('centerImage');
}
} else {
var imageScreen = Ext
.get("centerImageLoad")
}
scope : this
}
}
}],
tbar : new Ext.Toolbar({
items : [filterToolbarButton = new Ext.Toolbar.Button({
id : 'westfilter',
text : 'Filter',
tooltip : 'Show or Hide filter rules',
iconCls : 'filterEmpty',
listeners : {
click : function(c) {
if (filterShow == "Hidden") {
Ext.getCmp('filterPanel').show();
filterShow = "Show"
} else {
Ext.getCmp('filterPanel').hide();
filterShow = "Hidden"
}

},
scope : this
}
})]
})
}]

});

michaelc
23 Nov 2008, 4:24 PM
here is a standalone version that has the issue.
click on the word filter to display the form.

I did find that setting time below does work, but now really what I wanted with out a label on it.


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

// vim: ts=4:sw=4:nu:fdc=4:nospell
/**
* Ext.ux.form.DateTime Extension Class for Ext 2.x Library
*
* @author Ing. Jozef Sakalos
* @copyright (c) 2008, Ing. Jozef Sakalos
* @version $Id: Ext.ux.form.DateTime.js 311 2008-08-16 21:23:05Z jozo $
*
* @license Ext.ux.form.DateTime 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.DateTime
* @extends Ext.form.Field
*/
Ext.ux.form.DateTime = Ext.extend(Ext.form.Field, {
/**
* @cfg {String/Object} defaultAutoCreate DomHelper element spec
* Let superclass to create hidden field instead of textbox. Hidden will be submittend to server
*/
defaultAutoCreate:{tag:'input', type:'hidden'}
/**
* @cfg {Number} timeWidth Width of time field in pixels (defaults to 100)
*/
,timeWidth:80
/**
* @cfg {String} dtSeparator Date - Time separator. Used to split date and time (defaults to ' ' (space))
*/
,dtSeparator:' '
/**
* @cfg {String} hiddenFormat Format of datetime used to store value in hidden field
* and submitted to server (defaults to 'Y-m-d H:i:s' that is mysql format)
*/
,hiddenFormat:'Y-m-d H:i:s'
/**
* @cfg {Boolean} otherToNow Set other field to now() if not explicly filled in (defaults to true)
*/
,otherToNow:true
/**
* @cfg {Boolean} emptyToNow Set field value to now on attempt to set empty value.
* If it is true then setValue() sets value of field to current date and time (defaults to false)
*/
/**
* @cfg {String} timePosition Where the time field should be rendered. 'right' is suitable for forms
* and 'below' is suitable if the field is used as the grid editor (defaults to 'right')
*/
,timePosition:'right' // valid values:'below', 'right'
/**
* @cfg {String} dateFormat Format of DateField. Can be localized. (defaults to 'm/y/d')
*/
,dateFormat:'m/d/y'
/**
* @cfg {String} timeFormat Format of TimeField. Can be localized. (defaults to 'g:i A')
*/
,timeFormat:'g:i A'
/**
* @cfg {Object} dateConfig Config for DateField constructor.
*/
/**
* @cfg {Object} timeConfig Config for TimeField constructor.
*/

// {{{
/**
* private
* creates DateField and TimeField and installs the necessary event handlers
*/
,initComponent:function() {
// call parent initComponent
Ext.ux.form.DateTime.superclass.initComponent.call(this);

// create DateField
var dateConfig = Ext.apply({}, {
id:this.id + '-date'
,format:this.dateFormat || Ext.form.DateField.prototype.format
,width:this.timeWidth
,selectOnFocus:this.selectOnFocus
,listeners:{
blur:{scope:this, fn:this.onBlur}
,focus:{scope:this, fn:this.onFocus}
}
}, this.dateConfig);
this.df = new Ext.form.DateField(dateConfig);
this.df.ownerCt = this;
delete(this.dateFormat);


// create TimeField
var timeConfig = Ext.apply({}, {
id:this.id + '-time'
,format:this.timeFormat || Ext.form.TimeField.prototype.format
,width:this.timeWidth
,selectOnFocus:this.selectOnFocus
,listeners:{
blur:{scope:this, fn:this.onBlur}
,focus:{scope:this, fn:this.onFocus}
}
}, this.timeConfig);
this.tf = new Ext.form.TimeField(timeConfig);
this.tf.ownerCt = this;
delete(this.timeFormat);

// relay events
this.relayEvents(this.df, ['focus', 'specialkey', 'invalid', 'valid']);
this.relayEvents(this.tf, ['focus', 'specialkey', 'invalid', 'valid']);

} // eo function initComponent
// }}}
// {{{
/**
* private
* Renders underlying DateField and TimeField and provides a workaround for side error icon bug
*/
,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);

// render DateField and TimeField
// create bounding table
var t;
if('below' === this.timePosition || 'bellow' === this.timePosition) {
t = Ext.DomHelper.append(ct, {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(ct, {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 = t.wrap();
this.wrap.on("mousedown", this.onMouseDown, this, {delay:10});

// render DateField & TimeField
this.df.render(t.child('td.ux-datetime-date'));
this.tf.render(t.child('td.ux-datetime-time'));

// workaround for IE trigger misalignment bug
if(Ext.isIE && Ext.isStrict) {
t.select('input').applyStyles({top:0});
}

this.on('specialkey', this.onSpecialKey, this);
this.df.el.swallowEvent(['keydown', 'keypress']);
this.tf.el.swallowEvent(['keydown', 'keypress']);

// create icon for side invalid errorIcon
if('side' === this.msgTarget) {
var elp = this.el.findParent('.x-form-element', 10, true);
this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});

this.df.errorIcon = this.errorIcon;
this.tf.errorIcon = this.errorIcon;
}

// setup name for submit
this.el.dom.name = this.hiddenName || this.name || this.id;

// prevent helper fields from being submitted
this.df.el.dom.removeAttribute("name");
this.tf.el.dom.removeAttribute("name");

// we're rendered flag
this.isRendered = true;

// update hidden field
this.updateHidden();

} // eo function onRender
// }}}
// {{{
/**
* private
*/
,adjustSize:Ext.BoxComponent.prototype.adjustSize
// }}}
// {{{
/**
* private
*/
,alignErrorIcon:function() {
this.errorIcon.alignTo(this.tableEl, 'tl-tr', [2, 0]);
}
// }}}
// {{{
/**
* private initializes internal dateValue
*/
,initDateValue:function() {
this.dateValue = this.otherToNow ? new Date() : new Date(1970, 0, 1, 0, 0, 0);
}
// }}}
// {{{
/**
* Calls clearInvalid on the DateField and TimeField
*/
,clearInvalid:function(){
this.df.clearInvalid();
this.tf.clearInvalid();
} // eo function clearInvalid
// }}}

/**
* @private
* called from Component::destroy.
* Destroys all elements and removes all listeners we've created.
*/
,beforeDestroy:function() {
if(this.isRendered) {
// this.removeAllListeners();
this.wrap.removeAllListeners();
this.wrap.remove();
this.tableEl.remove();
this.df.destroy();
this.tf.destroy();
}
} // eo function beforeDestroy

// {{{
/**
* Disable this component.
* @return {Ext.Component} this
*/
,disable:function() {
if(this.isRendered) {
this.df.disabled = this.disabled;
this.df.onDisable();
this.tf.onDisable();
}
this.disabled = true;
this.df.disabled = true;
this.tf.disabled = true;
this.fireEvent("disable", this);
return this;
} // eo function disable
// }}}
// {{{
/**
* Enable this component.
* @return {Ext.Component} this
*/
,enable:function() {
if(this.rendered){
this.df.onEnable();
this.tf.onEnable();
}
this.disabled = false;
this.df.disabled = false;
this.tf.disabled = false;
this.fireEvent("enable", this);
return this;
} // eo function enable
// }}}
// {{{
/**
* private Focus date filed
*/
,focus:function() {
this.df.focus();
} // eo function focus
// }}}
// {{{
/**
* private
*/
,getPositionEl:function() {
return this.wrap;
}
// }}}
// {{{
/**
* private
*/
,getResizeEl:function() {
return this.wrap;
}
// }}}
// {{{
/**
* @return {Date/String} Returns value of this field
*/
,getValue:function() {
// create new instance of date
return this.dateValue ? new Date(this.dateValue) : '';
} // eo function getValue
// }}}
// {{{
/**
* @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
// }}}
// {{{
/**
* Returns true if this component is visible
* @return {boolean}
*/
,isVisible : function(){
return this.df.rendered && this.df.getActionEl().isVisible();
} // eo function isVisible
// }}}
// {{{
/**
* private Handles blur event
*/
,onBlur:function(f) {
// called by both DateField and TimeField blur events

// revert focus to previous field if clicked in between
if(this.wrapClick) {
f.focus();
this.wrapClick = false;
}

// update underlying value
if(f === this.df) {
this.updateDate();
}
else {
this.updateTime();
}
this.updateHidden();

// 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);

} // eo function onBlur
// }}}
// {{{
/**
* private Handles focus event
*/
,onFocus:function() {
if(!this.hasFocus){
this.hasFocus = true;
this.startValue = this.getValue();
this.fireEvent("focus", this);
}
}
// }}}
// {{{
/**
* private Just to prevent blur event when clicked in the middle of fields
*/
,onMouseDown:function(e) {
if(!this.disabled) {
this.wrapClick = 'td' === e.target.nodeName.toLowerCase();
}
}
// }}}
// {{{
/**
* private
* Handles Tab and Shift-Tab events
*/
,onSpecialKey:function(t, e) {
var key = e.getKey();
if(key === e.TAB) {
if(t === this.df && !e.shiftKey) {
e.stopEvent();
this.tf.focus();
}
if(t === this.tf && e.shiftKey) {
e.stopEvent();
this.df.focus();
}
}
// otherwise it misbehaves in editor grid
if(key === e.ENTER) {
this.updateValue();
}

} // eo function onSpecialKey
// }}}
// {{{
/**
* private Sets the value of DateField
*/
,setDate:function(date) {
this.df.setValue(date);
} // eo function setDate
// }}}
// {{{
/**
* private Sets the value of TimeField
*/
,setTime:function(date) {
this.tf.setValue(date);
} // eo function setTime
// }}}
// {{{
/**
* private
* Sets correct sizes of underlying DateField and TimeField
* With workarounds for IE bugs
*/
,setSize:function(w, h) {
if(!w) {
return;
}
if('below' === this.timePosition) {
this.df.setSize(w, h);
this.tf.setSize(w, h);
if(Ext.isIE) {
this.df.el.up('td').setWidth(w);
this.tf.el.up('td').setWidth(w);
}
}
else {
this.df.setSize(w - this.timeWidth - 4, h);
this.tf.setSize(this.timeWidth, h);

if(Ext.isIE) {
this.df.el.up('td').setWidth(w - this.timeWidth - 4);
this.tf.el.up('td').setWidth(this.timeWidth);
}
}
} // eo function setSize
// }}}
// {{{
/**
* @param {Mixed} val Value to set
* Sets the value of this field
*/
,setValue:function(val) {
if(!val && true === this.emptyToNow) {
this.setValue(new Date());
return;
}
else if(!val) {
this.setDate('');
this.setTime('');
this.updateValue();
return;
}
if ('number' === typeof val) {
val = new Date(val);
}
val = val ? val : new Date(1970, 0 ,1, 0, 0, 0);
var da, time;
if(val instanceof Date) {
this.setDate(val);
this.setTime(val);
this.dateValue = new Date(val);
}
else {
da = val.split(this.dtSeparator);
this.setDate(da[0]);
if(da[1]) {
if(da[2]) {
// add am/pm part back to time
da[1] += da[2];
}
this.setTime(da[1]);
}
}
this.updateValue();
} // eo function setValue
// }}}
// {{{
/**
* Hide or show this component by boolean
* @return {Ext.Component} this
*/
,setVisible: function(visible){
if(visible) {
this.df.show();
this.tf.show();
}else{
this.df.hide();
this.tf.hide();
}
return this;
} // eo function setVisible
// }}}
//{{{
,show:function() {
return this.setVisible(true);
} // eo function show
//}}}
//{{{
,hide:function() {
return this.setVisible(false);
} // eo function hide
//}}}
// {{{
/**
* private Updates the date part
*/
,updateDate:function() {

var d = this.df.getValue();
if(d) {
if(!(this.dateValue instanceof Date)) {
this.initDateValue();
if(!this.tf.getValue()) {
this.setTime(this.dateValue);
}
}
this.dateValue.setMonth(0); // because of leap years
this.dateValue.setFullYear(d.getFullYear());
this.dateValue.setMonth(d.getMonth());
this.dateValue.setDate(d.getDate());
}
else {
this.dateValue = '';
this.setTime('');
}
} // eo function updateDate
// }}}
// {{{
/**
* private
* Updates the time part
*/
,updateTime:function() {
var t = this.tf.getValue();
if(t && !(t instanceof Date)) {
t = Date.parseDate(t, this.tf.format);
}
if(t && !this.df.getValue()) {
this.initDateValue();
this.setDate(this.dateValue);
}
if(this.dateValue instanceof Date) {
if(t) {
this.dateValue.setHours(t.getHours());
this.dateValue.setMinutes(t.getMinutes());
this.dateValue.setSeconds(t.getSeconds());
}
else {
this.dateValue.setHours(0);
this.dateValue.setMinutes(0);
this.dateValue.setSeconds(0);
}
}
} // eo function updateTime
// }}}
// {{{
/**
* private Updates the underlying hidden field value
*/
,updateHidden:function() {
if(this.isRendered) {
var value = this.dateValue instanceof Date ? this.dateValue.format(this.hiddenFormat) : '';
this.el.dom.value = value;
}
}
// }}}
// {{{
/**
* private Updates all of Date, Time and Hidden
*/
,updateValue:function() {

this.updateDate();
this.updateTime();
this.updateHidden();

return;
} // eo function updateValue
// }}}
// {{{
/**
* @return {Boolean} true = valid, false = invalid
* callse validate methods of DateField and TimeField
*/
,validate:function() {
return this.df.validate() && this.tf.validate();
} // eo function validate
// }}}
// {{{
/**
* Returns renderer suitable to render this field
* @param {Object} Column model config
*/
,renderer: function(field) {
var format = field.editor.dateFormat || Ext.ux.form.DateTime.prototype.dateFormat;
format += ' ' + (field.editor.timeFormat || Ext.ux.form.DateTime.prototype.timeFormat);
var renderer = function(val) {
var retval = Ext.util.Format.date(val, format);
return retval;
};
return renderer;
} // eo function renderer
// }}}

}); // eo extend

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

// eof

Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var filterShow = "Hidden"


var win = new Ext.Window({
height : 1000,
width : 1000,
title : 'Data repository explorer ',
autoScroll : true,
constrainHeader : true,

layout : "border",
items : [{
region : "center",
title : "File content view",
layout : "card",
id : "cards",
defaults : {
// applied to each contained panel
border : false
},
layoutConfig : {
deferredRender : false
},

items : [{
border : false,
id : 'centerImage',
html : '<div id="centerImageLoad" />'
} ]

}, {
region : "west",
title : "File hierarchy",
width : 250,
split : true,
collapsible : true,
titleCollapse : true,
items : [{
width : 320,
labelWidth : 75, // label settings here cascade
id : 'filterPanel',
hidden : true,
title : 'Filter options',
// bodyStyle : 'padding:5px 5px 0',
height : 300,
layout : 'fit',
border : false,
closable : false,
defaults : {
width : 80
},
defaultType : 'textfield',
items : [{
xtype : 'form',
frame : true,
labelWidth : 100,
id : 'form',
items : [{
boxLabel : 'Save filter on apply',
hideLabel : true,
name : 'saveFilter',
xtype : 'checkbox'
}, {
xtype : 'xdatetime',
id : 'dtf',
fieldLabel : 'Date & Time',
width : 170
// ,anchor:'-1'
,
timeFormat : 'H:i:s',
timeConfig : {
altFormats : 'H:i:s',
allowBlank : true
},
dateFormat : 'd.n.Y',
dateConfig : {
altFormats : 'Y-m-d|Y-n-d',
allowBlank : true
}
}, {
fieldLabel : 'End date',
name : 'last',
xtype : 'datefield'

}]
}],
tbar : [{
text : 'Apply',
tooltip : 'Apply filter options',
iconCls : 'demo-grid-add'

}, {
text : 'Clear',
tooltip : 'Clear the filter critera',
iconCls : 'demo-grid-add'

}]
}],
tbar : new Ext.Toolbar({
items : [filterToolbarButton = new Ext.Toolbar.Button({
id : 'westfilter',
text : 'Filter',
tooltip : 'Show or Hide filter rules',
iconCls : 'filterEmpty',
listeners : {
click : function(c) {
if (filterShow == "Hidden") {
Ext.getCmp('filterPanel').show();
filterShow = "Show"
} else {
Ext.getCmp('filterPanel').hide();
filterShow = "Hidden"
}

},
scope : this
}
})]
})
}]

});
win.show();
});
</script>
<title>Ext.ux.form.DateTime Example</title>
</head>
<body>
</body>
</html>

jsakalos
23 Nov 2008, 7:41 PM
Do you render it into an initially inactive card (display:none)? If so, you mustn't if you don't want to have rendering problems. This is true also for standard Ext components.

michaelc
23 Nov 2008, 9:21 PM
Do you render it into an initially inactive card (display:none)? If so, you mustn't if you don't want to have rendering problems. This is true also for standard Ext components.

It's not a card but it is hidden in the initial state.

So if that's the case how do you get around elements that are not displayed initially ?

NoahK17
24 Nov 2008, 7:44 AM
Maybe this has been mentioned before, but when using a form store, what format does the date and time need to be in (e.g. returned from the server), in order to correctly populate this extension in the example given on Page 1?

jsakalos
24 Nov 2008, 9:49 AM
Formats must just match: json/store/column model/datetime there is no other restriction.

NoahK17
5 Dec 2008, 9:36 AM
Formats must just match: json/store/column model/datetime there is no other restriction.

Cheers, it works great!

masterbuddha
9 Dec 2008, 4:27 PM
Hello,

Just a quick question hopefully. I am just wondering how to set a default time in the time field.

If I use the datetime picker to choose a date (example1.jpeg) and then tab to the time field (example2.jpeg) it places the current time in the time field.

How Can I default that time field to '00:00:00' instead of '11:24:27'?

Thanks for any help, below is my datefield configuration.

Justin




new Ext.ux.form.DateTime({
xtype:'xdatetime'
,id:'mydateTimeField'
,fieldLabel:'Date & Time'
,timeFormat:'H:i:s'
,timeConfig: {
altFormats:'H:i:s'
,allowBlank:true
,value:'00:00:00'
}
,dateFormat:'d/m/Y'
,dateConfig: {
,altFormats:'Y-m-d|Y-n-d' ,allowBlank:true ,value:'01/12/2008'
}

jsakalos
9 Dec 2008, 5:47 PM
Set otherToNow:false

masterbuddha
9 Dec 2008, 5:50 PM
Thank you that was perfect. :D

It worked a treat.

Thanks for the quick reply.

jgeewax
10 Dec 2008, 7:57 PM
First, thank you so much for the datetime field. It is great and has saved me tons of time.

I just wanted to share that I ran into an issue where I would use the dateConfig and timeConfig to set a default date/time value but when the form needed to be submitted the value was not set to the hidden field. Clicking and changing the value to something and then back set the correct value in the hidden field, but that was a pain.

When I changed the onRender method to do updateValue() instead of updateHidden(), the date was fine but the time wasn't. After a whole lot of debugging to figure out where exactly the problem was, I came across this little tidbit in the setValue method:

var da, time;
if(val instanceof Date) {
this.setDate(val);
this.setTime(val);
this.dateValue = new Date(val);
}
else {
da = val.split(this.dtSeparator);
this.setDate(da[0]);
if(da[1]) {
if(da[2]) {
// add am/pm part back to time
da[1] += da[2];
}
this.setTime(da[1]);
}
}
It seems like if the date value provided is a string, and not an actual date, this tries to do its own parsing instead of just using Date.parseDate. For whatever reason, the time value looked fine to me, but this.tf.setDate("05:00:00") didn't sit well with the time field...
So I replaced it with the following:

if(val instanceof Date) {
this.setDate(val);
this.setTime(val);
this.dateValue = new Date(val);
}
else {
var parsedDate = Date.parseDate(val, this.hiddenFormat);
this.setDate(parsedDate);
this.setTime(parsedDate);
}

This worked out pretty well... so I hope it helps someone else...

jsakalos
11 Dec 2008, 1:42 AM
Thank you for finding out; I'll test your patch and if it has no side effects I'll incorporate it into the main code.

Akamy2kidsmom
17 Dec 2008, 9:02 AM
Hello Saki,

We are using a dateTime field and are experiencing problems with the tabIndex. When we use the original dateField, we can set the tabIndex as a configuration attribute. When we use your dateTime field, the tabIndex seems to be ignored. Has anyone else noticed this problem?? If so, is there a fix in the works?

Any support that you can provide would be appreciated.

Thanks,
Page

jsakalos
17 Dec 2008, 9:28 AM
Try to put tabIndex to both dateConfig and timeConfig configuration options.

Akamy2kidsmom
17 Dec 2008, 11:28 AM
That works.... Thanks, Saki!

dekely
21 Dec 2008, 4:00 AM
Hi Saki,

I tried for days to implement validation for a future dat unsuccessfully.
any chance you can help?
I want to allow only future date for your component.

thanks in advance
Dekel

jsakalos
21 Dec 2008, 6:51 AM
Try to take a look here first; hopefully it helps: http://extjs.com/deploy/dev/examples/form/adv-vtypes.html

dekely
21 Dec 2008, 8:15 AM
Thanks man, you've just made my day...
btw,
is there a different between using vType or using validator ?

oegozi
25 Dec 2008, 1:59 AM
Hi,

I am using Ext.ux.form.DateTime and I am having a problem when validating the time field because the time field always has the date of today upon validation.
Consider the following example:

1. I have the following Ext.ux.form.DateTime in my code:

displayDateFrom = new Ext.ux.form.DateTime({
fieldLabel: getLocalizationValue('application.javascript.messageCenter.editForm.rangeSet.from'),
dateFormat: 'm-d-Y',
timeFormat: 'H:i',
hiddenFormat:'m-d-Y H:i',
id: 'activationDate',
name: 'activationDate',
//configuring with a validator on the date
dateConfig: {allowBlank: false,validator:displayDateFromDateFieldValidator},
//configuring time
timeConfig: {allowBlank: false, increment: 15,validator:displayDateFromTimeFieldValidator},

vtype: 'dateTimeRange'
});
...........


2. now lets say I do the following in the displayDateFromDateFieldValidator above so that the input date will always be in the future:
//want the time to always be in the future
displayDateFrom.tf.minValue = new Date();
//want the date to be always in the future - (not relevant for the problem I have)
displayDateFrom.df.minValue = new Date().clearTime();
3. In the UI I choose for date the tomorrow and time for 08:00 am - which should be ok
4. But when the automatic validator runs it fails. When debugging I see it runs validateValue(08:00)-This function internally formats 08:00 to "today" 08:00 by using value = this.parseDate(value);
Due to this behavior the validation fails becuase minValue is future where tf.value is "today" 08:00.

I can think of a way to overcome this by always not giving tf a minValue at all, and validate future only for both date+time combination. But I am not sure this is the right way, my question is whether we can control the validator so that it will not use "today".
Also, may be someone has a better solution for this problem.........

Thanks
Ora

jsakalos
26 Dec 2008, 4:07 AM
Re 1: set otherToNow:false

FYI: There is documentation of individual configuration options in comments in the source. It is worth to read it.

oegozi
27 Dec 2008, 11:48 PM
Thanks a lot but I am not sure it solves this issue, The problem is that when we get tot the function validateValue(val), the input "val" has only hours, and internally it is parsed to "today"+val. adding the "otherToNow" field as seen below, did not change this behavior.
Am I missing anything?
Thanks

function initDisplayRangeSet(){

debugger;
displayDateFrom = new Ext.ux.form.DateTime({
fieldLabel: getLocalizationValue('application.javascript.messageCenter.editForm.rangeSet.from'),
dateFormat: 'm-d-Y',
timeFormat: 'H:i',
hiddenFormat:'m-d-Y H:i',
id: 'activationDate',
name: 'activationDate',
otherToNow:false,
//configuring with a validator on the date
dateConfig: {allowBlank: false,validator:displayDateFromDateFieldValidator},
//configuring time
timeConfig: {allowBlank: false, increment: 15,validator:displayDateFromTimeFieldValidator}


});

jsakalos
28 Dec 2008, 4:47 AM
I'm not sure that I fully understand what are you headed for. otherToNow just tells DateTime to initialize value to now:


,initDateValue:function() {
this.dateValue = this.otherToNow ? new Date() : new Date(1970, 0, 1, 0, 0, 0);
}



validate override just calls underlying validates:


// {{{
/**
* @return {Boolean} true = valid, false = invalid
* callse validate methods of DateField and TimeField
*/
,validate:function() {
return this.df.validate() && this.tf.validate();
} // eo function validate
// }}}

oegozi
28 Dec 2008, 5:01 AM
The problem I have is due to this code (in ext-all-debug.js) which runs automatically upon validate:

validateValue : function(value){
value = this.formatDate(value);
if(!Ext.form.DateField.superclass.validateValue.call(this, value)){
return false;
}
if(value.length < 1){ returntrue;
}
var svalue = value;
value = this.parseDate(value);

if(!value){
this.markInvalid(String.format(this.invalidText, svalue, this.format));
returnfalse;
}
.............
.............
The marked line above recieves the value which is an hour (e.g 09:00), and the return value of this.parseDate(value) is today-09:00 so consider the following scenario:
I have two Ext.ux.form.DateTime , one for start range and the other for end range.
In the end range I want the time to be always in the future so I want to give both date&time fields of the end-range a min value of now.
If I do that the validation will fail because specifically as you see in the code above the validateValue method validates the time against today so even if the chosen date is : tomorrow 09:00 and the time now is today-10:00 then the validation of the time will fail because the validated time will be today 09:00 agains min value of today-10:00.

The solution I was hoping for is to have the ability to control either the format the parser is using or to somehow manipulate the value that is passed to this method and add date to it.

I hope this makes more sense now,
Thanks
Ora

jsakalos
29 Dec 2008, 12:02 AM
I think that you need a custom validator for this purpose. This is a good starting point: http://extjs.com/deploy/dev/examples/form/adv-vtypes.html

elDub
12 Jan 2009, 8:00 AM
I'm not sure if the issues I have been having with the DateTime tool are the same, but when I configure the object with a dtSeparator of 'T' and a hiddenFormat of 'c' to indicate to it that I'll be passing a datetime object in the format of "2009-01-12T05:30:00Z", I cannot get it to display the correct time in the time field. It simply puts the current time if "otherToNow' is true, or nothing if it is false. I've tried debugging the code and making small changes here and there, but still can't get it to work. Do you have any suggestions Saki?

jsakalos
12 Jan 2009, 8:19 AM
Have you put your format to altFormats?

elDub
12 Jan 2009, 8:29 AM
Have you put your format to altFormats?

I do not understand. 'c' is defined as a valid format for the Date object. (http://www.extjs.com/deploy/dev/docs/output/Date.html)

jsakalos
12 Jan 2009, 8:38 AM
http://extjs.com/deploy/dev/docs/?class=Ext.form.TimeField&member=altFormats

elDub
13 Jan 2009, 4:35 AM
Thanks Saki. With that suggestion I finally got it to work with the following configuration options:


dtSeparator: 'T',
hiddenFormat: 'c',
timeConfig: {
altFormats: 'g:i:sP'
}

kevinconaway
15 Jan 2009, 9:09 AM
Is it possible for the Time field to be included on the the same div as the calendar widget? Currently, they are two separate fields.

This makes the field impossible to use as a menu item the same way the Date picker can be.

Thanks.

jsakalos
15 Jan 2009, 9:57 AM
Everything is possible. Have you tried?

BTW, they have common wrapper div.

KevinChristensen
17 Jan 2009, 5:27 AM
Any chance the DateTimeField will become part of Ext 3.0? It appears to be a very useful extension.

canxss
20 Jan 2009, 4:26 PM
Hi,

I can not make '2009-01-20T22:12:26.7826963Z' and '2009-01-12T05:30:00Z' values to show their time values in DateTime field.

The below code sample tests these two and some other datetime values:



Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var win = new Ext.Window({
width: 700,
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',
otherToNow: false,
dtSeparator: 'T',
hiddenFormat: 'c' //'Y-m-d\\TH:i:s.u'
,
timeWidth: 120,
timeFormat: 'H:i:s'//'g:i A'
,
timeConfig: {
altFormats: 'H:i:s|H:i:s.u',
allowBlank: true
},
dateFormat: 'd/m/Y',
dateConfig: {
altFormats: 'Y-m-d',
allowBlank: true
}
}, {
xtype: 'textfield',
fieldLabel: 'Date.parseDate',
id: 'txtDate1',
width: 450
}]
}],
buttons: [{
text: '2009-01-20',
handler: function(){
Ext.getCmp('dtf').setValue();
Ext.getCmp('dtf').setValue(this.text);
Ext.getCmp('txtDate1').setValue(Date.parseDate(this.text, 'Y-m-d'));
}
}, {
text: '2009-01-20T22:12:26',
handler: function(){
Ext.getCmp('dtf').setValue();
Ext.getCmp('dtf').setValue(this.text);
Ext.getCmp('txtDate1').setValue(Date.parseDate(this.text, 'Y-m-d\\TH:i:s'));
}
}, {
text: '2009-01-20T22:12:26.7826963',
handler: function(){
Ext.getCmp('dtf').setValue();
Ext.getCmp('dtf').setValue(this.text);
Ext.getCmp('txtDate1').setValue(Date.parseDate(this.text, 'Y-m-d\\TH:i:s.u'));
}
}, {
text: '2009-01-20T22:12:26.7826963Z',
handler: function(){
Ext.getCmp('dtf').setValue();
Ext.getCmp('dtf').setValue(this.text);
Ext.getCmp('txtDate1').setValue(Date.parseDate(this.text, "c"));
}
}, {
text: '2009-01-12T05:30:00Z',
handler: function(){
Ext.getCmp('dtf').setValue();
Ext.getCmp('dtf').setValue(this.text);
Ext.getCmp('txtDate1').setValue(Date.parseDate(this.text, "c"));
}
}]
});
win.show();
});
What am I doing wrong?

jsakalos
20 Jan 2009, 5:28 PM
http://extjs.com/forum/showthread.php?p=272417#post272417

canxss
20 Jan 2009, 5:54 PM
Yes, I've seen that post and tried to implement the configuration he suggested but it didn't work for me (It isn't in the code but I also set
altFormats: 'g:i:sP' for timeConfig, but it didn't make any difference). Therefore I posted the code. I don't understand what is wrong.

jsakalos
20 Jan 2009, 5:58 PM
If it works with default formats then you need to keep playing to find out the right time format/altFormats. There is also otherToNow:false option that can influence the behavior.

canxss
20 Jan 2009, 6:16 PM
Believe me I did. I never post a question without first trying and also searching forum since posting a problem seems harder to me.

Anyway, as I said I don't have any other idea about what to do, so if you have time to run the code that I've sent, I will appreciate it.

Thanks

jsakalos
20 Jan 2009, 9:34 PM
It is 99.99% about altFormats. Have you tried to use standard Ext DateField if it works with that. When it is proven that it is really a bug in DateTime, I'll take a look.

jsakalos
20 Jan 2009, 9:35 PM
One more thing, which version of Ext? There were some bugs in 2.1, hopefully fixed in 2.2.

dekely
21 Jan 2009, 12:14 AM
Hi,
I'm using Ext.ux.form.DateTime in a form
if I change the hour and click Add in my form the time is not up to date,
if you first remove the focus from the component (click in a different place in the form)
than the value is getting up to date.

I believe this is something with events because on a strong pc, it happens only if you do
it fast enough.

any idea?
maybe I can call loseFocus or something like this before I take the values from the form ?

jsakalos
21 Jan 2009, 2:59 AM
Try the same with standard TimeField - I suspect it is in Ext...

canxss
21 Jan 2009, 10:43 AM
As you have said, I have tried the previous code with also using TimeField. And while problematic ones rendered correctly in a TimeField, they didn't show up in the time part of DateTime field.

Here is the new code using also TimeField:



Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var win = new Ext.Window({
width: 700,
id: 'winid',
height: 300,
layout: 'fit',
border: false,
closable: false,
title: 'Ext.ux.form.DateTime Example',
buttonHandler: function(value, format){
Ext.getCmp('dtf').setValue();
Ext.getCmp('dtf').setValue(value);
Ext.getCmp('tf1').setValue();
Ext.getCmp('tf1').setValue(Date.parseDate(value, format));
Ext.getCmp('txtDate1').setValue(Date.parseDate(value, format));
},
items: [{
xtype: 'form',
frame: true,
labelWidth: 100,
id: 'form',
url: '.',
items: [{
xtype: 'xdatetime',
id: 'dtf',
fieldLabel: 'Date & Time',
otherToNow: false,
dtSeparator: 'T',
hiddenFormat: 'c' //'Y-m-d\\TH:i:s.u'
,
timeWidth: 120,
timeFormat: 'H:i:s'//'g:i A'
,
timeConfig: {
altFormats: 'H:i:s|H:i:s.u',
allowBlank: true
},
dateFormat: 'd/m/Y',
dateConfig: {
altFormats: 'Y-m-d',
allowBlank: true
}
}, {
xtype: 'timefield',
id: 'tf1',
format: 'H:i:s.u'//'g:i A'
,
altFormats: 'H:i:s|H:i:s.u',
fieldLabel: 'Time',
width: 200
}, {
xtype: 'textfield',
id: 'txtDate1',
fieldLabel: 'Date.parseDate',
width: 450
}]
}],
buttons: [{
text: '2009-01-20',
handler: function(){
win.buttonHandler(this.text, 'Y-m-d')
}
}, {
text: '2009-01-20T22:12:26',
handler: function(){
win.buttonHandler(this.text, 'Y-m-d\\TH:i:s')
}
}, {
text: '2009-01-20T22:12:26.7826963',
handler: function(){
win.buttonHandler(this.text, 'Y-m-d\\TH:i:s.u')
}
}, {
text: '2009-01-20T22:12:26.7826963Z',
handler: function(){
win.buttonHandler(this.text, 'c')
}
}, {
text: '2009-01-12T05:30:00Z',
handler: function(){
win.buttonHandler(this.text, 'c')
}
}]
});
win.show();
});

jsakalos
21 Jan 2009, 10:59 AM
timeConfig: {
altFormats: '|H:i:s|H:i:s.u|H:i:s.u\\Z|H:i:s\\Z',
allowBlank: true
},

canxss
21 Jan 2009, 1:50 PM
Thanks it works!

But there is one more important thing: In the code when I parse the date '2009-01-20T22:12:26.7826963Z' to text box I get the correct value as "Wed Jan 21 2009 00:12:26 GMT+0200 (GTB Standard Time)". Since I'm in +2 time zone and +2 is added to 22:12 it is after midnight (00:12) so the date changes. But the way it is parsed to DateTime field doesn't take into account this timezone offset and it simply shows "20/01/2009"as date and "22:12:26" as time which is incorrect. I have looked at the code before I first posted this problem and I've seen that it was simply splitting date and time values with dtSeparator. I was suspecting whether it would take this timezone difference later in the code but I couldn't follow too much.

Anyway how can this be fixed?

smokeman
23 Jan 2009, 8:38 AM
I have read all 39 pages, and I've seen a couple of people with a problem similar to what I have, but not exactly the same.

I have duplicated the form-grid example where grid data is loaded into a form.
original example here:http://extjs.com/deploy/dev/examples/form/form-grid.html

one of my fields is a combined date/time, so I thought I would use your extension to display it, and provide an easy gui for changing the values.
I have spent 2 days trying to get the date, and time to load from the grid's store.
the date always loads correctly, but the time does not. the closest I came was using the long string of altFormats from the docs for the timefield
"g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H"

but this displayed the time with a PM, not an AM as in the json string sent to the store.

here is the string of json loaded into the store for the field publish_timecode:
"publish_timecode":"12\/30\/2008 09:00 AM"
as you can see, this is the format 'm/d/Y h:i A'

here is the section of code for the datetime:

{
xtype: 'xdatetime',
fieldLabel: 'Publish Date/Time',
hiddenFormat:'m/d/Y h:i A',
otherToNow:false,
anchor:'-30',
timeFormat:'h:i A',
timeConfig: {
altFormats:'h:i A',
allowBlank:true
},
dateFormat:'m/d/Y',
dateConfig: {
altFormats:'m/d/Y',
allowBlank:true
},
name: 'publish_timecode'
}

[Solved]
I solved by getting rid of the space between time, and the AM/PM,
so now, on the server side, it is 'm/d/Y h:iA' and I matched it in my datetime config.
thought I should post it, because someone might have the same problem.

update-
this appears to be because I was not issuing a type:date on the store...very important.

khewuwei
27 Jan 2009, 11:30 PM
Hi,

I am using the xdatetime. May I know how do I disable the dates or time that is before the system clock?
That means that the user is only able to choose the date/time from the present onwards. He cannot choose those before.

Thanks in advance!

jsakalos
28 Jan 2009, 1:29 AM
Use minValue for both underlying Date and Time fields in dateConfig and timeConfig.

khewuwei
28 Jan 2009, 1:43 AM
Hi jsakalos (http://extjs.com/forum/member.php?u=2178),

Thanks for your reply. May I ask what to fill in for the minValue?

var dateConfig = Ext.apply(
...
...
minValue: ?

)

var timeConfig = Ext.apply(
...
...
minValue: ?


)

Looking forward for your reply.

Thanks

Cheers,
Khew

jsakalos
28 Jan 2009, 1:53 AM
http://extjs.com/deploy/dev/docs/?class=Ext.form.DateField&member=minValue

elDub
28 Jan 2009, 6:56 AM
Hello Saki,

I recently patched my copy of Ext.ux.DateTime to handle an issue with editing Date objects in Daylight Saving Time based regions. When DateTime is passed an ISO 8601 formatted date (format 'c') not in the current Daylight Saving Time period such as the EDT date of "2007-11-01T12:00:00-04:00", the time gets adjusted by one hour in the UI to be "11:00" instead of the correct "12:00". I think this is due to the fact that when the setValue method is called and the value passed is a string, the section of code that is ran splits the string into a date string and a time string, and passes those values separately to the .df and .tf objects. When the time string gets interpreted without knowing the date, the offset of -04:00 gets applied assuming the current Daylight Saving Time setting which is -05:00 (today's date would be an EST date of "2008-01-28T12:00:00-05:00") which is wrong for the whole date and time object.

My solution was to add another attempt to convert the passed string value to a Date object using the hiddenFormat prior to the individual calls to setDate and setTime:



/**
* @param {Mixed} val Value to set
* Sets the value of this field
*/
,setValue:function(val) {
if(!val && true === this.emptyToNow) {
this.setValue(new Date());
return;
}
else if(!val) {
this.setDate('');
this.setTime('');
this.updateValue();
return;
}
if ('number' === typeof val) {
val = new Date(val);
}
else if('string' === typeof val && this.hiddenFormat) {
val = Date.parseDate(val, this.hiddenFormat)
}
val = val ? val : new Date(1970, 0 ,1, 0, 0, 0);
var da, time;
if(val instanceof Date) {
this.setDate(val);
this.setTime(val);
this.dateValue = new Date(val);
}
else {
da = val.split(this.dtSeparator);
this.setDate(da[0]);
if(da[1]) {
if(da[2]) {
// add am/pm part back to time
da[1] += da[2];
}
this.setTime(da[1]);
}
}
this.updateValue();
} // eo function setValue

jsakalos
28 Jan 2009, 7:38 AM
Yes, it is good idea, I'll add it to the code after a bit of testing...

canxss
28 Jan 2009, 1:30 PM
Hi Saki,

Since you didn't make any comment I thought may be you've missed my question that I've posted in #390. I'm anxiously waiting for your response to know whether there is a solution or not. Since the question is based on the attached code in previous posts I didn't want to replicate it since it wouldn't make any sense.

Can you check it out?

Thanks

jsakalos
28 Jan 2009, 1:43 PM
I have no idea about that in fact...:-? I'm not dealing with cross-time-zone problems (yet) so I have no personal experience. I guess evant (http://extjs.com/forum/member.php?u=2950) knows best about date/time problems, maybe you could ask him to take a look.

smithrp
28 Jan 2009, 3:42 PM
Hey Saki,

I recently upgraded to the svn head in order to get some memory issues resolved, but it seems that the latest code visually breaks your xDateTime control. The Date and the Time now overlay on top of each other. Is there anything you can think of that would be causing this, or is there any way to fix this? Thanks in advance!

-Ryan

jsakalos
28 Jan 2009, 3:59 PM
Something else must be wrong. I use DateTime in both form and grid w/o any troubles with latest svn build.

Barius
29 Jan 2009, 1:27 PM
There is a logic bomb in this code and I just tripped it today.

Here's your updateDate() function:

/**
* private Updates the date part
*/
,updateDate:function() {

var d = this.df.getValue();
if(d) {
if(!(this.dateValue instanceof Date)) {
this.initDateValue();
if(!this.tf.getValue()) {
this.setTime(this.dateValue);
}
}
this.dateValue.setMonth(0); // because of leap years
this.dateValue.setFullYear(d.getFullYear());
this.dateValue.setMonth(d.getMonth());
this.dateValue.setDate(d.getDate());
}
else {
this.dateValue = '';
this.setTime('');
}
} // eo function updateDateCheck out this part:



this.dateValue.setFullYear(d.getFullYear());
this.dateValue.setMonth(d.getMonth());
this.dateValue.setDate(d.getDate()); Now, this looks pretty straight forward, but there is in fact a really subtle problem here. The date.setMonth(m,d) function in Javascript actually *expects* two parameters, both the month and the day. In the absence of both, it will set the date object to this month and this day. When given only the month, it will set the month to that provided and the day to this day.

Consider today's date: January 29th 2009 (2009-0-29).
Now, what happens when we updateDate() the date to February 6th? What we expect is 2009-01-06. But, because setMonth() is setting both the month and day, it actually changes the date to 2009-02-06. Do you see why?

Consider that February only has 28 days.

The result is that, internally, the date.setMonth(01) command tries to set the date to 2009-01-29, but this date is actually 2009-02-01. When date.setDate(6) gets called, you now end up with 2009-02-06, or March 6th instead of February 6th.

Thankfully, the fix is easy, just use setMonth() the way it was intended:


this.dateValue.setFullYear(d.getFullYear());
this.dateValue.setMonth(d.getMonth(),d.getDate()); I hope anyone else using this widget reads this before running into the problems I did :s

jsakalos
29 Jan 2009, 2:06 PM
Thank you. I have my local code already updated for some time. I'm now updating code in the first post.

Barius
29 Jan 2009, 3:24 PM
Good stuff.

BTW, if this being implemented as part of Ext at some point I would very much appreciate this part being made optional through a config setting:



/**
* private Updates the date part
*/
,updateDate:function() {

var d = this.df.getValue();
if(d) {
if(!(this.dateValue instanceof Date)) {
this.initDateValue();
if(!this.tf.getValue()) {
this.setTime(this.dateValue);
}
}
this.dateValue.setMonth(0); // because of leap years
this.dateValue.setFullYear(d.getFullYear());
this.dateValue.setMonth(d.getMonth(),d.getDate());
}
else {
this.dateValue = '';
this.setTime('');
}
} // eo function updateDate


The problem with setting date/time when the user updates one or the other is that it doesn't take into account the minValue, maxValue and increment time-configs. I have used this widget to prompt the user for a datetime, but the time is restricted between 8am and 5pm in increments of 30 minutes. With the above code, when the user selected a date it would cause the time to auto-populate with either 'now' or '0am', which wasn't exactly helpful ;)

elDub
30 Jan 2009, 7:08 AM
I forgot to mention one other enhancement that I made to your great DateTime tool.



// {{{
/**
* Calls markInvalid on the DateField and TimeField
*/
,markInvalid:function(msg){
this.df.markInvalid(msg);
this.tf.markInvalid(msg);
} // eo function markInvalid
// }}}


Its counterpart of clearInvalid existed, but there was no way to reference the datetime object as a whole and mark it as invalid from server side validations.

jsakalos
30 Jan 2009, 7:49 AM
Thank you very much - it's becoming better and better.... :) :) :)

mystix
30 Jan 2009, 8:21 AM
There is a logic bomb in this code and I just tripped it today.


alternatively, calling setDate() before setMonth() should also do the trick.
(which is what's being done in Date.js)

jsakalos
30 Jan 2009, 8:34 AM
@mystix, somebody, perhaps you, pointed that out way back. My failure was, that I updated my local code but not the published version in the first post. Now it should be correct.

Thank you.

elDub
30 Jan 2009, 11:04 AM
Hey Saki,

I recently upgraded to the svn head in order to get some memory issues resolved, but it seems that the latest code visually breaks your xDateTime control. The Date and the Time now overlay on top of each other. Is there anything you can think of that would be causing this, or is there any way to fix this? Thanks in advance!

-Ryan

Do you happen to be placing the DateTime component within an Ext 'fieldset' or 'column' layout? I am running into this issue right now, but I have to extract the test to a non customized area before I can tell where the problem is.

In my case, when the DateTime field was rendered to a non-active tab panel, this is when the time field would overlay the date field. I am using the { deferredRender: false, layoutOnTabChange: true } settings on the tabpanel to get me through different issues, but they seem to cause an issue with Saki's utility. Saki... any suggestions?

jsakalos
31 Jan 2009, 2:14 AM
hideMode:'offsets' on that tab (not TabPanel). See this example: http://examples.extjs.eu/?ex=tabsinform

dearsina
31 Jan 2009, 5:29 AM
wonderful, wonderful, wonderful, just what i was looking for! thanks jozef...

elDub
2 Feb 2009, 6:19 AM
hideMode:'offsets' on that tab (not TabPanel). See this example: http://examples.extjs.eu/?ex=tabsinform

I'm adding this one to my corkboard of things to not forget!

Rui Lopes
4 Feb 2009, 10:35 AM
Is there a way to use this control inside a Ext.grid.EditorGridPanel? I can use it, but if I try to click the time combobox arrow the whole control disappears (there is no problem when I click the date trigger button though).

Thanks!

jsakalos
4 Feb 2009, 11:12 AM
Try to use timePosition:'below'

Rui Lopes
4 Feb 2009, 11:25 AM
Try to use timePosition:'below'

It does not work either. When I click the time combobox arrow it closes the edit mode.

jsakalos
4 Feb 2009, 11:45 AM
There must be something wrong. Old version? I use the very same DateTime for 100 clients in ~5-7 grids each.

Rui Lopes
4 Feb 2009, 12:45 PM
There must be something wrong. Old version? I use the very same DateTime for 100 clients in ~5-7 grids each.

I'm using version 2 from:

http://extjs.com/forum/showthread.php?p=107188#post107188

Isn't that the latest?

jsakalos
4 Feb 2009, 12:58 PM
The version is fine then.

vilivili
5 Feb 2009, 5:42 AM
Is there way to not set the timefield to "00:00", when I first set the datefield? Because I have to allow date and datetime type for this field, and 2009-02-05 and 2009-02-05 00:00 isn't the same.

My workaround is replacing this



if(!this.tf.getValue()) {
this.setTime(this.dateValue);
}


to this:



if(this.tf.value==undefined) {
this.setTime(this.dateValue);
}


in the updateDate function.

The other thing I had to do is in my code:



listeners: {
render: {
fn: function(){
this.setTime('');
}
}
}


I think, this isn't the best solution to my problem. Can anybody suggest an easier way?

jsakalos
5 Feb 2009, 8:42 AM
otherToNow:true doesn't help?

ChrisR
10 Feb 2009, 7:48 AM
Is it possible this is a bug:

When an invalid date is entered in the date field and then before fixing it the field blurs the time field gets cleared too,

I've fixed it by first checking if the df is valid before continuing with the updateDate method but don't know if this has any influence on the rest of the code, time is not on my side :(



// {{{
/**
* @private Updates the date part
*/
,updateDate:function() {

if (!this.df.isValid())
return;

var d = this.df.getValue();
if(d) {
if(!(this.dateValue instanceof Date)) {
this.initDateValue();
if(!this.tf.getValue()) {
this.setTime(this.dateValue);
}
}
this.dateValue.setMonth(0); // because of leap years
this.dateValue.setFullYear(d.getFullYear());
this.dateValue.setMonth(d.getMonth(), d.getDate());
// this.dateValue.setDate(d.getDate());
}
else {
this.dateValue = '';
this.setTime('');
}
} // eo function updateDate
// }}}

jsakalos
10 Feb 2009, 8:44 AM
Well, the original idea was that both date and time must be valid before the fields as a whole is valid.

ChrisR
10 Feb 2009, 1:43 PM
Well, the original idea was that both date and time must be valid before the fields as a whole is valid.

I understand that but clearing the time field when the date is invalid is a little drastic no? What about users making a typo and accidentally losing the time that was entered in the timeField? That requires them to re-enter the date and then look up what the time used to be while it has never been invalid.

Imho there is no reason to clear the time field when the date field is invalid.

jsakalos
10 Feb 2009, 1:51 PM
Well, I cannot reproduce the behavior you describe. Go go http://examples.extjs.eu/?ex=fs2col select or type a time and then type an invalid date. Nothing happens to time.

ChrisR
11 Feb 2009, 1:30 AM
Hi Saki,

I get the same behaviour in the example, check the zipped SWF screencast i've included. The clearing only happens when the date field blurs, maybe you didn't check that?

jsakalos
11 Feb 2009, 4:11 AM
I see. I'll take a look.

brenda
17 Feb 2009, 11:59 PM
it works :D

Now I have a cmendez21 calendar displaying events input with saki's xdatetime field :D


Thnx for the nice plugin, Saki :)

vilivili
18 Feb 2009, 12:46 AM
otherToNow:true doesn't help?

No, that's not good. I want the timefield to be empty. In my application valid values are: "y-m-d" and "y-m-d H:i". With otherToNow:true when I blur datefield, timefield is filled with the current time.

(This is a theatre event admin application, but the users don't always know the exact start time of the show, it is filled later.)

jsakalos
18 Feb 2009, 1:41 AM
Then it would be better to use separate Data and Time Field. DateTime is for Date and Time.

vilivili
18 Feb 2009, 3:11 AM
Thanks for the answer... I'll use the my modified version, though. (:

This is how it works:

oegozi
18 Feb 2009, 5:16 AM
Hi,

I have a formPanel which contains two Ext.ux.form.DateTime (activation and expiration fields), in addition I have a "save button" that submits the form's values to the server.
My problem is when I change one of the dateTime fields and submit it immediately by clicking "save". In that case the submited values are not the updated one (but the one before the update).
If I perform the same scenario but wait a bit before clicking save or change focus to another area before clicking save then the values are sent up-to-date.

Seems to me I need to perform some kind of update before sending the values- what would be the right way to do it?


Here are parts of my code:
1.The problematic activationDate field:


displayDateFrom = new Ext.ux.form.DateTime({


fieldLabel: getLocalizationValue('application.javascript.messageCenter.editForm.ran geSet.from'),

dateFormat: 'm-d-Y',
timeFormat: 'H:i',
hiddenFormat:'m-d-Y H:i',
id: 'activationDate',
name: 'activationDate',
//configuring with a validator on the date
dateConfig: {allowBlank: false/*,validator:displayDateFromDateFieldValidator*/},
//configuring time
timeConfig: {allowBlank: false, increment: 15/*,validator:displayDateFromTimeFieldValidator*/}});

2. The fieldSet that holds the activationDate:


var displayRangeSet = new Ext.form.FieldSet({
title: getLocalizationValue('application.javascript.messageCenter.editForm.ran geSet.title'),
autoHeight:true,
style: 'padding: 2px 10px 2px 10px;',
layout: 'form',
items: [displayDateFrom, displayDateTo]
});

3.Then there is a Tabpanel that holds the fieldSet and a formPanel that holds the TabPanel (can post this code too if needed)



4. The save button is a simple button whith the following handler method when clicking it. In this method I get the "old" values as I described above)

function



onSave(values) {



var realValues = {};
for (var key in values) {
if (key.indexOf("ext-comp-") < 0)
realValues[key] = values[key];
}
debugger;
//replace the combobox display name in the real numeric id
realValues.priorityLevel = priorityLevelCombo.value;
var obj = Ext.util.JSON.encode(realValues);
jsonStore.load( { params: { start: 0, limit: ITEMS_ON_PAGE, method: "update", object: obj} } );
}
Thanks!

jsakalos
18 Feb 2009, 7:30 AM
Value should be updated on blur:


/**
* @private Handles blur event
*/
,onBlur:function(f) {
// called by both DateField and TimeField blur events

// revert focus to previous field if clicked in between
if(this.wrapClick) {
f.focus();
this.wrapClick = false;
}

// update underlying value
if(f === this.df) {
this.updateDate();
}
else {
this.updateTime();
}
this.updateHidden();

// 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);

} // eo function onBlur

oegozi
19 Feb 2009, 8:17 AM
It kind-of works....:-?
I see that after the onBlur is called the values in the form are really updated, but the initial problem remains because.......
when clicking the button the handler of the button is called BEFORE the onBlur, therefore the handler of the button still sends the "old values".

Do you have an idea for making the order of things to be first the onBlur update and then the handler of the button?

hAmpzter
19 Feb 2009, 12:31 PM
I found a small error to the dateConfig-code on line 92.. It reads:

,width:this.timeWidth
but should ofcourse be:

,width:this.dateWidth

Thanx for an wonderful plugin!

Regards,
</Jonas>

jsakalos
19 Feb 2009, 12:40 PM
No, dateWidth is not an option. By default both date and time fields have same width but if you use anchoring then time field width is kept fixed and date field varies. See this example http://examples.extjs.eu/?ex=fs2col - try to resize the window.

radtad
19 Feb 2009, 2:18 PM
If I understand correctly, the raw value is getting set onBlur correct? I want to use an onClick or onChange (select listener) to get the raw value. Basically I need the raw value when the user changes the date/time so I can use it to set the window title. Is there another way to do this or maybe a click listener can be added somehow?


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'
,items:[{
xtype:'xdatetime'
,id:'dtf'
,fieldLabel:'Date & Time'
,anchor:'-18'
,timeFormat:'H:i:s'
,timeConfig: {
altFormats:'H:i:s'
,allowBlank:true
}
,dateFormat:'d.n.Y'
,dateConfig: {
altFormats:'Y-m-d|Y-n-d'
,allowBlank:true
}
,listeners: {select: function(combo, record, idx) { console.log('blah!!!!!!!!!'); }}
}]
}]
,buttons:[{
text:'Submit'
,handler:function() {
Ext.getCmp('form').getForm().submit();
}
}]
});
win.show();
});

jsakalos
19 Feb 2009, 2:29 PM
You can find out which event would be appropriate for you if you type in firebug console:

Ext.util.Observable.capture(Ext.getCmp('datetime-id'), function(e){console.log(e);});

Then do something with the field and watch the console.

radtad
19 Feb 2009, 3:27 PM
Thanks! This works great, valid is what I was looking for. I have two questions regarding valid:

1. It's getting called 4 times after a time / date is set by the user. I understand why two of them get called (one for the date, one for the time), but why is it doubled? The reason I ask is so I don't keep calling the same function I just called through the listener on valid.

2. The raw value returns, but it seems to be returning what was previously clicked on, not the current clicked on date/time. Do I need to set the raw value in the listener function I'm calling as well?

I'm using this to retrieve the raw value on the valid event:

var datevalue= Date.parseDate(Ext.get('datetime-id').getValue(), "Y-m-d H:i:s");
You can find out which event would be appropriate for you if you type in firebug console:

Ext.util.Observable.capture(Ext.getCmp('datetime-id'), function(e){console.log(e);});

Then do something with the field and watch the console.

oegozi
21 Feb 2009, 10:49 PM
Hi Saki,

Do you have a solution for my problem (3 replies above)?, I thought about calling the onBlur method every time the user clicks the button, but this didnt work as well, seems the formPanel values (as taken from mainForm.getForm().getValues()) are still not updated, any thoughts?
Thanks

hAmpzter
22 Feb 2009, 4:47 AM
No, dateWidth is not an option. By default both date and time fields have same width but if you use anchoring then time field width is kept fixed and date field varies. See this example http://examples.extjs.eu/?ex=fs2col - try to resize the window.

But then if I would wan't to have different sizes and not in an anchor-layout way I have to change dateConfig object or what?

Couldn't:

,width:this.dateWidth || this.timeWidth
be a good solution to use?

Regards,
</Jonas>

jsakalos
22 Feb 2009, 5:39 AM
DateTime accepts width config option as any other field. This is overall width of Date + Time + gap in between. timeWidth is width of the TimeField. If you take example from http://examples.extjs.eu/?ex=fs2col you can configure datetime as follows:


fieldLabel:'Field 3'
,xtype:'xdatetime'
,timeWidth:60
,width:140
,anchor:''

That says: not anchored, total width = 140px, time width 60px, date width = 140px - 60px - gap between.

hAmpzter
22 Feb 2009, 12:15 PM
Then I understand.. Nice solution! Thanx! :)

Regards,
</Jonas>

mono blaine
23 Feb 2009, 10:44 AM
Hi Saki,

Do you have a solution for my problem (3 replies above)?, I thought about calling the onBlur method every time the user clicks the button, but this didnt work as well, seems the formPanel values (as taken from mainForm.getForm().getValues()) are still not updated, any thoughts?
Thanks

I came across to the same problem today. I had a DateTime Field control and a save button on a form, and if I pressed the save button after I have selected a time value, the time value was not actually getting updated. This problem occured in IE7. In Firefox 2.0, no such problem occured because the field was somehow automatically losing focus after a time value had been selected, which fired the onBlur event.

To overcome this problem (probably not the best way) I had to make a little change in the source code:

In function initComponent,


var timeConfig = Ext.apply({}, {
id:this.id + '-time'
,format:this.timeFormat
,width:this.timeWidth
,listeners:{
blur:{scope:this, fn:this.onBlur}
,focus:{scope:this, fn:this.onFocus}
,select:{scope:this, fn:this.updateTime}
}
}, this.timeConfig);

I added the line in bold. It appears to be doing the trick.

jsakalos
23 Feb 2009, 10:52 AM
Hmmm, it seems strange to me. blur events from underlying date and time fields are handled with this code:


,onBlur:function(f) {
// called by both DateField and TimeField blur events

// revert focus to previous field if clicked in between
if(this.wrapClick) {
f.focus();
this.wrapClick = false;
}

// update underlying value
if(f === this.df) {
this.updateDate();
}
else {
this.updateTime();
}
this.updateHidden();

// 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);

} // eo function onBlur



It says that all internal updates are handled immediately, only events are fired with a delay. Can you somehow test if the submit button click event comes earlier than the above code is run?

mono blaine
23 Feb 2009, 11:19 AM
yes you are right; the click event came first, and that is the problem. In the onBlur event I changed the defer value (100) to a much higher value like 1600 and that fixed the problem. My question is; Is this such a variable issue? In a much slower pc, would even a 1600 ms delay become insufficient? Or is it not even related to the speed and power of the computer?

jsakalos
23 Feb 2009, 11:25 AM
What???? Increasing defer solved the problem???? Unbelievable.

The normal sequence should be:

1) focus on date or time field
2) you click save (submit) button
3) blur event is fired, field gets updated, etc
4) click event is processed submitting the form
5) overall blur and/or change events would be processed 100ms later, if anybody listens

So increasing defer doesn't make any sense to me.

mono blaine
23 Feb 2009, 11:36 AM
:)):)):)):)) I am so sorry; I have just read what I wrote and that is so stupid. Of course it did not work.

mono blaine
23 Feb 2009, 11:42 AM
By the way, the delay of the firing of onBlur event also effects the date part of the control. In the same way, it is not updated appropriately. (pick a date and click the submit button) Another additional little fix might be to call this.updateDate when a date is picked.

jsakalos
23 Feb 2009, 11:49 AM
Can you confirm that the click event comes before the onBlur routine is run (i.e. blur of underlying df or tf fires)?

mono blaine
23 Feb 2009, 11:51 AM
Yes, at least I am sure about that. I have inserted some alert functions and saw that the click event came first.

Clever Cutter
24 Feb 2009, 9:27 AM
I've got a radio button on my form that enables/disables a xdatetime field. The problem I'm having is when I set a default value for this field, it does not get passed in the params unless a user focuses on the field. Otherwise the value is empty. I've tried various places in the radio enabler function to setValue when it's enabled but that does not seem to work either. One must focus on the date field for it to get passed with the form.

UPDATE: I fixed it with a simple setValue in the radio enable handler. I could have sword I had tried that and failed. Maybe this will help someone else.



this.dt = new Date();
this.today = this.dt.format('m/d/Y');
{
xtype: 'radiogroup',
fieldLabel: 'Change Due ES',
labelStyle: 'color: black;',
width: 120,
items: [{
name: 'cliordrdy-radio-changeduees',
boxLabel: 'Yes',
inputValue: '1',
handler: function(rb,checked) {
if (true==checked) {
Ext.getCmp('id-cliordrdy-date-duees').enable();
Ext.getCmp('id-cliordrdy-date-duees').setValue(new Date());
Ext.getCmp('id-cliordrdy-date-duees').show();
}
}
},{
name: 'cliordrdy-radio-changeduees',
boxLabel: 'No',
inputValue: '0',
checked: true,
handler: function(rb,checked) {
if (true==checked) {
Ext.getCmp('id-cliordrdy-date-duees').disable();
Ext.getCmp('id-cliordrdy-date-duees').hide();
}
}
}]
},{
xtype: 'xdatetime',
id: 'id-cliordrdy-date-duees',
name: 'cliordrdy-date-duees',
fieldLabel: '',
labelSeparator: '',
//hideLabel: true,
labelStyle: 'color: black;',
timeFormat: 'H:i',
timeConfig: {
allowBlank: true,
value: '12:00'
},
dateFormat: 'm/d/Y',
dateConfig: {
allowBlank: false,
value: this.today
},
disabled: true,
hidden: true
}

ylaroche
3 Mar 2009, 10:45 AM
I think there's a bug with this DateTime Field in an accordion...
DateTime Field is not rendering correctly in 2nd, 3rd, ... accordions. First is ok...
I could not find something talking about this in the forum.
I'm experiencing the same problem with one of my component.
Not working in any of my browsers and tried to doLayout at many places ans many times...
Thanks in advance.

Here's the example (same as downloaded source) :


var win = new Ext.Window({
width: 500,
height: 300,
layout: "fit",
items: {
xtype: "form",
layout: "fit",
items: {
layout: "accordion",
items: [
{
title: "Accordion 1",
layout: "form",
items: [
{xtype: "textfield", fieldLabel: "Text 1"},
{xtype: "xdatetime", fieldLabel: "Date & Time 1"},
{xtype: "datefield", fieldLabel: "Date 1"}
]
},
{
title: "Accordion 2",
layout: "form",
items: [
{xtype: "textfield", fieldLabel: "Text 2"},
{xtype: "xdatetime", fieldLabel: "Date & Time 2"},
{xtype: "datefield", fieldLabel: "Date 2"}
]
},
{
title: "Accordion 3",
layout: "form",
items: [
{xtype: "textfield", fieldLabel: "Text 3"},
{xtype: "xdatetime", fieldLabel: "Date & Time 3"},
{xtype: "datefield", fieldLabel: "Date 3"}
]
}
]
}
}
});

win.show();

jsakalos
3 Mar 2009, 11:41 AM
Do you have an idea of a fix for that what you think is bug?

ylaroche
3 Mar 2009, 12:01 PM
I can't call it a bug cause it's an extension! I'm trying to do my own extension from your example and tried to use it in an accordion! No explanation, tried hard but i'm kind of new with ExtJS.

I can try to investigate more... but maybe it could be helpful to notice that as «a bug» yeah! I think it's a render thing... maybe something like the «TabPanel.layoutOnTabChange» will help! layoutOnAccChange??? hehe!

By the way, since version 2.2.1, Grid Filter Example is no longer working... yeah, another post maybe!

Here's an image of my Field (temporarly called SignField)... maybe later i'll post it if I can resolve that!

jsakalos
3 Mar 2009, 12:10 PM
Ok, let's sort it out:

1) GridFilter is not my extension and even it it would be this is not the right thread for it
2) Unfortunately, in accordion layout, the accordion panels are all rendered on the container render and those that are collapsed have display:none therefore no dimensions are available. You can either set hideMode:'offsets' for initially collapsed accordion panels, or you can create/render the content of them on first expand.

Still a bug?

ylaroche
3 Mar 2009, 12:20 PM
You mean (that still not working) :



var win = new Ext.Window({
width: 500,
height: 300,
layout: "fit",
items: {
xtype: "form",
layout: "fit",
items: {
layout: "accordion",
items: [
{
title: "Accordion 1",
layout: "form",
items: [
{xtype: "textfield", fieldLabel: "Text 1"},
{xtype: "xdatetime", fieldLabel: "Date & Time 1"},
{xtype: "datefield", fieldLabel: "Date 1"}
]
},
{
title: "Accordion 2",
hideMode: "offsets",
layout: "form",
items: [
{xtype: "textfield", fieldLabel: "Text 2"},
{xtype: "xdatetime", fieldLabel: "Date & Time 2"},
{xtype: "datefield", fieldLabel: "Date 2"}
]
},
{
title: "Accordion 3",
hideMode: "offsets",
layout: "form",
items: [
{xtype: "textfield", fieldLabel: "Text 3"},
{xtype: "xdatetime", fieldLabel: "Date & Time 3"},
{xtype: "datefield", fieldLabel: "Date 3"}
]
}
]
}
}
});
win.show();

ylaroche
3 Mar 2009, 12:32 PM
Adding them on first expand is working... but I suddently hate my code... hehe! not so lazy... Still a bug?

ylaroche
3 Mar 2009, 12:34 PM
Adding them on first expand is working... but I suddently hate my code... hehe! not so lazy... Still a bug?



var win = new Ext.Window({
width: 500,
height: 300,
layout: "fit",
items: {
xtype: "form",
layout: "fit",
items: {
layout: "accordion",
items: [
{
title: "Accordion 1",
layout: "form",
items: [
{xtype: "textfield", fieldLabel: "Text 1"},
{xtype: "xdatetime", fieldLabel: "Date & Time 1"},
{xtype: "datefield", fieldLabel: "Date 1"}
]
},
{
title: "Accordion 2",
layout: "form",
/*items: [
{xtype: "textfield", fieldLabel: "Text 2"},
{xtype: "xdatetime", fieldLabel: "Date & Time 2"},
{xtype: "datefield", fieldLabel: "Date 2"}
],*/
listeners: {
expand: function(p) {
if(!this.addDone) {
this.add({xtype: "textfield", fieldLabel: "Text 2"});
this.add({xtype: "xdatetime", fieldLabel: "Date & Time 2"});
this.add({xtype: "datefield", fieldLabel: "Date 2"});
this.addDone = true;
}
}
}
},
{
title: "Accordion 3",
layout: "form",
items: [
{xtype: "textfield", fieldLabel: "Text 3"},
{xtype: "xdatetime", fieldLabel: "Date & Time 3"},
{xtype: "datefield", fieldLabel: "Date 3"}
]
}
]
}
}
});
win.show();

jsakalos
3 Mar 2009, 12:56 PM
Cannot be lazier... We just need to workaround that "feature" of accordion layout.

ClemsonJeeper
3 Mar 2009, 1:29 PM
I have an xdatetime inside a fieldset inside a FormPanel inside a Viewport. In Firefox, this works great. In IE, there is a rendering issue. Both IE 6 and 7 seem to have it.

When the screen first loads:

http://www.hitman.cc/issue1.png

The date/time fields aren't rendered.

If I tab to them, they show up:

http://www.hitman.cc/issue2.png

The definition for the xdatetypes are:



{
xtype: 'xdatetime',
fieldLabel: 'Vendor Access Start',
dateFormat: 'M d, Y',
allowBlank: false,
id: 'tVendorAccessStart'
},{
xtype: 'xdatetime',
fieldLabel: 'Vendor Access End',
dateFormat: 'M d, Y',
allowBlank: false,
id: 'tVendorAccessEnd'
}


Not sure if this is enough info, but can someone perhaps lend a hand as to what I should start looking at?

jsakalos
3 Mar 2009, 1:52 PM
Wow! IE strikes again! Which version of DateTime? How does this: http://examples.extjs.eu/?ex=fs2col look in IE? If everything else fails post a working showcase (http://extjs.com/forum/../learn/Ext_Forum_Help#Posting_a_working_showcase) please.

ClemsonJeeper
3 Mar 2009, 2:26 PM
Wow! IE strikes again! Which version of DateTime? How does this: http://examples.extjs.eu/?ex=fs2col look in IE? If everything else fails post a working showcase (http://extjs.com/forum/../learn/Ext_Forum_Help#Posting_a_working_showcase) please.

I hate it as well.

I have *not* updated the DateTime module in quite a while. Let me make sure I'm running the latest version. I should have done that before posting.

ryedin
3 Mar 2009, 4:49 PM
The datetime field just does not render. I JUST discovered this extension today, and grabbed the code from the first post (I assume that is the most recent version since you seem to be editing that post when you make updates)...

As with most of these issues, I'm sure it's some silly doLayout chaining that's not getting hooked up right. I'm just not sure if the problem is your code or mine (and the poster just before me). Of course I'm leaning toward it being yours because all the other fields render just fine in my forms in FF and IE, but then when I look at the example page you cited in the post above, they render ok for me in IE. So... I still think it's probably something you're just not doing 100% right in your extension, that's working on that demo page but fails under certain other layout/form configurations in IE.

Perhaps some kind of deferRender fu you're doing? I didn't see any of that in your code...

Anyway, keep up the good work, it's a promising widget. I'll be hacking at it here for a bit because I need it working asap. Just thought I'd chime in with a resounding "yes, it does not render properly in IE"...


[EDIT]: FYI, my form is inside a Window panel that is resizeable, and when I click on the resize handle for the window the field all of a sudden renders (I don't have to actually resize, just click on the resize handles). Hope that helps you troubleshoot.

ryedin
3 Mar 2009, 4:57 PM
Also noticed, in Both Browsers (yes I know there are others, but you know which two i mean), if I choose a date with the datepicker component and then click "save" on my form without first navigating off the datepicker, the date I chose is not properly rolling up into the form values. The same is true of the timepicker component. Seems like I have to make sure I fully remove the focus from your widget in order to actually get the values to report via the form's getValues() method.

ClemsonJeeper
3 Mar 2009, 5:15 PM
Wow! IE strikes again! Which version of DateTime? How does this: http://examples.extjs.eu/?ex=fs2col look in IE? If everything else fails post a working showcase (http://extjs.com/forum/../learn/Ext_Forum_Help#Posting_a_working_showcase) please.

OK, demo is at:

http://www.hitman.cc/ext/test.html

However this looks more like a rendering issue than just a DateTime issue. If you load the screen with IE6, then resize the browser, some fields disappear, if you resize again, some reappear. It appears random.

Is this some incorrect usage on my part of the layouts?

The problem seems to go away when I set a fixed width that is large enough for the DateTime field, see:

http://www.hitman.cc/ext/test2.html

ryedin
3 Mar 2009, 5:24 PM
I added this bit of code to your extension, at the end of the onRender() method...



//defer a function that cycle-focuses the date and time fields to make sure they render in IE
var me = this;
setTimeout(function() {
me.df.focus();
me.tf.focus();
me.tf.blur();
}, 100);


Yes, I "early" bind "this" to a variable called "me" when I deal with closures to avoid the easy to get out of hand overhead of always creating delegates. I also prefer good 'ole setTimeout to .defer. Don't hate me cuz I mix up my Ext coding with some "Plain Ole JS" :P

ANYWAY... the above code forces the widgets to render in IE, so I can move along for now and use this nice extension you made for us :-).

ClemsonJeeper
3 Mar 2009, 7:36 PM
OK, check out:

http://www.hitman.cc/ext/test3.html

This shows the IE6/IE7 disappearance of the DateTime field on browser resize. I had to fix a few issues in my test case that was causing problems, but now you can clearly see these fields disappear.

jsakalos
4 Mar 2009, 11:48 AM
I see it, they disappear. I have neither tools nor knowledge to debug IE, can you please take a look what's really happening. I suspect width calculation.

jsakalos
4 Mar 2009, 11:50 AM
@ryedin, isn't your issue somehow connected with ClemsonJeeper's?

ClemsonJeeper
4 Mar 2009, 1:43 PM
I see it, they disappear. I have neither tools nor knowledge to debug IE, can you please take a look what's really happening. I suspect width calculation.

Usually putting my fingers in my ears, closing my eyes, and stamping the ground is my method of debugging IE.

I'll see if I can take a look as to what is happening. :)

jsakalos
4 Mar 2009, 1:46 PM
My method of debugging IE is to write "on the box" with my application:

Minimum System Requirements: Firefox 3.0 or later stable version.

ClemsonJeeper
4 Mar 2009, 2:00 PM
I see it, they disappear. I have neither tools nor knowledge to debug IE, can you please take a look what's really happening. I suspect width calculation.

Looks like the code you had commented out:



// this.wrap = t.wrap({cls:'x-form-field-wrap'});
this.wrap = t.wrap();


Was the issue. Changed it to:



this.wrap = t.wrap({cls:'x-form-field-wrap'});
// this.wrap = t.wrap();


And it works OK in IE & FF. Do you happen to remember why you commented out that x-form-field-wrap class on the table wrap element?

jsakalos
4 Mar 2009, 2:23 PM
No idea, I don't remember. Anyway, thank you for finding the reason, I'm going to update the code.

JAnderson
13 Mar 2009, 12:56 AM
Awesome extension. Thanks for everything you contribute to ExtJS. You rock.

mtrax
23 Mar 2009, 12:02 PM
just wondering if this is suitable for a standard (non-ExtJS form) page with multiple date pickers required.
I'm looking for a lite weight form that I can imbed on my current page which I want to dynamically create some date-time pickers.

thanks

jsakalos
23 Mar 2009, 12:32 PM
Never used it that way but there should be no problem. Just try and then let us know.

radtad
31 Mar 2009, 2:44 PM
Anyone else having this problem? The current value is not showing up for me. The value that shows up is the last set value.



2. The raw value returns, but it seems to be returning what was previously set, not the current set date/time. Do I need to set the raw value in the listener function I'm calling as well?

I'm using this to retrieve the raw value on the valid event:

var datevalue= Date.parseDate(Ext.get('datetime-id').getValue(), "Y-m-d H:i:s");

jsakalos
31 Mar 2009, 3:17 PM
Post the code relevant to DateTime.

radtad
31 Mar 2009, 3:45 PM
Post the code relevant to DateTime.




xtype: 'xdatetime',
id: 'sched_newmeet_start',
name: 'meetstart',
fieldLabel:'Meeting Start',
anchor:'100%',
allowBlank: false,
timeFormat:'g:i A',
emptyToNow: false,
timeConfig: {
forceSelection: true,
minValue: '12:00 AM',
maxValue: '11:59 PM',
increment: 15,
allowBlank: false,
altFormats:'g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H|H:i:s|h:i:s'
},
dateFormat:'l M j, Y',
dateConfig: {
forceSelection: true,
allowBlank: false,
altFormats:'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|l M j, Y|D M j, Y'
},
listeners: {valid: setTitle}
and it calls...




function setTitle() {
var starttime = Date.parseDate(Ext.get('sched_newmeet_start').getValue(), "Y-m-d H:i:s");

if (starttime) {
var meetstart = starttime.format('l, M j g:ia');
console.log('meetstart: ' + meetstart);
}
}

jsakalos
31 Mar 2009, 3:53 PM
The code looks good but it's still not clear what is the problem.
The current value is not showing up for me. The value that shows up is the last set value

What is "current" and what is "last set" value?

Have you used Firebug to step into the code (both yours and DateTime's) to see what's happening?

radtad
31 Mar 2009, 4:03 PM
The code looks good but it's still not clear what is the problem.

What is "current" and what is "last set" value?

Have you used Firebug to step into the code (both yours and DateTime's) to see what's happening?

I guess it's a little difficult to understand. Let me try to explain a little more in detail.

Let's say I have a time set of 9:00AM. I then go and set the date to 1/1/2009 using the date picker. It hits 'valid' and then calls setTitle() which says there is no date/time. If I go change the date using the date picker to 1/2/2009, it hits valid again, calls setTitle() and then it returns a date of 1/1/2009 at 9:00AM.

This goes the same way for changing the time as well. For some reason it's returning NOT the current date / time set (as it should), but the date / time I set prior to the current. So every 2nd time I change the date / time it returns the 1st instance of date / time I selected.

radtad
31 Mar 2009, 4:21 PM
Have you used Firebug to step into the code (both yours and DateTime's) to see what's happening?

This only seems to happen with the listener 'valid'. If I step through Firebug and execute 'setTitle()' after 'blur' happens then it works.

So valid won't return you the correct (current) value? I can't think that that's the case. I would think valid should be returning the correct (current) value if it has both date / time and they are in fact valid.

jsakalos
31 Mar 2009, 4:33 PM
You see, this is composite field and valid event is simply relayed from underlying fields what means that both fields can fire valid event. Maybe it just comes prematurely.

Grolubao
7 Apr 2009, 3:13 AM
Is it possible to just disable the field but not the button? I wanted to force the user to pick a date everytime

jsakalos
7 Apr 2009, 3:24 AM
It must be somehow possible, however, I don't think this is specific to DateTime. Try to ask in Help forum how to do it for normal Date and Time fields.

mystix
7 Apr 2009, 4:10 AM
Is it possible to just disable the field but not the button? I wanted to force the user to pick a date everytime

readOnly: true

Grolubao
7 Apr 2009, 4:45 AM
To anyone interested, I've managed to force the user to choose always by the datepicker. So everytime he clicks the field the datepicker pops-out:


Ext.form.DisabledDateField = Ext.extend(Ext.form.DateField,{
defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off", readOnly :true},
listeners: {
render: function(c) {
c.getEl().on('click', function(el) {
c.onTriggerClick();
}, c);
}
}
});

jsakalos
7 Apr 2009, 5:09 AM
Thank you for sharing.

(Enclose please your code in
tags.)

mogwai
24 Apr 2009, 9:49 PM
Hi Saki,
Congratulations for your extension. It's really awesome.
I wanted to add an autoLoad implementation to automatically sets the actual date when rendering, and also something like addDaysToDate to add or substract days from that Date.
At first it worked fine but then suddenly dates were not shown as expected (Really weird).
This is the coded i added:


/**
* @cfg {Object} autoLoad Set datetime values to current datetime if true.
*/
,autoLoad:false
/**
* @cfg {Object} If autoLoad is true then we can add or substract days to current date.
* Positive or Negative values
*/
,daysAddedToDate:0
/**
* private
* creates DateField and TimeField and installs the necessary event handlers
*/
,initComponent:function() {
....
....
// relay events
this.relayEvents(this.df, ['focus', 'specialkey', 'invalid', 'valid']);
this.relayEvents(this.tf, ['focus', 'specialkey', 'invalid', 'valid']);

if(this.autoLoad)
{
this.initDateValue();
if(this.daysAddedToDate != 0)
{
this.addDaysToDateValue();
}
this.setDate(this.dateValue);
this.setTime(this.dateValue);
}
} // eo function initComponent
....
....

/**
* private initializes internal dateValue
*/
,initDateValue:function() {
this.dateValue = this.otherToNow ? new Date() : new Date(1970, 0, 1, 0, 0, 0);
}

,addDaysToDateValue:function() {
this.dateValue = new Date(this.dateValue.getTime() + this.daysAddedToDate*24*60*60*1000)
}That's all. Do you have any idea what am i doing wrong?
Thanks in advance

broutard
30 Apr 2009, 10:35 AM
Hi and tanks for this addon !

I have a problem with the timeField.
When I configure a timeField with increment, when I choose a date (in the dateField) and I click on the timeField, the time is set to the real time (without my increment).



var datetimeField_deb = new Ext.ux.form.DateTime({
renderTo: 'datedebutdiv',
name: 'datedebut',
id: 'datedebut',
width: 200,
timeFormat:'H:i',
timeConfig:
{
altFormats:'H:i',
allowBlank: false,
increment: 15
editable:false
},
dateFormat:'d/m/y',
dateConfig:
{
altFormats:'Y-m-d',
allowBlank: false
}
});


... when I click in the timeField, it set to 12:11 for example but I want to force it to 0:00, 0:15, 0:30...

jsakalos
1 May 2009, 11:22 PM
Does this solve it: http://extjs.eu/docs/?class=Ext.ux.form.DateTime&member=otherToNow ?

dthemistokleous
4 May 2009, 10:41 AM
There are many reasons why someone would like to have different date and time widths for each component. It would be great if this could be included in another version. Below is a code snippet that could solve this problem:

....
/**
* @cfg {Number} dateWidth Width of date field in pixels (defaults to 100)
*/
dateWidth:100,

....

var dateConfig = Ext.apply({}, {
id:this.id + '-date',
format:this.dateFormat || Ext.form.DateField.prototype.format,
width:this.dateWidth,
selectOnFocus:this.selectOnFocus,
listeners: {
blur:{scope:this, fn:this.onBlur}
,focus:{scope:this, fn:this.onFocus}
}
}, this.dateConfig);

....

setSize:function(w, h) {
if(!w) {
return;
}
if('below' === this.timePosition) {
this.df.setSize(w, h);
this.tf.setSize(w, h);
if(Ext.isIE) {
this.df.el.up('td').setWidth(w);
this.tf.el.up('td').setWidth(w);
}
}
else {
this.df.setSize(w - this.dateWidth - 4, h);
this.tf.setSize(this.timeWidth, h);

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

jsakalos
4 May 2009, 10:49 AM
It is supported in the current version too: width is total width and timeWidth is width of time field. Anchoring is supported too, keeping the time field width constant and resizing the date field.

No patch is needed.

danderson
4 May 2009, 2:10 PM
Saki,

i've noticed an issue regarding DateTime and tabbing through form fields. I apologize if it has been answered elsewhere. a thread search on 'tab' did not yield any results.

in a form with a DateTime field, if i select a date, then tab to the time field (which defaults to the current system time) and then attempt to tab from the time field to the next field, form focus is lost when leaving the time field, and i must click on the next field to regain focus.

if i manually enter a date, i can tab through datetime to the next field without issue. i can also tab through datetime, leaving them blank, and onto the next field without issue.

i hope this makes sense.

thanks for a great extension!

jsakalos
4 May 2009, 2:17 PM
I use date time exclusively in grids so I haven't encountered it. Did you look deeper? (It's now crazy time for me so I have no idea when I will have time for it myself...)

radtad
5 May 2009, 6:03 PM
I can't seem to get 'startDay: 1' working no matter where inside the setup I define it. Is this a bug? I want to be able to set the start of the week to Monday, not the default Sunday.

jsakalos
5 May 2009, 9:59 PM
Where do you set it? startDay is property of DatePicker, not of DateField.

radtad
5 May 2009, 10:09 PM
Where do you set it? startDay is property of DatePicker, not of DateField.

In either one of the following red areas. Doesn't DateField use DatePicker anyway? I would think if it pops up with a DatePicker I should be able to set that somehow. Is that not true?




xtype: 'xdatetime',
id: 'sched_newmeet_end',
name: 'meetend',
fieldLabel:'Meeting End',
anchor:'100%',
startDay: 1,
allowBlank: false,
hiddenFormat:'Y-m-d H:i',
timeFormat:'g:i A',
emptyToNow: false,
timeConfig: {
forceSelection: true,
minValue: '12:00 AM',
maxValue: '11:59 PM',
increment: 15,
allowBlank: false,
altFormats:'g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H|H:i:s|h:i:s'
},
dateFormat:'l M j, Y',
dateConfig: {
forceSelection: true,
startDay: 1,
allowBlank: false,
altFormats:'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|l M j, Y|D M j, Y'
}

jsakalos
5 May 2009, 10:20 PM
Ext.override(Ext.DatePicker, {startDay:1})

See also http://extjs.com/learn/Tutorial:Localizing_Ext

danderson
12 May 2009, 8:01 AM
saki,

i have tried to look into the tabbing issue i mentioned previously (http://extjs.com/forum/showthread.php?p=325029#post325029), and it appears to be a firefox only bug. i have tested in the following browsers (all on win/xp pro), and only see the issue in FF:


Opera 9.64
Safari 3.2.2
IE 7.0.5730.11
Firefox 3.0.8 (with and without firebug running)
Firefox 3.0.10


i have attached an example file, including the version of DateTime i'm using in the source.

as i mentioned, whenever i click on the calendar triggerfield, select a date, and then tab to time, when i attempt to tab to the next field ('company' in the example i attached), it instead diverts focus to the first link in the page ('Admin'). if i enter a date manually, i can tab through the fields w/out issue.

my hope is that a fresh set of eyes can find the cause of the issue, instead of just having to chalk it up to being a FF bug.

thanks.