1. #11
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    628
    Vote Rating
    10
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      0  

    Default


    * Removed the 'dateTimeFormat' config - use dateFormat & timeFormat instead.
    * Exclude date & time fields from form query operations. Otherwise, calling form.getForm().getFieldValues(false) returns field containers and sub-fields in values object.

    Code:
    /**
     * @class Ext.ux.form.field.DateTime
     * @extends Ext.form.FieldContainer
     * @version 0.2 (July 20th, 2011)
     * @author atian25 (http://www.sencha.com/forum/member.php?51682-atian25)
     * @author ontho (http://www.sencha.com/forum/member.php?285806-ontho)
     * @author jakob.ketterl (http://www.sencha.com/forum/member.php?25102-jakob.ketterl)
     * @link http://www.sencha.com/forum/showthread.php?134345-Ext.ux.form.field.DateTime
     */
    Ext.define('Ext.ux.form.field.DateTime', {
        extend:'Ext.form.FieldContainer',
        mixins:{    
            field:'Ext.form.field.Field'
        },
        alias: 'widget.xdatetime',
            
        //configurables
        
        combineErrors: true,
        msgTarget: 'under',    
        layout: 'hbox',
        readOnly: false,
        
        /**
         * @cfg {String} dateFormat
         * Convenience config for specifying the format of the date portion.
         * This value is overridden if format is specified in the dateConfig.
         * The default is 'Y-m-d'
         */
        dateFormat: 'Y-m-d',
        /**
         * @cfg {String} timeFormat
         * Convenience config for specifying the format of the time portion.
         * This value is overridden if format is specified in the timeConfig. 
         * The default is 'H:i:s'
         */
        timeFormat: 'H:i:s',
    //    /**
    //     * @cfg {String} dateTimeFormat
    //     * The format used when submitting the combined value.
    //     * Defaults to 'Y-m-d H:i:s'
    //     */
    //    dateTimeFormat: 'Y-m-d H:i:s',
        /**
         * @cfg {Object} dateConfig
         * Additional config options for the date field.
         */
        dateConfig:{},
        /**
         * @cfg {Object} timeConfig
         * Additional config options for the time field.
         */
        timeConfig:{},
    
        
        // properties
        
        dateValue: null, // Holds the actual date
        /**
         * @property dateField
         * @type Ext.form.field.Date
         */
        dateField: null,
        /**
         * @property timeField
         * @type Ext.form.field.Time
         */
        timeField: null,
    
        initComponent: function(){
            var me = this
                ,i = 0
                ,key
                ,tab;
                
            me.items = me.items || [];
            
            me.dateField = Ext.create('Ext.form.field.Date', Ext.apply({
                format:me.dateFormat,
                flex:1,
                isFormField:false, //exclude from field query's
                submitValue:false
            }, me.dateConfig));
            me.items.push(me.dateField);
            
            me.timeField = Ext.create('Ext.form.field.Time', Ext.apply({
                format:me.timeFormat,
                flex:1,
                isFormField:false, //exclude from field query's
                submitValue:false
            }, me.timeConfig));
            me.items.push(me.timeField);
            
            for (; i < me.items.length; i++) {
                me.items[i].on('focus', Ext.bind(me.onItemFocus, me));
                me.items[i].on('blur', Ext.bind(me.onItemBlur, me));
                me.items[i].on('specialkey', function(field, event){
                    key = event.getKey();
                    tab = key == event.TAB;
                    
                    if (tab && me.focussedItem == me.dateField) {
                        event.stopEvent();
                        me.timeField.focus();
                        return;
                    }
                    
                    me.fireEvent('specialkey', field, event);
                });
            }
    
            me.callParent();
            
            // this dummy is necessary because Ext.Editor will not check whether an inputEl is present or not
            this.inputEl = {
                dom:{},
                swallowEvent:function(){}
            };
            
            me.initField();
        },
        
        focus:function(){
            this.callParent();
            this.dateField.focus();
        },
    
        onItemFocus:function(item){
            if (this.blurTask){
                this.blurTask.cancel();
            }
            this.focussedItem = item;
        },
        
        onItemBlur:function(item){
            var me = this;
            if (item != me.focussedItem){ return; }
            // 100ms to focus a new item that belongs to us, otherwise we will assume the user left the field
            me.blurTask = new Ext.util.DelayedTask(function(){
                me.fireEvent('blur', me);
            });
            me.blurTask.delay(100);
        },
        
        getValue: function(){
            var value = null
                ,date = this.dateField.getSubmitValue()
                ,time = this.timeField.getSubmitValue()
                ,format;
    
            if (date){
                if (time){
                    format = this.getFormat();
                    value = Ext.Date.parse(date + ' ' + time, format);
                } else {   
                    value = this.dateField.getValue();
                }
            }
            return value;
        },
        
        getSubmitValue: function(){   
    //        var value = this.getValue();
    //        return value ? Ext.Date.format(value, this.dateTimeFormat) : null;
            
            var me = this
                ,format = me.getFormat()
                ,value = me.getValue();
                
            return value ? Ext.Date.format(value, format) : null;        
        },
     
        setValue: function(value){    
            if (Ext.isString(value)){
                value = Ext.Date.parse(value, this.getFormat()); //this.dateTimeFormat
            }
            this.dateField.setValue(value);
            this.timeField.setValue(value);
        },
        
        getFormat: function(){
            return (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeField.submitFormat || this.timeField.format);
        },
        
        // Bug? A field-mixin submits the data from getValue, not getSubmitValue
        getSubmitData: function(){
            var me = this
                ,data = null;
                
            if (!me.disabled && me.submitValue && !me.isFileUpload()) {
                data = {};
                data[me.getName()] = '' + me.getSubmitValue();
            }
            return data;
        }
    });
    
    //eo file

  2. #12
    Sencha User
    Join Date
    May 2011
    Location
    Oslo
    Posts
    7
    Vote Rating
    0
    espeak is on a distinguished road

      0  

    Default isValid missing?

    isValid missing?


    This works great, however isValid() seems to be missing (or I am using it wrong). This fixed it for me:

    PHP Code:
        isValid: function() {
             return 
    this.dateField.isValid() && this.timeField.isValid();
        } 

  3. #13
    Sencha User
    Join Date
    Apr 2010
    Posts
    12
    Vote Rating
    0
    tayfun.ozis.erikan is on a distinguished road

      0  

    Default allowBlank property is missing

    allowBlank property is missing


    Minor addition for me.

    Code:
    //LINE 55:    
    allowBlank: true,
    Code:
    //...
    me.dateField = Ext.create('Ext.form.field.Date', Ext.apply({
        format:me.dateFormat,
        flex:1,
        margin: '0 5 0 0',
        allowBlank: me.allowBlank, // set as Default false
        isFormField:false, //exclude from field query's
        submitValue:false
    }, me.dateConfig));
    //...
    me.timeField = Ext.create('Ext.form.field.Time', Ext.apply({
        format:me.timeFormat,
        flex:1,
        allowBlank: me.allowBlank,  // set as Default false
        isFormField:false, //exclude from field query's
        submitValue:false
    }, me.timeConfig));

  4. #14
    Sencha User
    Join Date
    Jul 2012
    Posts
    2
    Vote Rating
    0
    TomJones is on a distinguished road

      0  

    Default


    I added this to my code and getting these errors:


    giving me this error, when clicking on date cell:


    Code:
    Uncaught TypeError: Object #<Object> has no method 'removeAttribute' ext-all-debug.js:70898
    Ext.define.beginLayoutShrinkWrap ext-all-debug.js:70898
    Ext.define.beginLayout ext-all-debug.js:70861
    Base.implement.callParent ext-all-debug.js:3732
    Ext.define.beginLayout ext-all-debug.js:72183
    Ext.define.resetLayout ext-all-debug.js:56620
    Ext.define.invalidate ext-all-debug.js:56362
    Ext.define.invalidate ext-all-debug.js:56350
    Ext.define.flushInvalidates ext-all-debug.js:56204
    Ext.define.run ext-all-debug.js:56670
    Ext.define.statics.flushLayouts ext-all-debug.js:44984
    Ext.define.statics.updateLayout ext-all-debug.js:45015
    Ext.define.updateLayout ext-all-debug.js:46626
    Ext.define.onShow ext-all-debug.js:45425
    Base.implement.callParent ext-all-debug.js:3732
    Ext.define.onShow ext-all-debug.js:58013
    Base.implement.callParent ext-all-debug.js:3732
    Ext.define.onShow ext-all-debug.js:78098
    Base.implement.callParent ext-all-debug.js:3732
    Ext.define.onShow ext-all-debug.js:78223
    Ext.define.show ext-all-debug.js:57993
    Ext.define.startEdit ext-all-debug.js:78031
    call ext-all-debug.js:8423



    and when deselecting cell, getting this :


    Code:
    Uncaught TypeError: Object #<Object> has no method 'getTarget' ext-all-debug.js:78142
    Ext.define.onFieldBlur ext-all-debug.js:78142
    call ext-all-debug.js:8423

    This is how I apply it on my column:

    Code:
    {
                        xtype : 'enddatecolumn',
    					format: 'd/m/Y G:i',
    					width: 150,
    					align : 'center',
    					
    					 field       : {
    						xtype       : 'xdatetime'
    					}
                    }

  5. #15
    Sencha User
    Join Date
    Jul 2012
    Posts
    2
    Vote Rating
    0
    TomJones is on a distinguished road

      0  

    Default


    ok I removed some lines from ext-all-debug.js and it gave me no errors.
    Now the problem is that, when I edit the date, and press ENTER, date changes.

    But when I edit the time, and press enter, it pops back to its original value. How can i fix this?


    unimportant lines I removed, i guess they are useless:


    Code:
          /*  if (e && Ext.fly(target = e.getTarget()).focusable()) {
                target.focus();
            } */

    Code:
     //  inputEl.dom.removeAttribute('size');

  6. #16
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,810
    Vote Rating
    133
    mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold

      0  

    Default


    This works quite well for me:

    Code:
    /**
     * @class Ext.ux.form.field.DateTime
     * @extends Ext.form.FieldContainer
     * @version 0.2 (July 20th, 2011)
     * @author atian25 (http://www.sencha.com/forum/member.php?51682-atian25)
     * @author ontho (http://www.sencha.com/forum/member.php?285806-ontho)
     * @author jakob.ketterl (http://www.sencha.com/forum/member.php?25102-jakob.ketterl)
     * @link http://www.sencha.com/forum/showthread.php?134345-Ext.ux.form.field.DateTime
     */
    Ext.define('Ext.ux.form.field.DateTime', {
        extend:'Ext.form.FieldContainer',
        mixins:{    
            field:'Ext.form.field.Field'
        },
        alias: 'widget.xdatetime',
            
        //configurables
        
        combineErrors: true,
        msgTarget: 'under',    
        layout: 'hbox',
        readOnly: false,
        
        /**
         * @cfg {String} dateFormat
         * Convenience config for specifying the format of the date portion.
         * This value is overridden if format is specified in the dateConfig.
         * The default is 'Y-m-d'
         */
        dateFormat: 'Y-m-d',
        /**
         * @cfg {String} timeFormat
         * Convenience config for specifying the format of the time portion.
         * This value is overridden if format is specified in the timeConfig. 
         * The default is 'H:i:s'
         */
        timeFormat: 'H:i:s',
    //    /**
    //     * @cfg {String} dateTimeFormat
    //     * The format used when submitting the combined value.
    //     * Defaults to 'Y-m-d H:i:s'
    //     */
    //    dateTimeFormat: 'Y-m-d H:i:s',
        /**
         * @cfg {Object} dateConfig
         * Additional config options for the date field.
         */
        dateConfig:{},
        /**
         * @cfg {Object} timeConfig
         * Additional config options for the time field.
         */
        timeConfig:{},
    
        
        // properties
        
        dateValue: null, // Holds the actual date
        /**
         * @property dateField
         * @type Ext.form.field.Date
         */
        dateField: null,
        /**
         * @property timeField
         * @type Ext.form.field.Time
         */
        timeField: null,
    
        initComponent: function(){
            var me = this
                ,i = 0
                ,key
                ,tab;
                
            me.items = me.items || [];
            
            me.dateField = Ext.create('Ext.form.field.Date', Ext.apply({
                format:me.dateFormat,
                flex:1,
                isFormField:false, //exclude from field query's
                submitValue:false
            }, me.dateConfig));
            me.items.push(me.dateField);
            
            me.timeField = Ext.create('Ext.form.field.Time', Ext.apply({
                format:me.timeFormat,
                flex:1,
                isFormField:false, //exclude from field query's
                submitValue:false
            }, me.timeConfig));
            me.items.push(me.timeField);
            
            for (; i < me.items.length; i++) {
                me.items[i].on('focus', Ext.bind(me.onItemFocus, me));
                me.items[i].on('blur', Ext.bind(me.onItemBlur, me));
                me.items[i].on('specialkey', function(field, event){
                    key = event.getKey();
                    tab = key == event.TAB;
                    
                    if (tab && me.focussedItem == me.dateField) {
                        event.stopEvent();
                        me.timeField.focus();
                        return;
                    }
                    
                    me.fireEvent('specialkey', field, event);
                });
            }
    
            me.callParent();
            
            // this dummy is necessary because Ext.Editor will not check whether an inputEl is present or not
            this.inputEl = {
                dom: document.createElement('div'),
                swallowEvent:function(){}
            };
            
            me.initField();
        },
        
        focus:function(){
            this.callParent(arguments);
            this.dateField.focus();
        },
    
        onItemFocus:function(item){
            if (this.blurTask){
                this.blurTask.cancel();
            }
            this.focussedItem = item;
        },
        
        onItemBlur:function(item, e){
            var me = this;
            if (item != me.focussedItem){ return; }
            // 100ms to focus a new item that belongs to us, otherwise we will assume the user left the field
            me.blurTask = new Ext.util.DelayedTask(function(){
                me.fireEvent('blur', me, e);
            });
            me.blurTask.delay(100);
        },
        
        getValue: function(){
            var value = null
                ,date = this.dateField.getSubmitValue()
                ,time = this.timeField.getSubmitValue()
                ,format;
    
            if (date){
                if (time){
                    format = this.getFormat();
                    value = Ext.Date.parse(date + ' ' + time, format);
                } else {   
                    value = this.dateField.getValue();
                }
            }
            return value;
        },
        
        getSubmitValue: function(){   
    //        var value = this.getValue();
    //        return value ? Ext.Date.format(value, this.dateTimeFormat) : null;
            
            var me = this
                ,format = me.getFormat()
                ,value = me.getValue();
                
            return value ? Ext.Date.format(value, format) : null;        
        },
     
        setValue: function(value){    
            if (Ext.isString(value)){
                value = Ext.Date.parse(value, this.getFormat()); //this.dateTimeFormat
            }
            this.dateField.setValue(value);
            this.timeField.setValue(value);
        },
        
        getFormat: function(){
            return (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeField.submitFormat || this.timeField.format);
        },
        
        // Bug? A field-mixin submits the data from getValue, not getSubmitValue
        getSubmitData: function(){
            var me = this
                ,data = null;
                
            if (!me.disabled && me.submitValue && !me.isFileUpload()) {
                data = {};
                data[me.getName()] = '' + me.getSubmitValue();
            }
            return data;
        }
    });
    
    //eo file

  7. #17
    Sencha User
    Join Date
    Aug 2012
    Posts
    8
    Vote Rating
    0
    zhengeili is on a distinguished road

      0  

    Default


    国人的 哈哈

  8. #18
    Sencha User Jad's Avatar
    Join Date
    Feb 2012
    Location
    annecy france
    Posts
    63
    Vote Rating
    2
    Jad is on a distinguished road

      0  

    Default


    Hi mankz

    I use your code with Ext.grid.plugin.CellEditing and the editor is closed immediately after it's opened.

    anny idea to fix it ?

    grid column code
    Code:
    {
                        text: module.getLocale().translate(me.$className, 'departureDate', 'Departure Date'),
                        format: Ext.Date.patterns.ShortDate,
                        flex: 1,
                        dataIndex: 'departureDate',
                        itemId: 'departureDate',
                        renderer: function(value) {
                            try { return value ? Ext.Date.format(value, Ext.Date.patterns.DateTime) : ''; }
                            catch (ex) {}
                        },
                        editor: { xtype: 'xdatetime' }
                    },

  9. #19
    Sencha User
    Join Date
    Dec 2007
    Posts
    39
    Vote Rating
    0
    danderson is on a distinguished road

      0  

    Default


    @zombeerose what is the rationale behind commenting out the dateTimeFormat option? Unless i'm missing something, this would make it quite the chore to submit the field as an epoch

  10. #20
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    628
    Vote Rating
    10
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      1  

    Default


    @danderson

    Interesting point. I don't use epoch formatting so never considered the case.
    I had initially removed it because it appeared redundant to dateFormat + timeFormat.

    I basically re-added the option in the same context as before but I don't specify a default value. IF you specify dateTimeFormat, it will take precedence over the separate formats.
    See if this works for you.

    Code:
    
    
    Code:
    /**
     * @class Ext.ux.form.field.DateTime
     * @extends Ext.form.FieldContainer
     * @version 0.3 (October 26th, 2012)
     * @author [atian25](http://www.sencha.com/forum/member.php?51682-atian25)
     * @author [ontho](http://www.sencha.com/forum/member.php?285806-ontho)
     * @author [jakob.ketterl](http://www.sencha.com/forum/member.php?25102-jakob.ketterl)
     * [Forum Thread](http://www.sencha.com/forum/showthread.php?134345-Ext.ux.form.field.DateTime)
     */
    Ext.define('Ext.ux.form.field.DateTime', {
        extend:'Ext.form.FieldContainer',
        mixins:{    
            field:'Ext.form.field.Field'
        },
        alias: 'widget.xdatetime',
            
        //configurables
        
        combineErrors: true,
        msgTarget: 'under',    
        layout: 'hbox',
        readOnly: false,
        
        /**
         * @cfg {String} dateFormat
         * Convenience config for specifying the format of the date portion.
         * This value is overridden if format is specified in the dateConfig.
         * The default is 'Y-m-d'
         */
        dateFormat: 'Y-m-d',
        
        /**
         * @cfg {String} dateTimeFormat
         * An optional format used in place of {@link #dateFormat} and {@link timeFormat} to 
         * allow support for combined formatting, such as enoch, when calling 
         * {@link #getSubmitValue} and {@link setValue}.
         */
        
        /**
         * @cfg {String} timeFormat
         * Convenience config for specifying the format of the time portion.
         * This value is overridden if format is specified in the timeConfig. 
         * The default is 'H:i:s'
         */
        timeFormat: 'H:i:s',
        /**
         * @cfg {Object} dateConfig
         * Additional config options for the date field.
         */
        dateConfig:{},
        /**
         * @cfg {Object} timeConfig
         * Additional config options for the time field.
         */
        timeConfig:{},
    
    
        
        // properties
        
        dateValue: null, // Holds the actual date
        /**
         * @property dateField
         * @type Ext.form.field.Date
         */
        dateField: null,
        /**
         * @property timeField
         * @type Ext.form.field.Time
         */
        timeField: null,
    
    
        initComponent: function(){
            var me = this,
                i = 0,
                key,
                tab;
                
            me.items = me.items || [];
            
            me.dateField = Ext.create('Ext.form.field.Date', Ext.apply({
                format:me.dateFormat,
                flex:1,
                isFormField:false, //exclude from field query's
                submitValue:false
            }, me.dateConfig));
            me.items.push(me.dateField);
            
            me.timeField = Ext.create('Ext.form.field.Time', Ext.apply({
                format:me.timeFormat,
                flex:1,
                isFormField:false, //exclude from field query's
                submitValue:false
            }, me.timeConfig));
            me.items.push(me.timeField);
            
            for (; i < me.items.length; i++) {
                me.items[i].on('focus', me.onItemFocus, me);
                me.items[i].on('blur', me.onItemBlur, me);
                me.items[i].on('select', me.onItemSelect, me);
                me.items[i].on('specialkey', function(field, event){
                    key = event.getKey();
                    tab = key == event.TAB;
                    
                    if (tab && me.focussedItem == me.dateField) {
                        event.stopEvent();
                        me.timeField.focus();
                        return;
                    }
                    
                    me.fireEvent('specialkey', field, event);
                });
            }
    
    
            me.callParent();
            
            // this dummy is necessary because Ext.Editor will not check whether an inputEl is present or not
            this.inputEl = {
                dom:{},
                swallowEvent:function(){}
            };
            
            me.initField();
        },
        
        focus:function(){
            this.callParent();
            this.dateField.focus();
        },
        
        onItemFocus:function(item){
            if (this.blurTask){
                this.blurTask.cancel();
            }
            this.focussedItem = item;
        },
        
        onItemBlur:function(item){
            var me = this;
            if (item != me.focussedItem){ return; }
            // 100ms to focus a new item that belongs to us, otherwise we will assume the user left the field
            me.blurTask = new Ext.util.DelayedTask(function(){
                me.fireEvent('blur', me);
            });
            me.blurTask.delay(100);
        },
        
        /**
         * @private Handles focus event
         */
        onItemSelect:function() {
            this.fireEvent("select", this);
        },
        
        getValue: function(){
            var value = null,
                date = this.dateField.getSubmitValue(),
                time = this.timeField.getSubmitValue(),
                format;
    
    
            if (date){
                if (time){
                    format = this.getFormat();
                    value = Ext.Date.parse(date + ' ' + time, format);
                } else {   
                    value = this.dateField.getValue();
                }
            }
            return value;
        },
        
        getSubmitValue: function(){   
            var me = this,
                format = me.dateTimeFormat || me.getFormat(),
                value = me.getValue();
                
            return value ? Ext.Date.format(value, format) : null;        
        },
     
        setValue: function(value){
            var format;
            
            if (Ext.isString(value)){
                format = this.dateTimeFormat || this.getFormat();
                value = Ext.Date.parse(value, format); //this.dateTimeFormat
            }
            this.dateField.setValue(value);
            this.timeField.setValue(value);
        },
        
        getFormat: function(){
            var df = this.dateField,
                tf = this.timeField;
            return ((df.submitFormat || df.format) + " " + (tf.submitFormat || tf.format));
        },
        
        // Bug? A field-mixin submits the data from getValue, not getSubmitValue
        getSubmitData: function(){
            var me = this,
                data = null;
                
            if (!me.disabled && me.submitValue && !me.isFileUpload()) {
                data = {};
                data[me.getName()] = '' + me.getSubmitValue();
            }
            return data;
        }
    });
    
    
    //eo file