Page 1 of 8 123 ... LastLast
Results 1 to 10 of 72

Thread: Datetime field again

  1. #1
    Sencha Premium Member teddyjas's Avatar
    Join Date
    Dec 2007
    Location
    Singapore
    Posts
    262
    Vote Rating
    0
      0  

    Cool Datetime field again

    Hi,
    Was working on this datetime field yesterday.
    I was looking a combined date and time controller, used saki's datetime before but the field is separated into two input.

    So tried making one, and here is the codes I come up with:
    Code:
    /*
     * DateTime field extension
     * @author    Teddy A Jasin - 2009
     *
     * note:
     * extended from Ext.form.DateField
     * format of datetimefield will take combination of dateFormat + ' ' + timeFormat (ie:'d-m-Y G:i A')
     *
     * usage:
     * new Ext.ux.form.DateTimeField({fieldLabel: 'My Date',dateFormat:'d-m-Y',timeFormat:'G:i A'});
     * or
     * {xtype:'datetimefield',fieldLabel: 'My Date',dateFormat:'d-m-Y',timeFormat:'G:i A'}
     *
     * fixes:
     * 15/04/09 - fix for bug date selection on grayed (non current month date) always set to '0:00'
     */
    Ext.ns('Ext.ux.form');
    
    /*DateTime Picker*/
    Ext.DateTimePicker = Ext.extend(Ext.DatePicker, {
    
        timeFormat:'g:i A'
        ,timeLabel:'Time'
        ,timeWidth:100
    
        ,initComponent:function() {
            Ext.DateTimePicker.superclass.initComponent.call(this);
            this.id = Ext.id();
        }
    
        ,onRender: function(container,position){
    
            Ext.DateTimePicker.superclass.onRender.apply(this,arguments);
    
            var table = Ext.get(Ext.DomQuery.selectNode('table tbody',container.dom));
    
            var tfEl = Ext.DomHelper.insertBefore(table.first(),{tag:'tr',
                children:[{tag:'td',cls:'x-date-bottom',html:this.timeLabel},{tag:'td',cls:'x-date-bottom ux-timefield', colspan:'2'}]},true);
    
            this.tf.render(table.child('td.ux-timefield'));
    
            if (this.getEl().parent('div.x-layer')){
                var zindex = this.getEl().parent('div.x-layer').getStyle('z-index');
                if(this.tf.list)
                    this.tf.list.setStyle('z-index',this.getEl().parent('div.x-layer').getStyle('z-index')+ 1000);
            }
        }
    
        ,setValue : function(value){
            var old = this.value;
            if (!this.tf){
                // create timefield
                var timeConfig = Ext.apply({}, {
                     id:this.id + '-time'
                    ,format:this.timeFormat || Ext.form.TimeField.prototype.format
                    ,width:this.timeWidth
                    ,fieldLabel:this.timeLabel
                    ,selectOnFocus:true
                    ,lazyInit: false
                }, this.timeConfig);
                this.tf = new Ext.form.TimeField(timeConfig);
                this.tf.ownerCt = this;
                delete(this.timeFormat);
                this.tf.setValue(value);
            }
    
            this.value = this.getDateTime(value);
    
        }
    
        ,getDateTime: function(value){
            if (this.tf){
                var dt = new Date();
                var timeval = this.tf.getValue();
                value = Date.parseDate(value.format(this.dateFormat) + ' ' +timeval,this.format);
            }
            return value;
        }
    
        ,selectToday : function(){
            if(this.todayBtn && !this.todayBtn.disabled){
                this.value=this.getDateTime(new Date());
                this.fireEvent("select", this, this.value);
            }
        }
    });
    Ext.reg('datetimepickerfield', Ext.DateTimePicker);
    
    /*DateTime Item Menu*/
    Ext.menu.DateTimeItem = function(config){
        Ext.menu.DateTimeItem.superclass.constructor.call(this, new Ext.DateTimePicker(config), config);
        this.picker = this.component;
        this.addEvents('select');
    
        this.picker.on("render", function(picker){
            picker.getEl().swallowEvent("click");
            picker.container.addClass("x-menu-date-item");
        });
    
        this.picker.on("select", this.onSelect, this);
    };
    
    Ext.extend(Ext.menu.DateTimeItem, Ext.menu.Adapter, {
        onSelect : function(picker, date){
            this.fireEvent("select", this, date, picker);
            Ext.menu.DateTimeItem.superclass.handleClick.call(this);
        }
    });
    
    /*DateTime Menu*/
    Ext.menu.DateTimeMenu = function(config){
        Ext.menu.DateTimeMenu.superclass.constructor.call(this, config);
        this.plain = true;
        var di = new Ext.menu.DateTimeItem(config);
        this.add(di);
        this.picker = di.picker;
        this.relayEvents(di, ["select"]);
    
        this.on('beforeshow', function(){
            if(this.picker){
                this.picker.hideMonthPicker(true);
            }
        }, this);
    };
    Ext.extend(Ext.menu.DateTimeMenu, Ext.menu.Menu, {
        cls:'x-date-menu',
        beforeDestroy : function() {
            this.picker.destroy();
        }
        ,hide : function(deep){
            if (this.picker.tf.innerList){
                if ((Ext.EventObject.within(this.picker.tf.innerList)) || (Ext.get(Ext.EventObject.getTarget())==this.picker.tf.innerList))
                    return false;
            }
            if(this.el && this.isVisible()){
                this.fireEvent("beforehide", this);
                if(this.activeItem){
                    this.activeItem.deactivate();
                    this.activeItem = null;
                }
                this.el.hide();
                this.hidden = true;
                this.fireEvent("hide", this);
            }
            if(deep === true && this.parentMenu){
                this.parentMenu.hide(true);
            }
        }
    });
    
    /*DateTime Field*/
    Ext.ux.form.DateTimeField = Ext.extend(Ext.form.DateField, {
    
        dateFormat: 'd-m-Y'
        ,timeFormat: 'H:i'
    
        ,defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "off"}
    
        ,initComponent:function() {
            Ext.ux.form.DateTimeField.superclass.initComponent.call(this);
            this.format = this.dateFormat + ' ' + this.timeFormat;
            this.afterMethod('afterRender',function(){
                this.getEl().applyStyles('top:0');
            });
        }
    
        ,getValue : function(){
            return this.parseDate(Ext.form.DateField.superclass.getValue.call(this)) || '';
        }
    
        ,onTriggerClick : function(){
            if(this.disabled){
                return;
            }
            if(this.menu == null){
                this.menu = new Ext.menu.DateTimeMenu();
            }
            Ext.apply(this.menu.picker,  {
                minDate : this.minValue,
                maxDate : this.maxValue,
                disabledDatesRE : this.ddMatch,
                disabledDatesText : this.disabledDatesText,
                disabledDays : this.disabledDays,
                disabledDaysText : this.disabledDaysText,
                format : this.format,
                timeFormat: this.timeFormat,
                dateFormat: this.dateFormat,
                showToday : this.showToday,
                minText : String.format(this.minText, this.formatDate(this.minValue)),
                maxText : String.format(this.maxText, this.formatDate(this.maxValue))
            });
            this.menu.on(Ext.apply({}, this.menuListeners, {
                scope:this
            }));
            this.menu.picker.setValue(this.getValue() || new Date());
            this.menu.show(this.el, "tl-bl?");
        }
    });
    Ext.reg('datetimefield', Ext.ux.form.DateTimeField);
    would be great if anyone can further improve the code as now it only satisfy my requirements

    I've tested on FF2, FF3, IE6 & IE7 only

    usage will be :
    Code:
    new Ext.ux.form.DateTimeField({fieldLabel: 'My Date',dateFormat:'d-m-Y',timeFormat:'G:i A'});
    attached is the screenshot


    fixes:
    * 15/04/09 - fix for bug date selection on grayed (non current month date) always set to '0:00'
    Attached Images Attached Images
    Last edited by teddyjas; 14 Apr 2009 at 11:53 PM. Reason: fix for bug date selection on grayed (non current month date) always set to '0:00'

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Vote Rating
    404
      0  

    Default

    Looks very good! Any link to test look & feel of it?
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  3. #3
    Sencha Premium Member teddyjas's Avatar
    Join Date
    Dec 2007
    Location
    Singapore
    Posts
    262
    Vote Rating
    0
      0  

    Default

    uh ya sorry... i dun have test site for it

  4. #4
    Ext User
    Join Date
    Jan 2009
    Posts
    1
    Vote Rating
    0
      0  

    Default

    Can anyone please tell me how I can use this widget in my GWT project?
    I've tried putting the JS file in the jar of gwtextux, by looking at the format/directory structure of the other files. no success.
    any help will be much appreciated.
    thx in advance.

  5. #5
    Sencha Premium Member teddyjas's Avatar
    Join Date
    Dec 2007
    Location
    Singapore
    Posts
    262
    Vote Rating
    0
      0  

    Default

    urgh.... I have not tried GWT myself

  6. #6
    Sencha User nadeemshafi9's Avatar
    Join Date
    Mar 2009
    Location
    Bucks, Hearts - UK
    Posts
    192
    Vote Rating
    1
      0  

    Default

    Does anyone have any idea why the arrow pointing down on the right of teh picker isnt showing but is clickable you know the datepicker thumb or the down arrow for the drop down, its invisible , have i put my plugin code in the wrong place ? i put it after everything but before my own code.

    Thanks

  7. #7
    Sencha User nadeemshafi9's Avatar
    Join Date
    Mar 2009
    Location
    Bucks, Hearts - UK
    Posts
    192
    Vote Rating
    1
      0  

    Default

    im testing on IE 7 and there seems to be issues with the Today function as it works somtimes but somtimes picks the wrong time.

    My config:

    xtype:'datetimefield',
    fieldLabel: 'My Date',
    dateFormat:'Y-m-d',
    timeFormat:'H:i'

  8. #8
    Sencha Premium Member teddyjas's Avatar
    Join Date
    Dec 2007
    Location
    Singapore
    Posts
    262
    Vote Rating
    0
      0  

    Default

    I just tested on IE7 seems its working fine... even using your config.
    the only thing is that you are using seconds as well for the time picker, so the second will always be all same values, same time as the component rendered

  9. #9
    Ext User
    Join Date
    Apr 2009
    Posts
    2
    Vote Rating
    0
      0  

    Default

    Hi,

    It is a greate plugin, exactly what I need for my project. But I found that it could not show me the correct time. Say there are some dates in grey before or after the current month, if I select one of those dates, the time would change to 0:00, no matter what value I input in the time field. I tested it in IE6.

  10. #10
    Sencha Premium Member teddyjas's Avatar
    Join Date
    Dec 2007
    Location
    Singapore
    Posts
    262
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by blacklds View Post
    Hi,

    It is a greate plugin, exactly what I need for my project. But I found that it could not show me the correct time. Say there are some dates in grey before or after the current month, if I select one of those dates, the time would change to 0:00, no matter what value I input in the time field. I tested it in IE6.
    ahhh I can reproduce that bug... then thats the first bug I found hahaha thx.
    Will update it soon...

Page 1 of 8 123 ... LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •