PDA

View Full Version : Datetime field again



teddyjas
22 Jan 2009, 8:34 PM
Hi,
Was working on this datetime field yesterday.
I was looking a combined date and time controller, used saki's datetime before but the field is separated into two input.

So tried making one, and here is the codes I come up with:


/*
* DateTime field extension
* @author Teddy A Jasin - 2009
*
* note:
* extended from Ext.form.DateField
* format of datetimefield will take combination of dateFormat + ' ' + timeFormat (ie:'d-m-Y G:i A')
*
* usage:
* new Ext.ux.form.DateTimeField({fieldLabel: 'My Date',dateFormat:'d-m-Y',timeFormat:'G:i A'});
* or
* {xtype:'datetimefield',fieldLabel: 'My Date',dateFormat:'d-m-Y',timeFormat:'G:i A'}
*
* fixes:
* 15/04/09 - fix for bug date selection on grayed (non current month date) always set to '0:00'
*/
Ext.ns('Ext.ux.form');

/*DateTime Picker*/
Ext.DateTimePicker = Ext.extend(Ext.DatePicker, {

timeFormat:'g:i A'
,timeLabel:'Time'
,timeWidth:100

,initComponent:function() {
Ext.DateTimePicker.superclass.initComponent.call(this);
this.id = Ext.id();
}

,onRender: function(container,position){

Ext.DateTimePicker.superclass.onRender.apply(this,arguments);

var table = Ext.get(Ext.DomQuery.selectNode('table tbody',container.dom));

var tfEl = Ext.DomHelper.insertBefore(table.first(),{tag:'tr',
children:[{tag:'td',cls:'x-date-bottom',html:this.timeLabel},{tag:'td',cls:'x-date-bottom ux-timefield', colspan:'2'}]},true);

this.tf.render(table.child('td.ux-timefield'));

if (this.getEl().parent('div.x-layer')){
var zindex = this.getEl().parent('div.x-layer').getStyle('z-index');
if(this.tf.list)
this.tf.list.setStyle('z-index',this.getEl().parent('div.x-layer').getStyle('z-index')+ 1000);
}
}

,setValue : function(value){
var old = this.value;
if (!this.tf){
// create timefield
var timeConfig = Ext.apply({}, {
id:this.id + '-time'
,format:this.timeFormat || Ext.form.TimeField.prototype.format
,width:this.timeWidth
,fieldLabel:this.timeLabel
,selectOnFocus:true
,lazyInit: false
}, this.timeConfig);
this.tf = new Ext.form.TimeField(timeConfig);
this.tf.ownerCt = this;
delete(this.timeFormat);
this.tf.setValue(value);
}

this.value = this.getDateTime(value);

}

,getDateTime: function(value){
if (this.tf){
var dt = new Date();
var timeval = this.tf.getValue();
value = Date.parseDate(value.format(this.dateFormat) + ' ' +timeval,this.format);
}
return value;
}

,selectToday : function(){
if(this.todayBtn && !this.todayBtn.disabled){
this.value=this.getDateTime(new Date());
this.fireEvent("select", this, this.value);
}
}
});
Ext.reg('datetimepickerfield', Ext.DateTimePicker);

/*DateTime Item Menu*/
Ext.menu.DateTimeItem = function(config){
Ext.menu.DateTimeItem.superclass.constructor.call(this, new Ext.DateTimePicker(config), config);
this.picker = this.component;
this.addEvents('select');

this.picker.on("render", function(picker){
picker.getEl().swallowEvent("click");
picker.container.addClass("x-menu-date-item");
});

this.picker.on("select", this.onSelect, this);
};

Ext.extend(Ext.menu.DateTimeItem, Ext.menu.Adapter, {
onSelect : function(picker, date){
this.fireEvent("select", this, date, picker);
Ext.menu.DateTimeItem.superclass.handleClick.call(this);
}
});

/*DateTime Menu*/
Ext.menu.DateTimeMenu = function(config){
Ext.menu.DateTimeMenu.superclass.constructor.call(this, config);
this.plain = true;
var di = new Ext.menu.DateTimeItem(config);
this.add(di);
this.picker = di.picker;
this.relayEvents(di, ["select"]);

this.on('beforeshow', function(){
if(this.picker){
this.picker.hideMonthPicker(true);
}
}, this);
};
Ext.extend(Ext.menu.DateTimeMenu, Ext.menu.Menu, {
cls:'x-date-menu',
beforeDestroy : function() {
this.picker.destroy();
}
,hide : function(deep){
if (this.picker.tf.innerList){
if ((Ext.EventObject.within(this.picker.tf.innerList)) || (Ext.get(Ext.EventObject.getTarget())==this.picker.tf.innerList))
return false;
}
if(this.el && this.isVisible()){
this.fireEvent("beforehide", this);
if(this.activeItem){
this.activeItem.deactivate();
this.activeItem = null;
}
this.el.hide();
this.hidden = true;
this.fireEvent("hide", this);
}
if(deep === true && this.parentMenu){
this.parentMenu.hide(true);
}
}
});

/*DateTime Field*/
Ext.ux.form.DateTimeField = Ext.extend(Ext.form.DateField, {

dateFormat: 'd-m-Y'
,timeFormat: 'H:i'

,defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "off"}

,initComponent:function() {
Ext.ux.form.DateTimeField.superclass.initComponent.call(this);
this.format = this.dateFormat + ' ' + this.timeFormat;
this.afterMethod('afterRender',function(){
this.getEl().applyStyles('top:0');
});
}

,getValue : function(){
return this.parseDate(Ext.form.DateField.superclass.getValue.call(this)) || '';
}

,onTriggerClick : function(){
if(this.disabled){
return;
}
if(this.menu == null){
this.menu = new Ext.menu.DateTimeMenu();
}
Ext.apply(this.menu.picker, {
minDate : this.minValue,
maxDate : this.maxValue,
disabledDatesRE : this.ddMatch,
disabledDatesText : this.disabledDatesText,
disabledDays : this.disabledDays,
disabledDaysText : this.disabledDaysText,
format : this.format,
timeFormat: this.timeFormat,
dateFormat: this.dateFormat,
showToday : this.showToday,
minText : String.format(this.minText, this.formatDate(this.minValue)),
maxText : String.format(this.maxText, this.formatDate(this.maxValue))
});
this.menu.on(Ext.apply({}, this.menuListeners, {
scope:this
}));
this.menu.picker.setValue(this.getValue() || new Date());
this.menu.show(this.el, "tl-bl?");
}
});
Ext.reg('datetimefield', Ext.ux.form.DateTimeField);
would be great if anyone can further improve the code as now it only satisfy my requirements :)

I've tested on FF2, FF3, IE6 & IE7 only

usage will be :

new Ext.ux.form.DateTimeField({fieldLabel: 'My Date',dateFormat:'d-m-Y',timeFormat:'G:i A'});attached is the screenshot


fixes:
* 15/04/09 - fix for bug date selection on grayed (non current month date) always set to '0:00'

jsakalos
24 Jan 2009, 6:18 AM
Looks very good! Any link to test look & feel of it?

teddyjas
29 Jan 2009, 1:46 AM
uh ya sorry... i dun have test site for it :)

oneup
30 Jan 2009, 7:06 AM
Can anyone please tell me how I can use this widget in my GWT project?
I've tried putting the JS file in the jar of gwtextux, by looking at the format/directory structure of the other files. no success.
any help will be much appreciated.
thx in advance.

teddyjas
30 Jan 2009, 8:33 AM
urgh.... I have not tried GWT myself :)

nadeemshafi9
13 Apr 2009, 10:25 AM
Does anyone have any idea why the arrow pointing down on the right of teh picker isnt showing but is clickable you know the datepicker thumb or the down arrow for the drop down, its invisible , have i put my plugin code in the wrong place ? i put it after everything but before my own code.

Thanks

nadeemshafi9
13 Apr 2009, 10:28 AM
im testing on IE 7 and there seems to be issues with the Today function as it works somtimes but somtimes picks the wrong time.

My config:

xtype:'datetimefield',
fieldLabel: 'My Date',
dateFormat:'Y-m-d',
timeFormat:'H:i:s'

teddyjas
14 Apr 2009, 7:14 PM
I just tested on IE7 seems its working fine... even using your config.
the only thing is that you are using seconds as well for the time picker, so the second will always be all same values, same time as the component rendered

blacklds
14 Apr 2009, 10:43 PM
Hi,

It is a greate plugin, exactly what I need for my project:D. But I found that it could not show me the correct time. Say there are some dates in grey before or after the current month, if I select one of those dates, the time would change to 0:00, no matter what value I input in the time field. I tested it in IE6.

teddyjas
14 Apr 2009, 11:01 PM
Hi,

It is a greate plugin, exactly what I need for my project:D. But I found that it could not show me the correct time. Say there are some dates in grey before or after the current month, if I select one of those dates, the time would change to 0:00, no matter what value I input in the time field. I tested it in IE6.

ahhh I can reproduce that bug... then thats the first bug I found hahaha :D thx.
Will update it soon...

nadeemshafi9
14 Apr 2009, 11:49 PM
if you click the today button it gives you the right datetime, but if you click the today button again after 10 mins without refreshing the page it will give you the same datetime.

nadeemshafi9
14 Apr 2009, 11:50 PM
i got mine working as the issues i talked about before were due to missing images in my extjs dir

teddyjas
14 Apr 2009, 11:54 PM
ahhh I can reproduce that bug... then thats the first bug I found hahaha :D thx.
Will update it soon...
updated it, pls refer first post ;)

teddyjas
14 Apr 2009, 11:59 PM
if you click the today button it gives you teh right datetime, but if you click teh today button again after 10 mins without refreshing the page it will give you the same datetime.

yes, I don't classify it as a bug, the time will be taken from the time picker dropdown and this values are set when the component is rendered and are not refreshed every seconds/minute... hence u will always get the value at the time the component is rendered

nadeemshafi9
15 Apr 2009, 12:03 AM
i have updated the code with your update and i am happy with the resut, thanks

nadeemshafi9
15 Apr 2009, 12:10 AM
another thing that i find is a usability issue is that when you click the time it waits for you to click the date in order to fill the feild with teh datetime.

so if you already picked a date and then it gets set, and you want to go back and pick a time then you have to pick a date again otherwise if you click out it dosent get set.

teddyjas
15 Apr 2009, 12:27 AM
another thing that i find is a usability issue is that when you click the time it waits for you to click teh date in order to fill the feild with teh datetime.

so if you already picked a date and then it gets set, and you want to go back and pick a time then you have to pick a date again otherwise if you click out it dosent get set.

u got point there...
I'll see what I can do :) ~o)

nadeemshafi9
15 Apr 2009, 12:27 AM
idealy it woulld take the values and set them if you click out, or even have an ok button which is what you are looking for when you click out.

blacklds
15 Apr 2009, 2:34 AM
updated it, pls refer first post ;)
Greate! And Thx!:D, but found another bug, the selected date is not hilighted, it is always the current day.

thatcoder
27 Apr 2009, 5:52 PM
any validation for the combined field available?

teddyjas
27 Apr 2009, 6:15 PM
it has its standard date validation based on the format u describe in config.
if u want ur own validation then u may want to use validator function in the config same way like the date field

thatcoder
27 Apr 2009, 6:18 PM
it has its standard date validation based on the format u describe in config.
if u want ur own validation then u may want to use validator function in the config same way like the date field

not sure i understand.

how can i validate the datetime range?

teddyjas
27 Apr 2009, 6:25 PM
not sure i understand.

how can i validate the datetime range?

Are you saying u want to use two datetime field and validate the date range with the two?

if yes, I havent try that on this component, but i believe the daterange vtype should work for this as well...

