Ext.ux.DateTimeField - DateTimePicker for ext4, also DateTimeMenu, TimePickerField

[ebett]

Hi my friends. This is a ExtJS 5.1.0 version (see attachments).
A summary of changes,
- In class DateTimeField:

  //Fix auto-close picker
     collapseIf: function(e) {
          var me = this;
 
          if (!me.isDestroyed && !e.within(me.bodyEl, false, true) && !e.within(me.picker.el, false, true)) {
            me.collapse();
          }
    },

- In class DateTimePicker (initComponent):

 this.on('show', function(){
        this.timefield.hoursSpinner.focus();    
      });

[over-olecom]

To make [Apply] button to save time this line is needed?

    acceptClick: function() {
        var me = this;


        me.setValue(me.fillDateTime(this.value));
        me.fireEvent('select', me, me.value);
        if (me.handler) {
            me.handler.call(me.scope || me, me, me.value);
        }
        me.onSelect();
    },

[yb504779175]

?use datetimepicker can not render the day which Click when the time is not 00:00:00
overwrite selectedUpdate if need?
Code:

/*/*    *??????????????????????????
    */
    selectedUpdate: function (date) {
        var me = this,
            t = date.getTime(),
            cells = me.cells,
            cls = me.selectedCls,
            c,
            cLen = cells.getCount(),
            cell;


        cell = me.activeCell;
        if (cell) {
            Ext.fly(cell).removeCls(cls);
            cell.setAttribute('aria-selected', false);//???????
        }
        for (c = 0; c < cLen; c++) {
            cell = cells.item(c);
            //???????????t??????86400000
            if (me.textNodes[c].dateValue <= t && me.textNodes[c].dateValue + 86400000>t) {
                me.activeCell = cell.dom;
                me.eventEl.dom.setAttribute('aria-activedescendant', cell.dom.id);
                cell.dom.setAttribute('aria-selected', true);
                cell.addCls(cls);
                me.fireEvent('highlightitem', me, cell);//?????????
                break;
            }
        }
    }

[calboard.net]

Thank you so much for extension, I just quickly updated the code for auto-changing time in datefield on timepicker change event.

Here is quickly updated code, I finished it just now, so it is experimental, but useful. I prefer to change time in datetimefield immediately when user changes value in timefield.

file DateTimeField.js:33:

listeners: {
                    scope: me,
                    timechange:function(picker, val){
                            this.setValue(val);
                    },
                    select: me.onSelect
                },

file DateTimePicker.js:48:

timeChange: function(tf, time, rawtime) {
           if(!this.todayKeyListener) { // before render
                this.value = this.fillDateTime(this.value);
           } else {
                this.setValue(this.fillDateTime(this.value));
                this.fireEvent('timechange', this, this.value);
           }
      },

[berend]

Did some minimal work to make things work a bit better for 5.1: https://github.com/berenddeboer/Ext....field.DateTime

What still doesn't work is clicking a time field and getting input focus.

[Le_Grand]

What still doesn't work is clicking a time field and getting input focus.

Add the listener 'afterrender' in spinnerCfg (Ext.ux.form.TimePickerField).

 
var cfg = Ext.apply({}, me.spinnerCfg, {
            readOnly: me.readOnly,
            disabled: me.disabled,
            style: 'float: left',
            listeners: {
                change: {
                    fn: me.onSpinnerChange,
                    scope: me
                },
                afterrender: function () {
                    this.inputEl.on('click', function() { this.focus(); });
                }
            }
        });

[sulimansaaeldin]

Click the calendar second time the timepicker getting disabled. any idea

[ssleong2688]

I am sorry, I wonder is there any demo code on how to call the library, i am very new to this

[cjr2017]

thank you

[santhoshextjs]

Hi,
If any one tried date and time combine in extjs picker. Please share me.
Thanks,
Kumar