Ext.ux.form.field.DateTime

[atian25]

it's a beta version, and some question: (help~plz)
1.if i don't set width/height, then DateTime in toolbar is missing
2. cant show correct width in RowEditing plugin

Ext.define('Ext.ux.form.field.DateTime', {
    extend:'Ext.form.FieldContainer',
    mixins: {
        field: 'Ext.form.field.Field'
    },
    alias: 'widget.datetimefield',
    layout: 'hbox',
    width: 200,
    height: 22,
    combineErrors: true,
    msgTarget :'side',
    
    dateCfg:{},
    timeCfg:{},
    
    initComponent: function() {
        var me = this;
        me.buildField();
        me.callParent();
        this.dateField = this.down('datefield')
        this.timeField = this.down('timefield')
        me.initField();
    },
    
    //@private
    buildField: function(){
        this.items = [
            Ext.apply({
	            xtype: 'datefield',
	            format: 'Y-m-d',
	            width: 100
	        },this.dateCfg),
	        Ext.apply({
	            xtype: 'timefield',
	            format: 'H:i',
	            width: 80
	        },this.timeCfg)
        ]
    },
    
    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)
    },
    
    getSubmitData: function(){
        var value = this.getValue()
        var format = this.getFormat()
        return value ? Ext.Date.format(value, format) : null;
    },
    
    getFormat: function(){
        return (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeField.submitFormat || this.timeField.format)
    }
})

[atian25]

anyone could help? thanks

[Dmoney]

This extension works well for what I needed in a form, however I'm having trouble setting the value of the fields. My form is bound to a grid and the model for my store has a value defined like this

{name: 'pubDate',
mapping: 'pubDate'
}

when I select a record in the grid the datetimefield does not display the value. the value in the record is like this : "pubDate":"2011-06-26 01:00:00"

what am I doing wrong?

[ontho]

Thanks for this code! I've taken the liberty to extend the code a bit, but be careful, it has not been tested very much till now.

Added features:
- A button to set "now" and clear the value (set btnNowText:'' to hide the button).
- A dateTimeFormat which makes the submitted value format more flexible. It's also used as the input for setValue (@Dmoney: Does this solve your problem?).

There are 3 known issues:
- The button width changes when the button text changes which looks a bit strange in my eyes (Any idea how to make the button stay on the widest width concerning both possible texts)?
- I'm not quite sure if this getSubmitData-thing is a bug.
- The readOnly-config doesn't work so far.

Ext.namespace('Ext.ux.form');

Ext.define('Ext.ux.form.DateTime', 
{
    extend:'Ext.form.FieldContainer'
    ,mixins: 
    {    field: 'Ext.form.field.Field'
    }
    ,alias: 'widget.xdatetime'
        
    ,combineErrors: true
    ,msgTarget: 'under'
    
    ,layout: 'hbox'
    ,dateFormat: 'Y-m-d',
    ,timeFormat: 'H:i:s'
    ,dateTimeFormat: 'Y-m-d H:i:s'
    ,dateCfg:{}
    ,timeCfg:{}
    ,btnCfg:{}
        
    ,btnNowText: 'Set now'
    ,btnClearText: 'Clear'

    ,readOnly: false // ReadOnly
    
    // internal
    ,dateValue: null // Holds the actual date  
    ,dateField: null
    ,timeField: null
    ,btnField: null

    ,initComponent: function()
    {    var me = this;        
        me.items = me.itmes || [];
        me.items.push(Ext.apply(
        {    xtype: 'datefield',
             format: me.dateFormat,
             flex: 1,
             submitValue: false,
             listeners:
            {    change: Ext.bind(this.onChange, this)           
            }
         }, me.dateCfg));
        me.items.push(Ext.apply(
        {    xtype: 'timefield',
            format: me.timeFormat,
            flex: 1,
            submitValue: false,
             listeners:
             {    change: Ext.bind(this.onChange, this)    
             }
        }, me.timeCfg));
        
        if (me.btnNowText && !me.readOnly)
        {    me.items.push(
                Ext.apply(
                {    xtype: 'button',
                    text: me.btnNowText,
                    flex: 0,
                    autoWidth: false,                    
                    handler: Ext.bind(this.onBtnClick, this)
                })
            );
        }
    
        me.callParent();
        
        me.dateField = me.down('datefield');
        me.timeField = me.down('timefield');
        me.btnField = me.down('button');
           me.initField();
    }
 
    ,getValue: function() 
    {     var value = null,
                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;
    }
    
    ,getSubmitValue: function()
    {    var value = this.getValue();
        return value ? Ext.Date.format(value, this.dateTimeFormat) : null;
    }
 
    ,setValue: function(value) 
    {    if (Ext.isString(value))
        {    value = Ext.Date.parse(value, 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)
    }
    
    ,updateBtn: function()
    {    if (!this.btnField) return;
        if (this.getSubmitValue() === null)
        {    this.btnField.setText(this.btnNowText);
        }
        else
        {    this.btnField.setText(this.btnClearText);
        }
    }
    
    ,onBtnClick: function(btn, e)
    {    if (this.getSubmitValue() == null)
        {    this.setValue(new Date());
        }
        else
        {    this.setValue(null);
        }
    }
    
    ,onChange: function( field, newValue, oldValue, options )
    {    this.updateBtn();        
    }
    
    // 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;
           }
});

[Dmoney]

@ontho

Thanks for posting your your code. Your changes fixed my problem and everything is working great! The clear button and Set Now feature is a great addition as well. Thanks Again!

[jonaldomo]

Both versions I get the errors:

• Uncaught TypeError: Object [object Object] has no method 'getDesiredWidth'
• Uncaught TypeError: Cannot call method 'setStyle' of undefined

I am using 4.0.2a, any thoughts?

Thanks in advanced.

[caodegao]

good!china