u may want to look at:
http://extjs.com/deploy/dev/examples/form/adv-vtypes.html

ChWild
4 Sep 2009, 6:09 AM
Hey,
i tried dis extension with Ext3.0 but it doesnt work there.
Any suggestions?

THX

Edit:
Maybe i found one error.
I replaced
Ext.extend(Ext.menu.DateTimeItem, Ext.menu.Adapter, {

onSelect : function(picker, date){


this.fireEvent("select", this, date, picker);

Ext.menu.DateTimeItem.superclass.handleClick.call(this);

}





});
with
Ext.extend(Ext.menu.DateTimeItem, {


onSelect : function(picker, date){

this.fireEvent("select", this, date, picker);

Ext.menu.DateTimeItem.superclass.handleClick.call(this);
}
});




I hope that's correct so.


Now i think the problem is here:

/*DateTime Item Menu*/
Ext.menu.DateTimeItem = function(config){Ext.menu.DateTimeItem.superclass.constructor.call(this, new Ext.DateTimePicker(config), config);

this.picker = this.component;

.
.
.






Firebug shows "Ext.menu.DateTimeItem.superclass is undefined" execption

ChWild
22 Sep 2009, 4:19 AM
Has nobody any solutions???

moon_hunter
24 Sep 2009, 6:58 PM
it's really good job,can ext3.o will expand this ?

teddyjas
24 Sep 2009, 7:22 PM
urgh I think I missed my own thread, just got notification for the last post...

here's the code for ext 3.0, is should have posted this... sorry for the prob...



/*
* DateTime field extension
* @author Teddy A Jasin - 2009
*
* note:
* extended from Ext.form.DateField
* format of datetimefield will take combination of dateFormat + ' ' + timeFormat (ie:'d-m-Y G:i A')
*
* usage:
* new Ext.ux.form.DateTimeField({fieldLabel: 'My Date',dateFormat:'d-m-Y',timeFormat:'G:i A'});
* or
* {xtype:'datetimefield',fieldLabel: 'My Date',dateFormat:'d-m-Y',timeFormat:'G:i A'}
*
* fixes:
* 15/04/09 - fix for bug date selection on grayed (non current month date) always set to '0:00'
* 22/07/09 - compatibility for Ext 3.0
*/
Ext.ns('Ext.ux.form');

/*DateTime Picker*/
Ext.DateTimePicker = Ext.extend(Ext.DatePicker, {

timeFormat:'g:i A',
timeLabel:'Time',
timeWidth:100,

initComponent:function() {
Ext.DateTimePicker.superclass.initComponent.call(this);
this.id = Ext.id();
},

onRender: function(container,position){

Ext.DateTimePicker.superclass.onRender.apply(this,arguments);

var table = Ext.get(Ext.DomQuery.selectNode('table tbody',container.dom));

var tfEl = Ext.DomHelper.insertBefore(table.first(),{tag:'tr',
children:[{tag:'td',cls:'x-date-bottom',html:this.timeLabel},{tag:'td',cls:'x-date-bottom ux-timefield', colspan:'2'}]},true);

this.tf.render(table.child('td.ux-timefield'));

if (this.getEl().parent('div.x-layer')){
var zindex = this.getEl().parent('div.x-layer').getStyle('z-index');
if(this.tf.list)
this.tf.list.setStyle('z-index',this.getEl().parent('div.x-layer').getStyle('z-index')+ 1000);
}
},

setValue : function(value){
var old = this.value;
if (!this.tf){
// create timefield
var timeConfig = Ext.apply({}, {
id:this.id + '-time'
,format:this.timeFormat || Ext.form.TimeField.prototype.format
,width:this.timeWidth
,fieldLabel:this.timeLabel
,selectOnFocus:true
,lazyInit: false
}, this.timeConfig);
this.tf = new Ext.form.TimeField(timeConfig);
this.tf.ownerCt = this;
delete(this.timeFormat);
this.tf.setValue(value);
}

this.value = this.getDateTime(value);

},

getDateTime: function(value){
if (this.tf){
var dt = new Date();
var timeval = this.tf.getValue();
value = Date.parseDate(value.format(this.dateFormat) + ' ' +timeval,this.format);
}
return value;
},

selectToday : function(){
if(this.todayBtn && !this.todayBtn.disabled){
this.value=this.getDateTime(new Date());
this.fireEvent("select", this, this.value);
}
}
});
Ext.reg('datetimepickerfield', Ext.DateTimePicker);
if (parseInt(Ext.version.substr(0, 1), 10) > 2) {
//ext 3.0
Ext.menu.DateTimeItem = Ext.DateTimePicker;
Ext.override(Ext.menu.DateMenu,{
initComponent: function(){
this.on('beforeshow', this.onBeforeShow, this);
if(this.strict = (Ext.isIE7 && Ext.isStrict)){
this.on('show', this.onShow, this, {single: true, delay: 20});
}
Ext.apply(this, {
plain: true,
showSeparator: false,
items: this.picker = new Ext.DatePicker(Ext.apply({
internalRender: this.strict || !Ext.isIE,
ctCls: 'x-menu-date-item'
}, this.initialConfig))
});
Ext.menu.DateMenu.superclass.initComponent.call(this);
this.relayEvents(this.picker, ["select"]);
this.on('select', this.menuHide, this);
if(this.handler){
this.on('select', this.handler, this.scope || this);
}
}
});
}else{
//ext 2.0 below
/*DateTime Item Menu*/
Ext.menu.DateTimeItem = function(config){
Ext.menu.DateTimeItem.superclass.constructor.call(this, new Ext.DateTimePicker(config), config);
this.picker = this.component;
this.addEvents('select');

this.picker.on("render", function(picker){
picker.getEl().swallowEvent("click");
picker.container.addClass("x-menu-date-item");
});

this.picker.on("select", this.onSelect, this);
};

Ext.extend(Ext.menu.DateTimeItem, Ext.menu.DateMenu, {
onSelect : function(picker, date){
this.fireEvent("select", this, date, picker);
Ext.menu.DateTimeItem.superclass.handleClick.call(this);
}
});
}


/*DateTime Menu*/
Ext.menu.DateTimeMenu = function(config){
Ext.menu.DateTimeMenu.superclass.constructor.call(this, config);
this.plain = true;
var di = new Ext.menu.DateTimeItem(config);
this.add(di);
this.picker = di;
this.relayEvents(di, ["select"]);

this.on('beforeshow', function(){
if(this.picker){
this.picker.hideMonthPicker(true);
}
}, this);
};
Ext.extend(Ext.menu.DateTimeMenu, Ext.menu.Menu, {
cls:'x-date-menu',
beforeDestroy : function() {
this.picker.destroy();
}
,hide : function(deep){
if (this.picker.tf.innerList){
if ((Ext.EventObject.within(this.picker.tf.innerList)) || (Ext.get(Ext.EventObject.getTarget())==this.picker.tf.innerList))
return false;
}
if(this.el && this.isVisible()){
this.fireEvent("beforehide", this);
if(this.activeItem){
this.activeItem.deactivate();
this.activeItem = null;
}
this.el.hide();
this.hidden = true;
this.fireEvent("hide", this);
}
if(deep === true && this.parentMenu){
this.parentMenu.hide(true);
}
}
});

/*DateTime Field*/
Ext.ux.form.DateTimeField = Ext.extend(Ext.form.DateField, {

dateFormat: 'd-m-Y'
,timeFormat: 'H:i'

,defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "off"}

,initComponent:function() {
Ext.ux.form.DateTimeField.superclass.initComponent.call(this);
this.format = this.dateFormat + ' ' + this.timeFormat;
this.afterMethod('afterRender',function(){
this.getEl().applyStyles('top:0');
});
}

,getValue : function(){
return this.parseDate(Ext.form.DateField.superclass.getValue.call(this)) || '';
}

,onTriggerClick : function(){
if(this.disabled){
return;
}
if(this.menu == null){
this.menu = new Ext.menu.DateTimeMenu();
}
Ext.apply(this.menu.picker, {
minDate : this.minValue,
maxDate : this.maxValue,
disabledDatesRE : this.ddMatch,
disabledDatesText : this.disabledDatesText,
disabledDays : this.disabledDays,
disabledDaysText : this.disabledDaysText,
format : this.format,
timeFormat: this.timeFormat,
dateFormat: this.dateFormat,
showToday : this.showToday,
minText : String.format(this.minText, this.formatDate(this.minValue)),
maxText : String.format(this.maxText, this.formatDate(this.maxValue))
});
if (this.menuEvents) {
//ext 3
this.menuEvents('on');
}
else {
//ext 2
this.menu.on(Ext.apply({}, this.menuListeners, {
scope:this
}));
}

this.menu.picker.setValue(this.getValue() || new Date());
this.menu.show(this.el, "tl-bl?");
}
});
Ext.reg('datetimefield', Ext.ux.form.DateTimeField);

moon_hunter
24 Sep 2009, 7:40 PM
hi,ted and all.i'm a newer.
i used you plugins,ext2.2,ff3 or IE6,copy them to a JS file named DateTimeField.js
then i use it in a formpanel,
but i have a problem like the follow image,
any advice ?:-/
THX

teddyjas
24 Sep 2009, 10:31 PM
hi,ted and all.i'm a newer.
i used you plugins,ext2.2,ff3 or IE6,copy them to a JS file named DateTimeField.js
then i use it in a formpanel,
but i have a problem like the follow image,
any advice ?:-/
THX

you are using ext 2.2, use the code provided in the first post?

moon_hunter
26 Sep 2009, 5:04 PM
you are using ext 2.2, use the code provided in the first post?

HI,ted,do you mean the first page one?

i copy it to DateTimeField.js and try again,but the problem still exist.it doesn't work..

any advice?:-/

THX,again.

moon_hunter
26 Sep 2009, 6:42 PM
i noticed the date icon doesm't work when i first click,alert the like the image on second click.

slawekst
27 Sep 2009, 3:02 AM
ted, I think, it can't work in 3.0 since you're using Ext.menu.Adapter

which is missing in 3.0.

moon_hunter
27 Sep 2009, 4:53 PM
ted, I think, it can't work in 3.0 since you're using Ext.menu.Adapter

which is missing in 3.0.

Agree....i have tested with failure....

by the way http://www.extjs.com/forum/showthread.php?t=21931 is useful,

but i still want to know where the problem is in using you plugin...~o)

Chief Vas
2 Dec 2009, 1:48 PM
I really would like to get a working DateTime picker.

Tried the code in post #27 using Ext 3.0. Got "H is undefined" in Firebug pointing to line 105. Saw posts saying Ext.menu.Adapter is not in Ext 3.0. On line 103. Changed "Ext.menu.Adapter" to "Ext.menu.Item" as it seemed natural that "Ext.menu.DateTimeItem" would extend "Ext.menu.Item".

Firebug was okay with that until you clicked on the button. Then you get "this.picker is undefined" for line 95. Putting a break point there and looking upstream on line 92 I see "this.picker = this.component;" mousing over both picker and component show them as undefined. "component" is not used anywhere else in the code that I can find, where does it come from?

I haven't done OOP in a long time, should "component" have been defined previously, is it inherited from somewhere else?

It looks like teddyjas put a fair amount of work into this. I'd like to think it worked before it was posted, has anybody gotten it to work on their system since? If so what did you change or what am I doing wrong?

teddyjas
2 Dec 2009, 6:45 PM
Hi guys...
truly sorry... I double checked the code in post #27 was not 3.0 compatible *wondering why I pasted that code*

anyway I hv put the correct code in post #27.

Please try again... sorry for the problems :) havent check this thread for a while :) ~o)

Chief Vas
4 Dec 2009, 5:38 AM
Awesome, looks great. Thanks for all your work to develop and share it.

