Ext.ux.form.field.DateTime

[zombeerose]

* 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.

/**
 * @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

[espeak]

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

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

[tayfun.ozis.erikan]

Minor addition for me.

//LINE 55:    
allowBlank: true,

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

[TomJones]

I added this to my code and getting these errors:


giving me this error, when clicking on date cell:

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 :

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:

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

[TomJones]

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:

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

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

[mankz]

This works quite well for me:

/**
 * @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

[zhengeili]

国人的 哈哈

[Jad]

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

{
                    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' }
                },

[danderson]

@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

[zombeerose]

@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.

/**
 * @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