Ext.ux.DateTimeField - DateTimePicker for ext4, also DateTimeMenu, TimePickerField

[jonaldomo]

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]

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]

It does not workwith4.1 Beta1
some fixes?
thanks

[navy]

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]

It does not workwith4.1 Beta2
thanks

[malstroem]

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]

Another option is http://www.sencha.com/forum/showthre...field.DateTime

[malstroem]

thks zombeerose - i´ll check that out!

[xuxigang]

Can't work in extjs4.1 RC

[immobilia]

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()};