PDA

View Full Version : Ext.ux.DateTimeField - DateTimePicker for ext4, also DateTimeMenu, TimePickerField



wzl002
15 Jun 2011, 8:38 PM
26595

Add a time spinner to the DatePicker.

From picture left, there are DateTimeMenu, TimePickerField, DateTimeField, a simple example.js for this is contained in the zip.

Any improve or bug report Welcome!


update
-29/06/2011 bug resolve: [Creating multiple instances of the DateTimeField results in all time fields appearing within the first field.]
Thank emrejen and zombeerose!


update
-27/04/2012 upgrade for 4.1.0-gpl, Now it can work at 4.1.0 and GridColumn Editor.
-27/04/2012 the time part in init value can work now.
-27/04/2012 the Ext.ux.form.TimePickerField could get a Date type init value.
-27/04/2012 fix the format didn't work bug. BUT the format for time part 'H:i:s' is immutable.
Thank Nicname, janiceh, jonaldomo.
Any improve or bug report Welcome!


attachment remark:
datetime_2.zip for Ext-4.0.x
datetime_4.1.0.zip for Ext-4.1.0-gpl

the js files should be import in order:
<script type="text/javascript" src="..../UX_TimePickerField.js"></script>
<script type="text/javascript" src="..../UX_DateTimePicker.js"></script>
<script type="text/javascript" src="..../UX_DateTimeField.js"></script>
<script type="text/javascript" src="..../UX_DateTimeMenu.js"></script>

morfeusz
16 Jun 2011, 12:26 AM
Very good and useful extension.
Thanks!

emrejen
22 Jun 2011, 10:19 PM
I have included all the files, and getting:
ext-all-debug.js:4786An uncaught error was raised with the following data:
ext-all-debug.js:4787
Object
msg: "Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Ext.ux.DateTimePicker"
sourceClass: "Ext.Loader"
sourceMethod: "require"
__proto__: Object
ext-all-debug.js:4793Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Ext.ux.DateTimePicker
ext-all-debug.js:4800Uncaught Error
Ext.Error.Ext.extend.statics.raiseext-all-debug.js:4800
Loader.Ext.Loader.requireext-all-debug.js:4403
Manager.registerPostprocessor.itemsext-all-debug.js:4692
Ext.Class.Class.processext-all-debug.js:3023
Ext.Class.Class.processext-all-debug.js:3024
Ext.Class.Classext-all-debug.js:3028
Manager.Ext.ClassManager.createext-all-debug.js:3582
(anonymous function)ext-all-debug.js:1364
(anonymous function)DateTimeField.js:1
ext-all-debug.js:3520[Ext.ClassManager] Overriding existing alias: 'widget.timepicker' of: 'Ext.picker.Time' with: 'Ext.ux.form.TimePickerField'. Be sure it's intentional.
ext-all-debug.js:3712[Ext.Loader] Synchronously loading 'Ext.ux.form.DateTimeField'; consider adding Ext.require('Ext.ux.form.DateTimeField') above Ext.onReady
ext-all-debug.js:4786An uncaught error was raised with the following data:
ext-all-debug.js:4787
Object
ext-all-debug.js:4793Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Ext.ux.form.DateTimeField
ext-all-debug.js:4800Uncaught Error
Ext.Error.Ext.extend.statics.raiseext-all-debug.js:4800
Loader.Ext.Loader.requireext-all-debug.js:4403
Loader.Ext.Loader.syncRequireext-all-debug.js:4351
(anonymous function)ext-all-debug.js:1364
Manager.Ext.ClassManager.instantiateext-all-debug.js:3716
(anonymous function)ext-all-debug.js:1364
(anonymous function)fabrix_text.jsp:16
isEventext-all-debug.js:10138
call

emrejen
22 Jun 2011, 10:37 PM
Found the issue

emrejen
22 Jun 2011, 11:50 PM
26595

Add a time spinner to the DatePicker.

From picture left, there are DateTimeMenu, TimePickerField, DateTimeField, a simple example.js for this is contained in the zip.

Any improve or bug report Welcome!

I think that I found a bug
this widget works well, and nice if it's the onl26712y of it's kind on the page
But once, you add more then one, then 2 things happen.
1. when you click on the first one, it opens nice, and when you click on it again, you have 2 time object inside the widget


Otherwise this looks like a very nice work, but some ironing needs to be done
2. the 2nd one that you try to open will open as a normal data object, and not the new shiny one.

zombeerose
23 Jun 2011, 6:39 AM
I can confirm the first issue reported by emrejen. Creating multiple instances of the DateTimeField results in all time fields appearing within the first DTF.

Thanks for the ux. Anxious for a patch

jonaldomo
24 Jun 2011, 6:02 AM
Will this work in as an editor in a grid for a datetime object?

Thanks.

wzl002
28 Jun 2011, 10:36 PM
I can confirm the first issue reported by emrejen. Creating multiple instances of the DateTimeField results in all time fields appearing within the first DTF.


Thank you!
I had edited the post and uploaded a new zip.
I'm very sorry for this bug because I had found and resolve this before I post it, but I made a big mistake when upload the js files.

Expect more feedback. Thanks!

wzl002
28 Jun 2011, 10:38 PM
Will this work in as an editor in a grid for a datetime object?