snehat
20 Dec 2009, 8:41 PM
Hi All,

DateTimeField does not select time. It selects 00.00.00 always.
I am not able to identify the problem.

Thanks & Regards,
Sneha

thananjayans
21 Dec 2009, 8:20 PM
Hi All,

Setting the increment value in the config option of the time field doesn't give the desired output.


{
xtype:'datetimefield'
,id:'dtf2'
,fieldLabel:'Date & Time 2'
,anchor:'-18'
,timeFormat:'H:i'
,timeConfig: {
format :'H:i'
,increment :'60'
,altFormats:'H:i'
,allowBlank:true
}
,dateFormat:'Y/m/d'
,dateConfig: {
altFormats:'Y-m-d|Y-m-d|Y/m/d'
,allowBlank:true
}
}

Thanks,
Thanan

teddyjas
22 Dec 2009, 12:17 AM
Hi All,

Setting the increment value in the config option of the time field doesn't give the desired output.


{
xtype:'datetimefield'
,id:'dtf2'
,fieldLabel:'Date & Time 2'
,anchor:'-18'
,timeFormat:'H:i'
,timeConfig: {
format :'H:i'
,increment :'60'
,altFormats:'H:i'
,allowBlank:true
}
,dateFormat:'Y/m/d'
,dateConfig: {
altFormats:'Y-m-d|Y-m-d|Y/m/d'
,allowBlank:true
}
}Thanks,
Thanan

see the API, increment is a number not a string... try again and let me know

teddyjas
22 Dec 2009, 12:20 AM
Hi All,

DateTimeField does not select time. It selects 00.00.00 always.
I am not able to identify the problem.

Thanks & Regards,
Sneha


What browser r u using? and the ext version?

thebra
11 Jan 2010, 1:15 PM
Hello,
I am trying to get this plugin to work when using more than one on a form. I have a column layout with two Ext.ux.form.DateTimeField fields. The calendar picker only works on the first one that is clicked on and then the next field the calendar doesn't work anymore. You can still edit the field and the time works, just not the calendar. Should you be able to use more than one in a form? Thanks for the plugin BTW.

EDIT:
BTW I'm using FF 3.5.7 and Ext 3.1

teddyjas
11 Jan 2010, 7:13 PM
Yes of cos!. You can use more than one in a form.

I dun have FF 3.5 though, so I don't test this on FF3.5 yet, I tested on FF 3.0.17, but it should work on FF 3.5 also.

post ur script?

thebra
12 Jan 2010, 7:09 AM
This is the form that I am using. I've looked to see if it could be another UX that is causing a conflict but still have the issue when I comment out all other ux files. Thanks for your help.




form_rates_log_search = new Ext.FormPanel({
iconCls: 'icon_magnifier',
region: 'north',
labelAlign: 'left',
bodyStyle:'padding:5px',
style: 'margin-bottom: 10px;',
border:false,
frame: true,
map: {
key: Ext.EventObject.ENTER,
handler: submitRatesLogSearch
},
items: [{
layout:'column',
border:false,
items:[
{
width:230,
layout: 'form',
border:false,
labelWidth: 68,
items: [
dmstype = new Ext.ux.form.LovCombo({
fieldLabel: 'DMS Type',
hideOnSelect:false,
store: store_dms_types,
displayField:'DMS_TYPE',
valueField:'DMS_TYPE',
width: 140,
mode:'local',
editable: false
}),
dmstype_hidden = new Ext.form.Hidden({
name: 'dmstype_hidden'
})
]
},
{
width:235,
layout: 'form',
border:false,
labelWidth: 78,
items: [
dmsaccount = new Ext.form.TextField({
fieldLabel: 'DMS Account',
name: 'dmsaccount',
width:143
})
]
},
{
width:190,
layout: 'form',
border:false,
labelWidth: 48,
items: [
dmsid = new Ext.form.TextField({
fieldLabel: 'DMS ID',
name: 'dmsid',
width:120
})
]
},
{
width:200,
layout: 'form',
border:false,
labelWidth: 28,
items: [
vin = new Ext.form.TextField({
fieldLabel: 'VIN',
name: 'vin',
width:130
})
]
},
{
width:230,
layout: 'form',
border:false,
labelWidth: 68,
items: [
from_date = new Ext.ux.form.DateTimeField({
fieldLabel:'From',
value:new Date()
,anchor:'-18'
,timeFormat:'H:i'
,timeConfig: {
format :'H:i'
,increment :'60'
,altFormats:'H:i'
,allowBlank:true
}
,dateFormat:'m/d/Y'
,dateConfig: {
altFormats:'Y-m-d|Y-m-d|Y/m/d'
,allowBlank:true
}

})
]
},
{
width:230,
layout: 'form',
border:false,
labelWidth: 78,
style:'margin-right:5px;',
items: [
thru_date = new Ext.ux.form.DateTimeField({
fieldLabel:'Thru',
value:new Date()
,timeFormat:'H:i'
,timeConfig: {
format :'H:i'
,increment :'60'
,altFormats:'H:i'
,allowBlank:true
}
,dateFormat:'m/d/Y'
,dateConfig: {
altFormats:'Y-m-d|Y-m-d|Y/m/d'
,allowBlank:true
}
})
]
},
{
width:200,
layout: 'form',
border:false,
items: [
btn_filter = new Ext.Button({
text:'Search',
handler: submitRatesLogSearch,
iconCls: 'crystal_16x16_apps_search',
})
]
}]
}]
});

teddyjas
12 Jan 2010, 6:52 PM
I commented out the dms type component and it works perfectly.. both the date field appears properly.

any firebug error?

olivierpons
21 Jan 2010, 3:06 AM
Hi !
I've copied / pasted your sourcecode (in your post #27 which should be 3.0 compatible) in an external file, then saved it under "resources/ux.datetime.js".

If I try to include it like this (without changing my code), nothing is rendered in my window (nothing at all):


<script type="text/javascript" src="../ext-3.1.0/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="../ext-3.1.0/ext-all-debug.js"></script>
<script type="text/javascript" src="resources/TabCloseMenu.js"></script>
<script type="text/javascript" src="resources/ux.datetime.js></script>
<script type="text/javascript" src="resources/docs.js"></script>

If I remove it everything works fine.
The link to this file is here (http://labyz.fr/test/resources/ux.datetime.js)(so you can check if I'm doing something wrong).

Any idea?

BTW I'm using extjs 3.1.0, maybe this has something to do with it?

codeworx
23 Jan 2010, 6:51 AM
If you want to use the field as an editor in an Ext.grid.EditorGridPanel you have to modify the code linke this:



/*DateTime Field*/
Ext.ux.form.DateTimeField = Ext.extend(Ext.form.DateField, {

...

,initComponent:function() {
...
this.afterMethod('afterRender',function(){
...
// inset this code at this position to call the setValue function after field is rendered
this.setValueInitialized = true;
if (this.setValueInitializedValue) this.setValue(this.setValueInitializedValue);
});
}

,setValue : function (value) {
// delay setting of the value if field is not rendered jet
if (!this.setValueInitialized) {
this.setValueInitializedValue = value;
return;
}
// place some formatting code here like this: if (value.format) value = value.format('d.m.Y H:i');
// call setValue of parent class
Ext.form.DateField.superclass.setValue.call(this, value);
}

...

});

codeworx
23 Jan 2010, 7:00 AM
If you modify the value manually and then click the TriggerButton the calendar and the timefield did not recognize the manual change. Would be nice to have something like a setValue Event on the dropdown-fields fired if a manual change with a valid value is typed in.

(please excuse the bad english)

Chief Vas
28 Jan 2010, 8:37 AM
Trying to use this as an EditorGridPanel editor, I made the above changes per codeworx. The beginning of my "DateTime Field" section looks like this:


/*DateTime Field*/
Ext.ux.form.DateTimeField = Ext.extend(Ext.form.DateField, {

dateFormat: 'd-M-Y'
,timeFormat: 'H:i'

,defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "off"}

,initComponent:function() {
Ext.ux.form.DateTimeField.superclass.initComponent.call(this);
this.format = this.dateFormat + ' ' + this.timeFormat;
this.afterMethod('afterRender',function(){
this.getEl().applyStyles('top:0');
// Below two lines added to allow use as a grid field editor
this.setValueInitialized = true;
if (this.setValueInitializedValue) this.setValue(this.setValueInitializedValue);
});
}

// Below block added to allow use as a grid field editor
,setValue : function (value) {
// delay setting of the value if field is not rendered jet
if (!this.setValueInitialized) {
this.setValueInitializedValue = value;
return;
}
// place some formatting code here like this:
if (value.format) value = value.format('d.M.Y H:i');
// call setValue of parent class
Ext.form.DateField.superclass.setValue.call(this, value);
}
...

I kind of made the assumption the setValue function above was added within the Ext.ux.form.DateTimeField as shown above and not to modify the setValue function found within Ext.DateTimePicker up at line 50.

The problem I'm having is when the field is clicked to bring up the editor, FireBug returns

this.tf is undefined
this.tf.render(table.child('td.ux-timefield'));

for line #41

I am using Ext 3.0 if that matters.

Chief Vas
28 Jan 2010, 5:46 PM
I poked around a bit in FireBug before I left work.

I'm using the DateTimePicker in two ways, one in a FormPanel defined using an xtype, the other, which I just added, as an editor in a grid. Using FireBug if I place a break point at line #41, the line that contains "this.tf.render(table.child('td.ux-timefield'));" If I invoke the DateTimePicker in the form field when it hits the break point "this" contains a tf. However if I invoke the picker from the grid first "this" does not appear to have a tf.

Guess I'll be poking around more tomorrow to find where this.tf is coming or not coming from.

teddyjas
28 Jan 2010, 6:13 PM
coool!!!.... I haven't try this myself in a grid... I'll probably try this as well this weekend :)

codeworx
29 Jan 2010, 1:36 AM
@Chief Vas: I don’t know if it helps, but I attached my code (html and js) for you to see how I implemented it. It works fine on my environment.

Chief Vas
29 Jan 2010, 7:13 AM
Arrrrghhhh!!! Thanks codeworx. I opened your files and the first thing I looked at was to compare your datetimefield.js to what I have. The first few lines caught my eye, specifically the word "usage" in line #9 in the opening comments. "Wait a second, that's not what I'm calling it!" Go look at my editor setting and I'm calling it Ext.DateTimePicker. Change it to Ext.ux.form.DateTimeField as the comments say to use it and it works fine\:D/

So this was simply a case of my failure to read the instructions.:(

Thanks for the mod to allow it to be used in an editor grid. Now I just have to figure out how I want to validate the dates and times my users can now change.

ilevina
1 Feb 2010, 8:34 AM
Is this component working with Ext 3.0, getting error when trying to use with Ext.3.0.3
with the following line of code:

Ext.extend(Ext.menu.DateTimeItem, Ext.menu.Adapter, {
......

I think reason that in Ext 3 there is no Ext.menu.Adapter and every menu item is a container, so any suggestion on how to fix this problem ?


Irene

ilevina
1 Feb 2010, 12:19 PM
Is this component working with Ext 3.0, getting error when trying to use with Ext.3.0.3
with the following line of code:

Ext.extend(Ext.menu.DateTimeItem, Ext.menu.Adapter, {
......

I think reason that in Ext 3 there is no Ext.menu.Adapter and every menu item is a container, so any suggestion on how to fix this problem ?


Irene

Found updated code( that fix 3.0 compliance issue) in 27 post, it would be nice to move updated code in First post, since new version of component works in either environment (Ext 2 or Ext 3).

mrjoltcola
5 Feb 2010, 2:21 PM
Thanks for sharing.

A few issues I found make this control not quite usable. I'm using Ext 3.1

1) Modifying the time from the pick screen is not possible without picking the date again. Clicking outside the component to close it without reclicking the date does not apply the new time. So the user must reclick the date. This would not be so bad except for ... (2)

2) Today's day is always highlighted no matter which month you move to. So if I've selected a different month, the control highlights today's day, not the actual day in the timefield. So if I'm changing the time, I instinctively select the day that is highlighted, not the day in the field.

If I'm missing something let me know. Thanks.

apleshkov
7 Feb 2010, 10:07 AM
Hi all!

I'm using this control in my project based on ext 2.2.1 and I faced the same issues.
Also I found a more minor bug: a cell contains the switcher to a previous month is too wide.

So I fixed all these issues and here is my version (my changes marked with "@apleshkov" blocks):


/*
* DateTime field extension
* @author Teddy A Jasin - 2009
*
* note:
* extended from Ext.form.DateField
* format of datetimefield will take combination of dateFormat + ' ' + timeFormat (ie:'d-m-Y G:i A')
*
* usage:
* new Ext.ux.form.DateTimeField({fieldLabel: 'My Date',dateFormat:'d-m-Y',timeFormat:'G:i A'});
* or
* {xtype:'datetimefield',fieldLabel: 'My Date',dateFormat:'d-m-Y',timeFormat:'G:i A'}
*
* fixes:
* 15/04/09 - fix for bug date selection on grayed (non current month date) always set to '0:00'
*
* fixes by Andrew Pleshkov:
* 07/02/10 - time selection from the pick screen, date highlighting, width of a cell contains the switcher of a previous month
*/
Ext.ns('Ext.ux.form');

/*DateTime Picker*/
Ext.DateTimePicker = Ext.extend(Ext.DatePicker, {

timeFormat:'g:i A'
,timeLabel:'Time'
,timeWidth:100

,initComponent:function() {
Ext.DateTimePicker.superclass.initComponent.call(this);
this.id = Ext.id();
}

,onRender: function(container,position){

Ext.DateTimePicker.superclass.onRender.apply(this,arguments);

var table = Ext.get(Ext.DomQuery.selectNode('table tbody',container.dom));

/*var tfEl = Ext.DomHelper.insertBefore(table.first(),{tag:'tr',
children:[{tag:'td',cls:'x-date-bottom',html:this.timeLabel},{tag:'td',cls:'x-date-bottom ux-timefield', colspan:'2'}]},true);*/
// @apleshkov {{{
Ext.DomHelper.insertBefore(
table.first(),
{
tag: 'tr',
children: [
{
tag: 'td',
colspan: '3',
cls: 'x-date-bottom',
children: [
{
tag: 'table',
cls: 'x-date-picker',
style: 'background: transparent !important',
children: [
{
tag: 'tbody',
children: [
{
tag: 'tr',
children: [
{
tag: 'td',
html: this.timeLabel
},
{
tag: 'td',
cls: 'ux-timefield'
},
{
tag: 'td',
cls: 'x-date-right',
style: 'text-align: left: !important; background: transparent !important',
html: '<a class="ux-timefield-button" href="#"> </a>'
}
]
}
]
}
]
}
]
}
]
},
true
);

this._selTimeBtn = table.child('a.ux-timefield-button');
this._selTimeBtn.on('click', this.handleTimeButtonClick, this);
// }}}

this.tf.render(table.child('td.ux-timefield'));

if (this.getEl().parent('div.x-layer')){
var zindex = this.getEl().parent('div.x-layer').getStyle('z-index');
if(this.tf.list)
this.tf.list.setStyle('z-index',this.getEl().parent('div.x-layer').getStyle('z-index')+ 1000);
}
}

// @apleshkov {{{
,handleTimeButtonClick: function (e) {
e.stopEvent();
var t = this.el.child('table.x-date-inner td.x-date-selected a').dom;
this.handleDateClick(e, t);
}
// }}}

,setValue : function(value){
var old = this.value;
if (!this.tf){
// create timefield
var timeConfig = Ext.apply({}, {
id:this.id + '-time'
,format:this.timeFormat || Ext.form.TimeField.prototype.format
,width:this.timeWidth
,fieldLabel:this.timeLabel
,selectOnFocus:true
,lazyInit: false
}, this.timeConfig);
this.tf = new Ext.form.TimeField(timeConfig);
this.tf.ownerCt = this;
delete(this.timeFormat);
this.tf.setValue(value);
}

this.value = this.getDateTime(value);

// @apleshkov {{{
if (this.el) {
this.update(this.value.clone(), true);
}
// }}}
}

,getDateTime: function(value){
if (this.tf){
var dt = new Date();
var timeval = this.tf.getValue();
value = Date.parseDate(value.format(this.dateFormat) + ' ' +timeval,this.format);
}
return value;
}

,selectToday : function(){
if(this.todayBtn && !this.todayBtn.disabled){
this.value=this.getDateTime(new Date());
this.fireEvent("select", this, this.value);
}
}

// @apleshkov {{{
,beforeDestroy: function () {
if (this.rendered) {
Ext.destroy(this._selTimeBtn);
}
Ext.DateTimePicker.superclass.beforeDestroy.call(this);
}
// }}}

});
Ext.reg('datetimepickerfield', Ext.DateTimePicker);

/*DateTime Item Menu*/
Ext.menu.DateTimeItem = function(config){
Ext.menu.DateTimeItem.superclass.constructor.call(this, new Ext.DateTimePicker(config), config);
this.picker = this.component;
this.addEvents('select');

this.picker.on("render", function(picker){
picker.getEl().swallowEvent("click");
picker.container.addClass("x-menu-date-item");
});

this.picker.on("select", this.onSelect, this);
};

Ext.extend(Ext.menu.DateTimeItem, Ext.menu.Adapter, {
onSelect : function(picker, date){
this.fireEvent("select", this, date, picker);
Ext.menu.DateTimeItem.superclass.handleClick.call(this);
}
});

/*DateTime Menu*/
Ext.menu.DateTimeMenu = function(config){
Ext.menu.DateTimeMenu.superclass.constructor.call(this, config);
this.plain = true;
var di = new Ext.menu.DateTimeItem(config);
this.add(di);
this.picker = di.picker;
this.relayEvents(di, ["select"]);

this.on('beforeshow', function(){
if(this.picker){
this.picker.hideMonthPicker(true);
}
}, this);
};
Ext.extend(Ext.menu.DateTimeMenu, Ext.menu.Menu, {
cls:'x-date-menu',
beforeDestroy : function() {
this.picker.destroy();
}
,hide : function(deep){
if (this.picker.tf.innerList){
if ((Ext.EventObject.within(this.picker.tf.innerList)) || (Ext.get(Ext.EventObject.getTarget())==this.picker.tf.innerList))
return false;
}
if(this.el && this.isVisible()){
this.fireEvent("beforehide", this);
if(this.activeItem){
this.activeItem.deactivate();
this.activeItem = null;
}
this.el.hide();
this.hidden = true;
this.fireEvent("hide", this);
}
if(deep === true && this.parentMenu){
this.parentMenu.hide(true);
}
}
});

/*DateTime Field*/
Ext.ux.form.DateTimeField = Ext.extend(Ext.form.DateField, {

dateFormat: 'd-m-Y'
,timeFormat: 'H:i'
,timeLabel:'Time'

,defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "off"}

,initComponent:function() {
Ext.ux.form.DateTimeField.superclass.initComponent.call(this);
this.format = this.dateFormat + ' ' + this.timeFormat;
this.afterMethod('afterRender',function(){
this.getEl().applyStyles('top:0');
});
}

,getValue : function(){
return this.parseDate(Ext.form.DateField.superclass.getValue.call(this)) || '';
}

,onTriggerClick : function(){
if(this.disabled){
return;
}
if(this.menu == null){
this.menu = new Ext.menu.DateTimeMenu();
}
Ext.apply(this.menu.picker, {
minDate : this.minValue,
maxDate : this.maxValue,
disabledDatesRE : this.ddMatch,
disabledDatesText : this.disabledDatesText,
disabledDays : this.disabledDays,
disabledDaysText : this.disabledDaysText,
format : this.format,
timeFormat: this.timeFormat,
timeLabel: this.timeLabel, // @apleshkov
dateFormat: this.dateFormat,
showToday : this.showToday,
minText : String.format(this.minText, this.formatDate(this.minValue)),
maxText : String.format(this.maxText, this.formatDate(this.maxValue))
});
this.menu.on(Ext.apply({}, this.menuListeners, {
scope:this
}));
this.menu.picker.setValue(this.getValue() || new Date());
this.menu.show(this.el, "tl-bl?");
}
});
Ext.reg('datetimefield', Ext.ux.form.DateTimeField);

Sejal
22 Feb 2010, 1:34 AM
Hi

I m using Extjs 3.1.1 and getting error "G is undefined" at line no 182 of file
May i know wht i am missing

Thanks

apleshkov
24 Feb 2010, 11:44 AM
@Sejal
Is there "your" error in my file or the original one? I'm using this component for ext 2.*, so I don't know how he works in ext 3.*.

ilevina
24 Feb 2010, 12:55 PM
Andrey's code changes works in Ext 3.03 as well, just in case anybody interested using it.
Thanks for sharing a fix.


Irene

DanielT
22 Mar 2010, 2:56 PM
I'm also getting the error 'G is undefined' in ExtJS 3.2 beta.

jmariani
11 Apr 2010, 11:14 AM
On Ext 3.2 Final, got this error:

sp is undefined

Line 237

Error happens while calling the following during field initialization:



Ext.extend(Ext.menu.DateTimeItem, Ext.menu.Adapter, {
182 onSelect : function(picker, date){
183 this.fireEvent("select", this, date, picker);
184 Ext.menu.DateTimeItem.superclass.handleClick.call(this);
185 }
186});

apleshkov
12 Apr 2010, 9:04 AM
There is no Ext.menu.Adapter in ExtJS 3.2: http://www.extjs.com/deploy/dev/docs/

thatcoder
22 Apr 2010, 5:23 PM
any 3.2 fixes?

ilevina
30 Apr 2010, 11:52 AM
Hi Adrey,

Having an issue with Ext 3.2.0, Today button is not shown in IE. Works fine in FF.
Any idea on how to fix IE issue?

Thx,

Irene

apleshkov
30 Apr 2010, 1:04 PM
Hi Irene,

IE 7/8 or both?

ilevina
30 Apr 2010, 1:07 PM
Using IE 7.05 in my dev environment

apleshkov
2 May 2010, 1:12 AM
I think that this component needs to be rewritten for 3.2 without any reverse compatibility with older versions of ExtJS, because of changes in DatePicker, which uses in DateTimeField with some modifications.

apleshkov
4 May 2010, 12:37 AM
http://www.extjs.com/forum/showthread.php?98292-DateTime-field-again-and-again-)

mayurid
9 Jun 2010, 11:51 PM
hi..
thanx in advance.

m new to extjs

i want current date to be selected in datefield i e without clicking the calender,when the grid is looaded my datefield is on tbar of grid

apleshkov
10 Jun 2010, 10:26 AM
mb smth like this?



new Ext.ux.form.DateTimeField({
value: new Date() // current date & time by default
// other config parameters
});

gurumiujiza
15 Mar 2011, 1:41 PM
Im getting an error that says "Ext.ux.form.DateTimeField is not a constructor". Is there anything that I might be doing wrong ? From firebug i can see that the extension file is included correctly.

apleshkov
15 Mar 2011, 11:32 PM
@gurumiujiza Hi,

Perhaps you may try this (http://www.sencha.com/forum/showthread.php?98292-DateTime-field-again-and-again-)) out.