[new version] DateTime Field

[ithompson]

Is there an Ext JS 4.0 version of this?

No functionality for the Delete button? Really? =(

[SSzretter]

In the constuctor, I am getting a syntax error in Ext JS 4:
Uncaught TypeError: Cannot read property 'prototype' of undefined


// }}}
// {{{
/**
* @private
*/
,adjustSize:Ext.BoxComponent.prototype.adjustSize


Why?

I am including:
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>

Then I pasted the code from page 1 of this thread (up to the line Ext.reg('xdatetime', Ext.ux.form.DateTime)

[easley]

> Then I pasted the code from page 1 of this thread

That code relates to an earlier version of Ext. BoxComponent is no more in ExtJS4.

Since this thread is so old and long, you might do better to read it backwards ;-)

[maiconschelter]

Found with ExtJS 4.1, tested in FireFox, Chrome and Safari. Not found in Internet Explorer.
DateTime.zip

[I_Leising]

Hi,

if i use the DateTime-Field in a grid it doesnt work correct in the last visible row.error_datetime_picker.jpg

The user cant select the time

Does anyone have a solution for this?

//edit: i use Ext 3.4

[Keylan]

I have run into the same issue with this field in the last row of a grid, when the timePosition is set to below. It seems like the time field portion shows up inside the grid and gets cut off by the bottom of the grid. Has anyone come up with a solution for this issue (besides changing timePosition to right).

[Deadlock]

I got previously posted version of DateTime picker for ExtJS 4.1 and it doesn't work.
May be it was tested with RC version, but with my version of ExtJS (4.1 release) it doesn't work.
I novice in Ext, have a little practice and try to fix it with my knowledge - I got to make it work.
Who want may diff my changes with previous version and put self correction.

[abc_check]

Is there a version of this plugin for ExtJS 3.4???

[zhaoshixuan]

Hi, I encounter a problem. When the cursor is in the datetime field, I submit and the defered funcion in onBlur function will take effect after the request is sent.
Thus, the new value of this field will miss passing to the controller.
Now, I have to defer 100ms the submit function and wait for datetime field's onBlur taking effect.
It is not a good idea, 100ms is too large and lowers performance.
If I reduce the defer time of onBlur function, It will bring another problem. If you focus is in date field, onBlur function will take effect when you click the time field's trigger button. Thus, the cursor will blur out of the component.
Will anyone have better solution?
Beg for your help!

[nbourdeau]

Hi, I encounter a problem. When the cursor is in the datetime field, I submit and the defered funcion in onBlur function will take effect after the request is sent.
Thus, the new value of this field will miss passing to the controller.
Now, I have to defer 100ms the submit function and wait for datetime field's onBlur taking effect.
It is not a good idea, 100ms is too large and lowers performance.
If I reduce the defer time of onBlur function, It will bring another problem. If you focus is in date field, onBlur function will take effect when you click the time field's trigger button. Thus, the cursor will blur out of the component.
Will anyone have better solution?
Beg for your help!

Hi, this is the version I'm using and it works great for me (inspect the onSpecialKey handlers) :

Ext.define('Ext.ux.form.field.DateTime', {
    extend:'Ext.form.FieldContainer',
    mixins: {
        field: 'Ext.form.field.Field'
    },
    alias: 'widget.datetimefield',
    layout: 'fit',
    timePosition:'right', // valid values:'below', 'right'
    dateCfg:{},
    timeCfg:{},
    allowBlank: true,


    initComponent: function() {
        var me = this;
        me.buildField();
        me.callParent();
        this.dateField = this.down('datefield');
        this.timeField = this.down('timefield');
        me.initField();
    },


    //@private
    buildField: function() {
        var l;
        var d = {};
        if (this.timePosition == 'below') {
            l = {type: 'anchor'};
            d = {anchor: '100%'};
        } else
            l = {type: 'hbox', align: 'middle'};
        this.items = {
            xtype: 'container',
            layout: l,
            defaults: d,
            items: [Ext.apply({
                xtype: 'datefield',
                format: 'Y-m-d',
                width: this.timePosition != 'below' ? 100 : undefined,
                allowBlank: this.allowBlank,
                listeners: {
                    specialkey: this.onSpecialKey,
                    scope: this
                },
                isFormField: false // prevent submission
            }, this.dateCfg), Ext.apply({
                xtype: 'timefield',
                format: 'H:i',
                margin: this.timePosition != 'below' ? '0 0 0 3' : 0,
                width: this.timePosition != 'below' ? 80 : undefined,
                allowBlank: this.allowBlank,
                listeners: {
                    specialkey: this.onSpecialKey,
                    scope: this
                },
                isFormField: false // prevent submission
            }, this.timeCfg)]
        };
    },


    focus: function() {
        this.callParent();
        this.dateField.focus(false, 100);
    },


    // Handle tab events
    onSpecialKey:function(cmp, e) {
        var key = e.getKey();
        if (key === e.TAB) {
            if (cmp == this.dateField) {
                // fire event in container if we are getting out of focus from datefield
                if (e.shiftKey) {
                    this.fireEvent('specialkey', this, e);
                }
            }
            if (cmp == this.timeField) {
                if (!e.shiftKey) {
                    this.fireEvent('specialkey', this, e);
                }
            }
        } else if (this.inEditor) {
            this.fireEvent('specialkey', this, e);
        }
    },


    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)
    },


    getErrors: function() {
        return this.dateField.getErrors().concat(this.timeField.getErrors());
    },


    validate: function() {
        if (this.disabled)
            return true;
        else {
            var isDateValid = this.dateField.validate();
            var isTimeValid = this.timeField.validate();
            return isDateValid && isTimeValid;
        }
    },


    reset: function() {
        this.mixins.field.reset();
        this.dateField.reset();
        this.timeField.reset();
    }


});