I didn't test that, you can try it and if there are any bug, I will be glad to help.

janiceh
29 Jun 2011, 2:50 PM
Thanks for this extension, it's very useful. Just that I found if the datetimefield is set for example to 05/05/2011 05:05 PM, when I open the picker. The date is set correctly to 05/05/2011, but the time is set to 12:00 instead of 17:05.

jonaldomo
3 Jul 2011, 9:09 PM
I didn't test that, you can try it and if there are any bug, I will be glad to help.

Thanks, I really appreciate it. My datetime column looks like this:

},{
header: 'Begin Eff',
readOnly: false,
dataIndex: 'beginEffectiveDate',
sortable: true,
flex: 1,
hidden: false,
renderer: Ext.util.Format.dateRenderer('m/d/Y H:i:s'),
editor: {
xtype: 'datetimepicker'

}

and I am getting the following errors:
Uncaught TypeError: Cannot read property 'dom' of undefined ext-all-debug.js:21926
Uncaught TypeError: Object #<Object> has no method 'setZIndex'

Nickname
10 Jul 2011, 2:17 AM
Hi, nice UX!

Played a bit but there are some problems specially with the timeField. I don't know if there is a simple solution.

if initialValue is instanceof Date ux is broken

Problem is in the TimePickerField. initialValue (and I think also in setValue() ) are expected to be strings with ":" as seperator. If you pass "new Date()" as initialValue this will fail.

This is the smallest and simple patch I found:

in Ext.ux.form.TimePickerField rewrite the function _valueSplit:



_valueSplit: function(v) {
if(v instanceof Date) {
v = Ext.Date.format(v, 'H:i:s');
}
var split = v.indexOf(':') > -1 ? v.split(':') : false;
return {
h: split.length > 0 ? split[0] : 0,
m: split.length > 1 ? split[1] : 0,
s: split.length > 2 ? split[2] : 0
};
},


_valueSplit is called by initComponent and setValue, should be both fixed!?


Next thing I found is: if there is an initialvalue the "datetimefield" visible initual value is only the date, not the date + time.

I solved this, by swapping the format creation before the callParent call in Ext.ux.form.DateTimeField::initComponent




initComponent: function() {
this.format = this.dateFormat + ' ' + this.timeFormat;
this.callParent();
// this.format = this.dateFormat + ' ' + this.timeFormat; set before callParent to have datetime initialvalue
},




Next: if you have an initial Date value and open the DateTimePicker from the DateTimeField the date is correctly marked in the calendar, but the time fields below the calender always point to "now".
When creating the picker, I added the value as config option



Ext.define('Ext.ux.form.DateTimeField', {
// ...
// overwrite
createPicker: function() {
var me = this, format = Ext.String.format;

return Ext.create('Ext.ux.DateTimePicker', {
ownerCt: me.ownerCt,
renderTo: document.body,
floating: true,
hidden: true,
focusOnShow: true,
value: me.getValue(), // <-- line added
// ....



But now the correct date isn't selected in the calendar anymore (its the correct year and month displayed, but the day is not highlighted in the calendar). Did not figure this one out.

Maybe this modifations breaks some other stuff, but I do not have good testcases.

wki01
18 Jan 2012, 1:23 AM
It does not work with 4.1 Beta 1
some fixes?
thanks

navy
3 Feb 2012, 2:40 AM
The split-function in TimePickerField simply should be:


_valueSplit: function(v) {
return {
h: v.hour,
m: v.minute,
s: 0
};
},

Thanx for the DateTimePicker at all. Saved me a lot of time.

wki01
3 Feb 2012, 6:33 AM
It does not workwith4.1 Beta2
thanks

malstroem
12 Mar 2012, 12:02 PM
Hi there,
I am facing problems with Ext 4.1 (beta2), too.
I think this is due to changes in the "onRender" method...
Does anybody else use the DateTimeField with the latest release?

Edit:
I fiddled around a little bit - yet without success.
navy´s Bugfix for Beta1 did not change the issue.
I keep getting an error in FireBug:

container is null
me.container = container.dom ? container : Ext.get(container);

zombeerose
12 Mar 2012, 12:26 PM
Another option is http://www.sencha.com/forum/showthread.php?134345-Ext.ux.form.field.DateTime

malstroem
12 Mar 2012, 12:30 PM
thks zombeerose - i´ll check that out!

xuxigang
4 Apr 2012, 7:17 PM
Can't work in extjs4.1 RC

immobilia
26 Apr 2012, 5:12 AM
I confirm bug with Ext JS 4.1

in TimePickerField.sj on callSpinnersFunction method, line :
this.spinners[i][funName](args);
where :
funName = "render"
args = null // here is error ?

args is set by TimePickerField.onRender, but getter return null


var spinnerWrap = Ext.get(Ext.DomQuery.selectNode('div', this.el.dom));
this.callSpinnersFunction('render', spinnerWrap);



call by DateTimePicker.js on onRender method , line :
this.timefield.render(this.el.child('div div.ux-timefield'));

When clicking on DateTimePicker, that result a error : a is null in "ext-all.js"referring to :


var Ext=Ext||{};Ext._startTime=new Date().getTime();(function(){var h=this,a=Object.prototype,j=a.toString,b=true,g={toString:1},e=function(){},d=function(){var i=d.caller.caller;return i.$owner.prototype[i.$name].apply(this,arguments)},c;Ext.global=h;for(c in g){b=null}if(b){b=["hasOwnProperty","valueOf","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","constructor"]}Ext.enumerables=b;Ext.apply=function(o,n,q){if(q){Ext.apply(o,q)}if(o&&n&&typeof n==="object"){var p,m,l;for(p in n){o[p]=n[p]}if(b){for(m=b.length;m--;){l=b[m];if(n.hasOwnProperty(l)){o[l]=n[l]}}}}return o};Ext.buildSettings=Ext.apply({baseCSSPrefix:"x-",scopeResetCSS:false},Ext.buildSettings||{});Ext.apply(Ext,{name:Ext.sandboxName||"Ext",emptyFn:e,emptyString:new String(),baseCSSPrefix:Ext.buildSettings.baseCSSPrefix,applyIf:function(k,i){var l;if(k){for(l in i){if(k[l]===undefined){k[l]=i[l]}}}return k},iterate:function(i,l,k){if(Ext.isEmpty(i)){return}if(k===undefined){k=i}if(Ext.isIterable(i)){Ext.Array.each.call(Ext.Array,i,l,k)}else{Ext.Object.each.call(Ext.Object,i,l,k)}}});Ext.apply(Ext,{extend:(function(){var i=a.constructor,k=function(n){for(var l in n){if(!n.hasOwnProperty(l)){continue}this[l]=n[l]}};return function(l,q,o){if(Ext.isObject(q)){o=q;q=l;l=o.constructor!==i?o.constructor:function(){q.apply(this,arguments)}}var n=function(){},m,p=q.prototype;n.prototype=p;m=l.prototype=new n();m.constructor=l;l.superclass=p;if(p.constructor===i){p.constructor=q}l.override=function(r){Ext.override(l,r)};m.override=k;m.proto=m;l.override(o);l.extend=function(r){return Ext.extend(l,r)};return l}}()),override:function(m,n){if(m.$isClass){m.override(n)}else{if(typeof m=="function"){Ext.apply(m.prototype,n)}else{var i=m.self,k,l;if(i&&i.$isClass){for(k in n){if(n.hasOwnProperty(k)){l=n[k];if(typeof l=="function"){l.$name=k;l.$owner=i;l.$previous=m.hasOwnProperty(k)?m[k]:d}m[k]=l}}}else{Ext.apply(m,n)}}}return m}});Ext.apply(Ext,{valueFrom:function(l,i,k){return Ext.isEmpty(l,k)?i:l},typeOf:function(k){var i,l;if(k===null){return"null"}i=typeof k;if(i==="undefined"||i==="string"||i==="number"||i==="boolean"){return i}l=j.call(k);switch(l){case"[object Array]":return"array";case"[object Date]":return"date";case"[object Boolean]":return"boolean";case"[object Number]":return"number";case"[object RegExp]":return"regexp"}if(i==="function"){return"function"}if(i==="object"){if(k.nodeType!==undefined){if(k.nodeType===3){return(/\S/).test(k.nodeValue)?"textnode":"whitespace"}else{return"element"}}return"object"}},isEmpty:function(i,k){return(i===null)||(i===undefined)||(!k?i==="":false)||(Ext.isArray(i)&&i.length===0)},isArray:("isArray" in Array)?Array.isArray:function(i){return j.call(i)==="[object Array]"},isDate:function(i){return j.call(i)==="[object Date]"},isObject:(j.call(null)==="[object Object]")?function(i){return i!==null&&i!==undefined&&j.call(i)==="[object Object]"&&i.ownerDocument===undefined}:function(i){return j.call(i)==="[object Object]"},isSimpleObject:function(i){return i instanceof Object&&i.constructor===Object},isPrimitive:function(k){var i=typeof k;return i==="string"||i==="number"||i==="boolean"},isFunction:(typeof document!=="undefined"&&typeof document.getElementsByTagName("body")==="function")?function(i){return j.call(i)==="[object Function]"}:function(i){return typeof i==="function"},isNumber:function(i){return typeof i==="number"&&isFinite(i)},isNumeric:function(i){return !isNaN(parseFloat(i))&&isFinite(i)},isString:function(i){return typeof i==="string"},isBoolean:function(i){return typeof i==="boolean"},isElement:function(i){return i?i.nodeType===1:false},isTextNode:function(i){return i?i.nodeName==="#text":false},isDefined:function(i){return typeof i!=="undefined"},isIterable:function(k){var i=typeof k,l=false;if(k&&i!="string"){if(i=="function"){if(Ext.isSafari){l=k instanceof NodeList||k instanceof HTMLCollection}}else{l=true}}return l?k.length!==undefined:false}});Ext.apply(Ext,{clone:function(q){var p,o,m,l,r,n;if(q===null||q===undefined){return q}if(q.nodeType&&q.cloneNode){return q.cloneNode(true)}p=j.call(q);if(p==="[object Date]"){return new Date(q.getTime())}if(p==="[object Array]"){o=q.length;r=[];while(o--){r[o]=Ext.clone(q[o])}}else{if(p==="[object Object]"&&q.constructor===Object){r={};for(n in q){r[n]=Ext.clone(q[n])}if(b){for(m=b.length;m--;){l=b[m];r[l]=q[l]}}}}return r||q},getUniqueGlobalNamespace:function(){var l=this.uniqueGlobalNamespace,k;if(l===undefined){k=0;do{l="ExtBox"+(++k)}while(Ext.global[l]!==undefined);Ext.global[l]=Ext;this.uniqueGlobalNamespace=l}return l},functionFactoryCache:{},cacheableFunctionFactory:function(){var o=this,l=Array.prototype.slice.call(arguments),k=o.functionFactoryCache,i,m,n;if(Ext.isSandboxed){n=l.length;if(n>0){n--;l[n]="var Ext=window."+Ext.name+";"+l[n]}}i=l.join("");m=k[i];if(!m){m=Function.prototype.constructor.apply(Function.prototype,l);k[i]=m}return m},functionFactory:function(){var l=this,i=Array.prototype.slice.call(arguments),k;if(...xtCell})}},focusContextCell:function(){var a=this.getEditor(this.context.colIdx);if(a&&a.focus){a.focus()}},cancelEdit:function(){var g=this,e=g.getForm(),a=e.getFields(),b=a.items,d=b.length,c;g.hide();e.clearInvalid();for(c=0;c<d;c++){b[c].suspendEvents()}e.reset();for(c=0;c<d;c++){b[c].resumeEvents()}},completeEdit:function(){var b=this,a=b.getForm();if(!a.isValid()){return}a.updateRecord(b.context.record);b.hide();return true},onShow:function(){this.callParent(arguments);this.reposition()},onHide:function(){var a=this;a.callParent(arguments);if(a.tooltip){a.hideToolTip()}if(a.context){a.context.view.focus();a.context=null}},isDirty:function(){var b=this,a=b.getForm();return a.isDirty()},getToolTip:function(){return this.tooltip||(this.tooltip=new Ext.tip.ToolTip({cls:Ext.baseCSSPrefix+"grid-row-editor-errors",title:this.errorsText,autoHide:false,closable:true,closeAction:"disable",anchor:"left"}))},hideToolTip:function(){var a=this,b=a.getToolTip();if(b.rendered){b.disable()}a.hiddenTip=false},showToolTip:function(){var c=this,d=c.getToolTip(),a=c.context,e=Ext.get(a.row),b=a.grid.view.el;d.setTarget(e);d.showAt([-10000,-10000]);d.update(c.getErrors());d.mouseOffset=[b.getWidth()-e.getWidth()+c.lastScrollLeft+15,0];c.repositionTip();d.doLayout();d.enable()},repositionTip:function(){var i=this,j=i.getToolTip(),c=i.context,l=Ext.get(c.row),k=c.grid.view.el,e=k.getHeight(),g=i.lastScrollTop,h=g+e,b=l.getHeight(),a=l.dom.offsetTop,d=a+b;if(d>g&&a<h){j.show();i.hiddenTip=false}else{j.hide();i.hiddenTip=true}},getErrors:function(){var d=this,e=!d.autoCancel&&d.isDirty()?d.dirtyText+"<br />":"",h=[],a=d.query(">[isFormField]"),c=a.length,b;function g(i){return"<li>"+i+"</li>"}for(b=0;b<c;b++){h=h.concat(Ext.Array.map(a[b].getErrors(),g))}return e+"<ul>"+h.join("")+"</ul>"},beforeDestroy:function(){Ext.destroy(this.floatingButtons,this.tooltip);this.callParent()}});Ext.define("Ext.grid.plugin.RowEditing",{extend:"Ext.grid.plugin.Editing",alias:"plugin.rowediting",requires:["Ext.grid.RowEditor"],editStyle:"row",autoCancel:true,errorSummary:true,constructor:function(){var a=this;a.callParent(arguments);if(!a.clicksToMoveEditor){a.clicksToMoveEditor=a.clicksToEdit}a.autoCancel=!!a.autoCancel},init:function(a){this.callParent([a])},destroy:function(){var a=this;Ext.destroy(a.editor);a.callParent(arguments)},startEdit:function(a,d){var c=this,b=c.getEditor();if((c.callParent(arguments)!==false)&&(b.beforeEdit()!==false)){b.startEdit(c.context.record,c.context.column);return true}return false},cancelEdit:function(){var a=this;if(a.editing){a.getEditor().cancelEdit();a.callParent(arguments)}},completeEdit:function(){var a=this;if(a.editing&&a.validateEdit()){a.editing=false;a.fireEvent("edit",a,a.context)}},validateEdit:function(){var k=this,h=k.editor,b=k.context,g=b.record,m={},d={},j=h.items.items,i,c=j.length,a,l;for(i=0;i<c;i++){l=j[i];a=l.name;m[a]=l.getValue();d[a]=g.get(a)}Ext.apply(b,{newValues:m,originalValues:d});return k.callParent(arguments)&&k.getEditor().completeEdit()},getEditor:function(){var a=this;if(!a.editor){a.editor=a.initEditor()}return a.editor},initEditor:function(){var h=this,c=h.grid,i=h.view,d=c.headerCt,e=["saveBtnText","cancelBtnText","errorsText","dirtyText"],j,a=e.length,g={autoCancel:h.autoCancel,errorSummary:h.errorSummary,fields:d.getGridColumns(),hidden:true,editingPlugin:h,renderTo:i.el},k;for(j=0;j<a;j++){k=e[j];if(Ext.isDefined(h[k])){g[k]=h[k]}}return Ext.create("Ext.grid.RowEditor",g)},initEditTriggers:function(){var a=this,b=a.clicksToMoveEditor===1?"click":"dblclick";a.callParent(arguments);if(a.clicksToMoveEditor!==a.clicksToEdit){a.mon(a.view,"cell"+b,a.moveEditorByClick,a)}},addHeaderEvents:function(){var a=this;a.callParent();a.mon(a.grid.headerCt,{scope:a,columnresize:a.onColumnResize,columnhide:a.onColumnHide,columnshow:a.onColumnShow,columnmove:a.onColumnMove})},startEditByClick:function(){var a=this;if(!a.editing||a.clicksToMoveEditor===a.clicksToEdit){a.callParent(arguments)}},moveEditorByClick:function(){var a=this;if(a.editing){a.superclass.onCellClick.apply(a,arguments)}},onColumnAdd:function(a,c){if(c.isHeader){var d=this,b;d.initFieldAccessors(c);b=d.editor;if(b&&b.onColumnAdd){b.onColumnAdd(c)}}},onColumnRemove:function(a,c){if(c.isHeader){var d=this,b=d.getEditor();if(b&&b.onColumnRemove){b.onColumnRemove(c)}d.removeFieldAccessors(c)}},onColumnResize:function(a,d,c){if(d.isHeader){var e=this,b=e.getEditor();if(b&&b.onColumnResize){b.onColumnResize(d,c)}}},onColumnHide:function(a,c){var d=this,b=d.getEditor();if(b&&b.onColumnHide){b.onColumnHide(c)}},onColumnShow:function(a,c){var d=this,b=d.getEditor();if(b&&b.onColumnShow){b.onColumnShow(c)}},onColumnMove:function(a,d,c,g){var e=this,b=e.getEditor();if(b&&b.onColumnMove){b.onColumnMove(d,c,g)}},setColumnField:function(b,d){var c=this,a=c.getEditor();a.removeField(b);c.callParent(arguments);c.getEditor().setField(b)}});Ext._endTime=new Date().getTime();if(Ext._beforereadyhandler){Ext._beforereadyhandler()};

wzl002
27 Apr 2012, 1:31 AM
I had update the thread and put the upgrade version for ext-4.1.0.

All the bugs in replays had be fixed, I guess:>.


Thanks again and welcome improve replay.

immobilia
27 Apr 2012, 4:30 AM
Thank you for your prompt patch. Now is working fine with ext-4.1.0

pkli
16 May 2012, 4:00 AM
Hi,

Great work ! Thanks.

I'm using it in a grid cell editor but there is a bug when any time value (H,i, s) is set to "00"

Here is my js code for the grid column :

xtype:"datecolumn"
,format:"d/m/Y H:i"
,editor:{xtype:"datetimefield",allowBlank:false,altFormats:"d/m/Y|d/m/Y H:i:s|d/m/Y H:i|Y-m-d H:i:s|Y-m-d H:i"}

but as you can see with attachement, 00 values give a decimal numberfield ...

Phil

MAJ : sorry, in fact ANY time value is set as "allowdecimal" numberfield ...
even 10 is set as 10,00

I'm using EXT 4.1 gpl.

MAJ 2 : with 4.1 ... using this plugin create a bug when using standard datefield and timefield.
As soon as you attach this plugin JS files to page, using standard datefield :

ext-all-debug.js:104399 (http://xlr12.klio.fr/k4/ext/ext-all-debug.js)Uncaught TypeError: Object [object Object] has no method 'getSelectionModel'


Regards

wzl002
17 May 2012, 10:07 PM
Hi,

Great work ! Thanks.

I'm using it in a grid cell editor but there is a bug when any time value (H,i, s) is set to "00"

Here is my js code for the grid column :

xtype:"datecolumn"
,format:"d/m/Y H:i"
,editor:{xtype:"datetimefield",allowBlank:false,altFormats:"d/m/Y|d/m/Y H:i:s|d/m/Y H:i|Y-m-d H:i:s|Y-m-d H:i"}

but as you can see with attachement, 00 values give a decimal numberfield ...

Phil

MAJ : sorry, in fact ANY time value is set as "allowdecimal" numberfield ...
even 10 is set as 10,00

I'm using EXT 4.1 gpl.

MAJ 2 : with 4.1 ... using this plugin create a bug when using standard datefield and timefield.
As soon as you attach this plugin JS files to page, using standard datefield :

ext-all-debug.js:104399 (http://xlr12.klio.fr/k4/ext/ext-all-debug.js)Uncaught TypeError: Object [object Object] has no method 'getSelectionModel'


Regards

Can you provide your case code please?
I think the property 'altFormats' will not work as expect and the format for time part is 'H:i:s' and unchangeable, any format set for this part would not work.

EmCy90
25 May 2012, 4:10 AM
I started to move my app to 4.1 and after i switch to this version of the ux i noticed that in dateTimeField when you open it it's current value is no longer marked in blue so i took a look. In the setValue method of the DateTimeField the value that is passed to the update method is not clear from it's time part and that caused the trouble.



setValue: function(value) {
this.value = value;
this.changeTimeFiledValue(value);
return this.update( Ext.Date.clearTime( this.value, true ) );
}

linyajun
30 May 2012, 12:25 AM
in IE this will show with35738,can you help me ?(能帮我解决下么:))

wzl002
2 Jun 2012, 4:33 PM
Thank you very much, I will take a look at that.

wzl002
2 Jun 2012, 4:37 PM
in IE this will show with35738,can you help me ?(能帮我解决下么:))
Can you provie your case code and evn infomation like IE version,os and so on

another_i
20 Jun 2012, 4:30 AM
MAJ 2 : with 4.1 ... using this plugin create a bug when using standard datefield and timefield.
As soon as you attach this plugin JS files to page, using standard datefield :

ext-all-debug.js:104399 (http://xlr12.klio.fr/k4/ext/ext-all-debug.js)Uncaught TypeError: Object [object Object] has no method 'getSelectionModel'


This trouble is there because .../ux/form/TimePickerField.js uses "widget.timepicker" as alias.


Ext.define('Ext.ux.form.TimePickerField', {
extend: 'Ext.form.field.Base',
alias: 'widget.timepicker', // <----- here
...
});


Same alias is used in the standart Ext JS timepicker (for the standart timefield). And so an UX's alias overrides the standart one. But this UX don't uses this alias in code as { xtype: "timepicker", ... } or Ext.widget("timepicker", { ... }). So for solve this trouble you should just change in .../ux/form/TimePickerField.js value for alias, for example on "widget.timepickerfield" (it's works good for me):


Ext.define('Ext.ux.form.TimePickerField', {
extend: 'Ext.form.field.Base',
alias: 'widget.timepickerfield',
...
});


I hope this will be helpful for you. :)

felipe.duarte
26 Jul 2012, 11:14 AM
Thanks another_i !

I was getting error and now it's gone.

Works perfects in my grid!!

Regards,

liliang268
23 Aug 2012, 11:49 PM
this plugin display Normal on Chrome ,but on ie7,ie8 ,ie9 display
38220, Ask for help

fzhu
5 Sep 2012, 8:04 PM
thanks,谢了哥们儿

grpbhb
10 Sep 2012, 7:43 AM
I have a problem with Extj 4.1.1
Tested in Chrome 21.0.1180.89 m
Uncaught TypeError: Cannot read property 'dom' of null


TimePickerField.js:111


{
xtype: 'timepickerfield',
name:'fechaNac'
},




callSpinnersFunction: function(funName, args) {
for(var i = 0; i < this.spinners.length; i++) {
this.spinners[i][funName](args);
}
}

The fix:


spinnerWrapDom = Ext.dom.Query.select('td', this.getEl().dom)[1]; // 4.0 ->4.1 div->td
if (!spinnerWrapDom ) {
spinnerWrapDom = Ext.dom.Query.select('td', this.getEl().dom)[0];
}

Cine
26 Sep 2012, 10:21 PM
Datetimepicker needs an override for the selected date to have the right class (atleast in 4.1.1).


selectedUpdate: function (date) {
this.callParent([Ext.Date.clearTime(date, true)]);
}

bfttt999
28 Sep 2012, 2:06 AM
It's very good! Thank you! :)

Cine
3 Oct 2012, 2:16 AM
And here is TimePicker version with AM/PM selector. It will be added automatically if it is in the timeFormat. Same with seconds selector, which is now only shown if it is in the timeFormat. (Notice timeformat parsing is extremely basic)


/**
* 时间输入框, 三个整数框分别输入时,分,秒.
* @author wangzilong
* update Ext - 4.1 2012/04/27
*/
Ext.define('Cg.ux.form.field.TimePicker', {
extend: 'Ext.form.field.Base',
alias: 'widget.timepicker',
requires: ['Ext.form.field.Number'],

timeFormat: 'H:i:s',

// 隐藏BaseField的输入框 , hidden basefield's input
inputType: 'hidden',

style: 'padding:4px 0 0 0;margin-bottom:0px',

/**
* @cfg {String} value
* initValue, format: 'H:i:s'
*/
value: null,

/**
* @cfg {Object} spinnerCfg
* 数字输入框参数, number input config
*/
spinnerCfg: {
width: 40
},

/** Override. */
initComponent: function () {
var me = this;

me.value = me.value || Ext.Date.format(new Date(), me.timeFormat);

me.callParent(); // called setValue

var cfg = Ext.apply({}, me.spinnerCfg, {
readOnly: me.readOnly,
disabled: me.disabled,
style: 'float: left',
listeners: {
change: {
fn: me.onSpinnerChange,
scope: me
}
}
});

me.hoursSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {
minValue: 0,
maxValue: me.timeFormat.toLowerCase().indexOf("a") >= 0 ? 11 : 23
}));
me.minutesSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {
minValue: 0,
maxValue: 59
}));
if (me.timeFormat.toLowerCase().indexOf("s") >= 0) {
me.secondsSpinner = Ext.create('Ext.form.field.Number', Ext.apply({ }, cfg, {
minValue: 0,
maxValue: 59
}));
}
if (me.timeFormat.toLowerCase().indexOf("a") >= 0) {
var ampm = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [
{ "abbr": "AM", "name": "AM" },
{ "abbr": "PM", "name": "PM" }
]
});

// Create the combo box, attached to the states data store
me.ampm = Ext.create('Ext.form.ComboBox', {
store: ampm,
readOnly: me.readOnly,
disabled: me.disabled,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
width: 50,
style: 'float: right',
listeners: {
select: {
fn: me.onSpinnerChange,
scope: me
}
}
});
}
me.spinners = [me.hoursSpinner, me.minutesSpinner];
if (me.secondsSpinner)
me.spinners.push(me.secondsSpinner);
if (me.ampm)
me.spinners.push(me.ampm);

},
/**
* @private
* Override.
*/
onRender: function () {
var me = this, spinnerWrapDom, spinnerWrap;
me.callParent(arguments);

// render to original BaseField input td
// spinnerWrap = Ext.get(Ext.DomQuery.selectNode('div', this.el.dom)); // 4.0.2
spinnerWrapDom = Ext.dom.Query.select('td', this.getEl().dom)[1]; // 4.0 ->4.1 div->td
spinnerWrap = Ext.get(spinnerWrapDom);
me.callSpinnersFunction('render', spinnerWrap);

Ext.core.DomHelper.append(spinnerWrap, {
tag: 'div',
cls: 'x-form-clear-left'
});

this.setRawValue(this.value);
},

_valueSplit: function (v) {
if (Ext.isDate(v)) {
v = Ext.Date.format(v, this.timeFormat);
}
var split = Ext.Date.parse(v, this.timeFormat);
return {
h: split.getHours(),
m: split.getMinutes(),
s: split.getSeconds()
};
},
onSpinnerChange: function () {
if (!this.rendered) {
return;
}
this.fireEvent('change', this, this.getValue(), this.getRawValue());
},
// 依次调用各输入框函数, call each spinner's function
callSpinnersFunction: function (funName, args) {
for (var i = 0; i < this.spinners.length; i++) {
this.spinners[i][funName](args);
}
},
// @private get time as object,
getRawValue: function () {
var me = this;
if (!me.rendered) {
var date = me.value || new Date();
return me._valueSplit(date);
} else {
return {
h: me.ampm && me.ampm.getValue() == "PM" ? me.hoursSpinner.getValue() + 12 : me.hoursSpinner.getValue(),
m: me.minutesSpinner.getValue(),
s: me.secondsSpinner ? me.secondsSpinner.getValue() : 0
};
}
},

// private
setRawValue: function (value) {
var me = this;
value = me._valueSplit(value);
if (me.hoursSpinner) {
if (me.ampm) {
if (value.h >= 12) {
me.ampm.setValue("PM");
value.h = value.h - 12;
} else
me.ampm.setValue("AM");
}
me.hoursSpinner.setValue(value.h);
me.minutesSpinner.setValue(value.m);
if (me.secondsSpinner) me.secondsSpinner.setValue(value.s);
}
},
// overwrite
getValue: function () {
var v = this.getRawValue();
return Ext.String.leftPad(v.h, 2, '0') + ':' + Ext.String.leftPad(v.m, 2, '0') + ':'
+ Ext.String.leftPad(v.s, 2, '0');
},
// overwrite
setValue: function (value) {
this.value = Ext.isDate(value) ? Ext.Date.format(value, this.timeFormat) : value;
if (!this.rendered) {
return;
}
this.setRawValue(this.value);
this.validate();
},
// overwrite
disable: function () {
this.callParent(arguments);
this.callSpinnersFunction('disable', arguments);
},
// overwrite
enable: function () {
this.callParent(arguments);
this.callSpinnersFunction('enable', arguments);
},
// overwrite
setReadOnly: function () {
this.callParent(arguments);
this.callSpinnersFunction('setReadOnly', arguments);
},
// overwrite
clearInvalid: function () {
this.callParent(arguments);
this.callSpinnersFunction('clearInvalid', arguments);
},
// overwrite
isValid: function (preventMark) {
return this.hoursSpinner.isValid(preventMark) && this.minutesSpinner.isValid(preventMark)
&& (!this.secondsSpinner || this.secondsSpinner.isValid(preventMark)) && (!this.ampm || this.ampm.isValid(preventMark));
},
// overwrite
validate: function () {
return this.hoursSpinner.validate() && this.minutesSpinner.validate() && (!this.secondsSpinner || this.secondsSpinner.validate()) && (!this.ampm || this.ampm.validate());
}
});

Cine
3 Oct 2012, 8:29 PM
Validation of the field didn't work, so here is the fix:



getErrors: function(value) {
var me = this,
format = Ext.String.format,
errors = me.superclass.superclass.getErrors.apply(me, arguments),
disabledDays = me.disabledDays,
disabledDatesRE = me.disabledDatesRE,
minValue = me.minValue,
maxValue = me.maxValue,
len = disabledDays ? disabledDays.length : 0,
i = 0,
svalue,
fvalue,
day,
time;

value = me.formatDate(value || me.processRawValue(me.getRawValue()));

if (value === null || value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
return errors;
}

svalue = value;
value = me.parseDate(value);
if (!value) {
errors.push(format(me.invalidText, svalue, Ext.Date.unescapeFormat(me.format)));
return errors;
}

time = value.getTime();
if (minValue && time < minValue.getTime()) {
errors.push(format(me.minText, me.formatDate(minValue)));
}

if (maxValue && time > maxValue.getTime()) {
errors.push(format(me.maxText, me.formatDate(maxValue)));
}

if (disabledDays) {
day = value.getDay();

for (; i < len; i++) {
if (day === disabledDays[i]) {
errors.push(me.disabledDaysText);
break;
}
}
}

fvalue = me.formatDate(value);
if (disabledDatesRE && disabledDatesRE.test(fvalue)) {
errors.push(format(me.disabledDatesText, fvalue));
}

return errors;
}

ivanckt
9 Jan 2013, 8:59 PM
this plugin display Normal on Chrome ,but on ie7,ie8 ,ie9 display
38220, Ask for help


In datetimepicker.js,

replace line 32:

var table = Ext.get(Ext.DomQuery.selectNode('table', this.el.dom));

to

var table = Ext.get(Ext.DomQuery.selectNode('table[class="x-datepicker-inner"]', this.el.dom));

Because the selector in IE chooses a wrong table to insert the timefield.

bharathi88
4 Jun 2013, 11:21 PM
Hi i'm using Ext.ux.form.DateTimeField here showing default system time field (H:i:s) but i need default time hours giving user it's possible or not?

yuanxing05
2 Jul 2013, 5:47 PM
thank you !

yishengreai
24 Jul 2013, 1:27 AM
This can't work in IE 7/8/9,can you fix it?

fpascal4
17 Sep 2013, 10:22 AM
What is the licensing on these files? No licensing information was included in the original zip files.

orfeuprog
2 Oct 2013, 4:57 AM
I tried to use the xtype: 'timepicker', but in extjs 4.2 this doesn't work. I changed the line 79 into UX_TimePickerField to:


spinnerWrapDom = Ext.dom.Query.select('td', this.getEl().dom)[1];
if(!spinnerWrapDom){
spinnerWrapDom = Ext.dom.Query.select('td', this.getEl().dom)[0];
}


P.S.: I'm using Neptune theme

Neopulse
2 Nov 2013, 9:07 AM
I wonder if anyone made a compatible module version with ext4.2.x

Regards

Neopulse
2 Dec 2013, 1:09 PM
I made a couple of changed and it works in extjs 4.2.1, but I have a issue.
The property" maxValue: someDate" just set max values for the date but not for the time, and I can´t find a way to rewrite the set maxValue mechanism to include the time too.

Any ideas???

Excuse my english

felfert
9 Dec 2013, 8:38 AM
I made a couple of changed and it works in extjs 4.2.1, but I have a issue.
The property" maxValue: someDate" just set max values for the date but not for the time, and I can´t find a way to rewrite the set maxValue mechanism to include the time too.

Any ideas???

Excuse my english
Please share your "couple of changes".

fpascal4
16 Dec 2013, 8:48 AM
I have a local copy of this code that uses a combobox (tied to a backing store) to select available appointment time slots. Everything seems to work fine, except the click events to select the combobox drop down value is not being fired. My date picker with the embedded combobox shows, I can click on the trigger icon, the dropdown shows, but when I click on a value the whole DateTime component collapses and no value is selected.

All the other "click" events work in the component. I can select a date from the calendar. I can click "Now" and in both cases the component value gets set. Click events within the combobox are being ignored. Key events are working - I can place the cursor in the combobox, and press down arrow to select a value - only then do the combobox listeners fire. Debugging shows that "mousemove" and "mousehover" events are being passed, but "click" or "mouseup/down" events are going to the bit-bucket.

Any idea what could be eating click events within the combobox dropdown? It's acting like the DateTime component is not passing on mouse events.

zhangcfeng
1 Feb 2014, 9:48 PM
very goods thanks you

normanhv
26 Mar 2014, 2:55 PM
This is great, thanks!

I'm not sure if code posted here has a default license but will the owner of the code verify what license this is under? Even GPL would be great but it is not explicitly stated.

andmatu.forward@gmail.com
16 Jul 2014, 7:43 AM
Fix: selected day highlighting fails. To fix it need to override "Ext.picker.Date#selectedUpdate" method in "Ext.ux.DateTimePicker"add code below to the end of class Ext.ux.DateTimePicker in file "UX_DateTimePicker.js"/** * Update the selected cell * @private * @param {Date} date The new date */ selectedUpdate: function(date){ var me = this, t = Ext.Date.clearTime(date, true).getTime(), cells = me.cells, cls = me.selectedCls, cellItems = cells.elements, c, cLen = cellItems.length, cell; cells.removeCls(cls); for (c = 0; c < cLen; c++) { cell = Ext.fly(cellItems[c]); if (cell.dom.firstChild.dateValue == t) { me.fireEvent('highlightitem', me, cell); cell.addCls(cls); if(me.isVisible() && !me.doCancelFocus){ Ext.fly(cell.dom.firstChild).focus(50); } break; } } }

madmax797
20 Aug 2014, 1:39 PM
Hi,Any plans to port this for ExtJS-5.. I am getting error clicking on the calendar icon..Problem seems to be that ExtJS-5 has removed Ext.dom.QueryspinnerWrapDom = Ext.dom.Query.select('td', this.getEl().dom)[1];spinnerWrap = Ext.get(spinnerWrapDom);