Ext.ux.form.field.DateTime

[caodegao]

good!china

[danderson]

@zombeerose

so far so good!

[JacobGu]

This method needs to be added:

    resetOriginalValue: function () {
        this.dateField.resetOriginalValue();
        this.timeField.resetOriginalValue();
    }

[zombeerose]

@JacobGu
I have added the resetOriginalValue method. I have also posted the code on github to make future contributions easier.

https://github.com/zombeerose/DateTime

NOTE: I refactored the code a bit because the previous implementation was creating a dummy inputEl, which was creating various problems (didn't work in 4.1.3). I have since reworked it using the Ext.calendar.form.field.DateRange example field as a model. Hopefully will be more in line with Sencha's best practices.

[JacobGu]

Thanks.

I think it also needs:

    onFieldDirtyChange: function () {
        this.checkDirty();
    }

and the following listener in both the date and time field objects:

'dirtychange': function () {
                            me.onFieldDirtyChange();
                        }

[predator]

Hi,

form.loadRecord(record);

Does not load the field.

console.log(value); in setValue(value);

shows as undefined.

It works great when used as grid editor for a field, but in a plain form cannot load its value.

/A

[Jangla]

I get this error on the line that creates the time field (seems to be related to attempting to use loadRecord into the field from a data store...perhaps?):

Cannot call method 'on' of undefined

[seek]

Hi all, and thanks for this plugin!
All works perfectly, but there is a little problem when I leave the cell grid after editing: I must do a double click to another line in the grid, in order to confirm data (and get rid of pickers).
I'm using ExtJS 4.1.1a

Immagine.png

Any suggestion?
Thanks
Seek

[Jojo79]

@atian25 - Thank you for the code.

I have extended the code to include a hidden field so that date time value get submitted as a form field.

/**
 * @class Ext.ux.form.field.DateTime
 * @extends Ext.form.FieldContainer
 *
 * DateTime field, combination of DateField and TimeField
 * @author atian25 (http://www.sencha.com/forum/member.php?51682-atian25)
 * @author Jojo79 (http://www.sencha.com/forum/member.php?321626-Jojo79)
 */
Ext.ns('Ext.ux.form');

Ext.define('Ext.ux.form.field.DateTime', {
    extend:'Ext.form.FieldContainer',
    mixins: {
        field: 'Ext.form.field.Field'
    },
    alias: ['widget.xdatetime'],
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    
    dateFormat:'m/d/y',
    timeFormat:'g:i A',
    
    height: 22,
    style: {
        width : "100%"
    },
    dateCfg:{},
    timeCfg:{},
    valueCfg:{},
    
    initComponent: function() {
        var me = this;
        me.buildField();
        me.callParent();
        this.dateField = this.down('datefield');
        this.timeField = this.down('timefield');
        this.valueField = this.down('hiddenfield');
        me.initField();
    },

    //@private
    buildField: function(){
        this.items = [
            Ext.apply({
                xtype: 'datefield',
                id: this.id + "-date",
                name : this.name + "-date",
                format: this.dateFormat || Ext.form.DateField.prototype.format,
                flex: .55,
                margin: '0 1 0 0',
                submitValue: false,
                listeners : {     
                    'change':function ( dateObj, newValue, oldValue, eOpts ){            
                                this.ownerCt.onUpdateDate();
                             }
                }
            },this.dateCfg),
            Ext.apply({
                xtype: 'timefield',
                id: this.id + "-time",
                name : this.name + "-time",
                format: this.timeFormat || Ext.form.TimeField.prototype.format,
                flex: .45,
                margin: '0 0 0 1',
                submitValue: false,
                listeners : {     
                    'change':function ( dateObj, newValue, oldValue, eOpts ){            
                                this.ownerCt.onUpdateTime();
                             }
                }
            },this.timeCfg),
            Ext.apply({
                xtype: 'hiddenfield',
                id: this.id + "-datetimevalue",
                name: this.name + "-datetimevalue",
                value: '',
                getValue: function(){
            if(this.ownerCt) {
                return this.ownerCt.getValue();
            }else{
                return;
            } 
        },
        getSubmitData: function(){
            data = {};
            if(this.ownerCt){
                data[this.ownerCt.name] = '' + this.ownerCt.getRawValue()
            }
            return data;
        }
            }, this.valueCfg)
        ]
    },

    getValue: function() {
        var value = '',date = this.dateField.getSubmitValue(),time = this.timeField.getSubmitValue();
        if(date){
            if(time){
                var format = this.getFormat();
                value = Ext.Date.parse(date + ' ' + time,format);
            }else{
                value = this.dateField.getValue();
            }
        }
        return value;
    },

    setValue: function(value){
        this.dateField.setValue(value);
        this.timeField.setValue(value);
        this.valueField.value = this.getRawValue();
    },

    getSubmitData: function(){
        data = {};
        return  data[this.name] = '' + this.getRawValue();
    },

    getFormat: function(){
        return (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeField.submitFormat || this.timeField.format)
    },
    
    getRawValue: function() {
        if(this.getValue()){
            return '' + this.getValue().getTime();
        }
        return '';
    },
    
    getTime: function() {
        if(!Ext.isEmpty(this.getValue())){
            return this.getValue().getTime();
        }
    },
    
    initDateValue:function() {
        return new Date();
    },

    onUpdateDate:function() {
        var d = this.dateField.getValue();
        if(!d){
            this.timeField.setValue('');
        }
        if(d && !(d instanceof Date)) {
            d = Ext.Date.parse(d, this.dateField.format);
        }
        if(d && !this.timeField.getValue()) {
            this.timeField.setValue(this.initDateValue());
        }
        this.valueField.value = this.getRawValue(); 
    },
    
    onUpdateTime:function() {
        var t = this.timeField.getValue();
        if(t && !(t instanceof Date)) {
            t = Ext.Date.parse(t, this.timeField.format);
        }
        if(t && !this.dateField.getValue()) {
            this.dateField.setValue(this.initDateValue());
        }
        this.valueField.value = this.getRawValue();
    }
    
})

Thanks!