1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    26
    Vote Rating
    0
    gensisns is on a distinguished road

      0  

    Default Time Field

    Time Field


    Has anybody created a time field similar to the date field?

    Thanks in advance,
    Michael

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    408
    Vote Rating
    17
    jweber will become famous soon enough

      0  

    Default


    My suggestion: just use a text field. I find it annoying when things like this are over-engineered. Date popups are useful because it's hard to remember which dates go with which days of the week. But times have no such problem, and adding a bunch of drop-downs just gets in the way. A text field is easy to use, and easy enough to parse -- there aren't too many formats. If you want to make it mouse-friendly, use a combo box like the one in Google Calendar, with entries for every hour or half-hour. But let them type it in whatever format they want (e.g. 15:00 or 3:00 PM or 3pm).

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    15
    Vote Rating
    0
    mnyhuis is on a distinguished road

      0  

    Default Using the mouse scroll wheel on a time field

    Using the mouse scroll wheel on a time field


    For my time fields, I have used two text fields (for Hours and Minutes) separated by a colon character. You can use form validation to limit the range of each field (i.e. 0-23 and 0-59).

    To make things easier for the user, I have implemented a mouse scroll wheel even monitor to increment or decrement the value in each field accordingly.

    Here's the code.

    Code:
    function onWheel(e, element, type) {
       var delta = e.getWheelDelta();
       var val = parseInt(element.value, 10);
       var min, max, interval, twodigit;
    
       switch (type) {
          case 'hour':
             min = 0; max = 23; interval = 1, twodigit = true;
             break;
          case 'minute':
             min = 0; max = 59; interval = 1, twodigit = true;
             break;
          default:
             min = 0; max = 99999999; interval = 1, twodigit = false;
             break;
       }
    
       if (isNaN(val)) {
          val = 0;
       } else if(delta > 0) {
          val += interval;
          if (val >= max)
             val = max;
       } else if(delta < 0){
          val -= interval;
          if (val < min)
             val = min;
       }
    
       if (twodigit && val < 10)
          element.value = '0' + val;
       else
          element.value = val;
    
       e.stopEvent();
    }
    Then attach these even monitors to your hour and minute fields:

    Code:
    hour.el.mon("mousewheel", onWheel, this, 'hour');
    minute.el.mon("mousewheel", onWheel, this, 'minute');
    There may perhaps be a cleaner way to implement this, but for now it works for me

    Hope this helps...
    Michael

  4. #4
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    If you're going to implement scroll wheel event listening, then you should also do the same with the arrow keys as they're far more likely to be used in this fashion.
    Jeff Howden
    Ext JS - Support Team Volunteer
    jeff@extjs.com

    Any and all code samples that are authored by me and posted on the Ext forums or website are hereby released into the public domain and I release anyone or entity of liability by using said code samples unless explicitly stated otherwise.

    Opinions are mine and not necessarily endorsed by Ext, LLC. Please do not contact me directly for assistance unless requested by me.

  5. #5
    Ext User
    Join Date
    Mar 2007
    Posts
    26
    Vote Rating
    0
    gensisns is on a distinguished road

      0  

    Default


    jweber,

    Thanks for being the voice of reason - simpler is better sometimes. Just went with a combo box with a dropdown every five minutes.

    Michael

  6. #6
    Ext User MrKurt's Avatar
    Join Date
    Mar 2007
    Posts
    86
    Vote Rating
    0
    MrKurt is on a distinguished road

      0  

    Default


    Someone pointed me to Google calendar's method today, and I like it. It's a combo box with times in 30 minute increments. Quick selection of 48 times, and the flexibility of typing in your own time.

  7. #7
    Ext User MrKurt's Avatar
    Join Date
    Mar 2007
    Posts
    86
    Vote Rating
    0
    MrKurt is on a distinguished road

      0  

    Default


    Actually, I just built one. Basically, I'm working with items that have a publish date. It's nice if there are a variety of random looking dates available for people to publish from, so I seeded it with the current date, then added/subtracted in 15 minute increments to cover the entire day. The text field takes any time that Date.parse can understand, and reformats it to match what I want. This means you can enter, say, 23:00 and it gets converted to 11:00 am.

    PHP Code:
    var times = [];
    var 
    lastDate obj.PublishDate;

    while(
    lastDate.getDayOfYear() == obj.PublishDate.getDayOfYear())
    {            
        
    times.push([lastDate.format('g:i a')]);
        
    lastDate lastDate.add(Date.MINUTE15);
    }

    lastDate obj.PublishDate.add(Date.MINUTE, -15);

    while(
    lastDate.getDayOfYear() == obj.PublishDate.getDayOfYear())
    {            
        
    times.unshift([lastDate.format('g:i a')]);
        
    lastDate lastDate.add(Date.MINUTE, -15);
    }

    var 
    store = new Ext.data.SimpleStore({
        
    fields : ['times'],
        
    data times
    });
    var 
    combo = new Ext.form.ComboBox({
        
    autoCreate: {tag"input"type"text"size"8"autocomplete"off"}, 
        
    storestore,
        
    displayField:'times',
        
    typeAheadtrue,
        
    mode'local',
        
    triggerAction'all',
        
    emptyText:'Time...',
        
    selectOnFocus:true,
        
    validator: function(value){ return isNaN(Date.parse('1/1/2007 ' value)) ? 'Not a valid time' true; },
        
    maskRe: /a|p|A|P|:|\s|\d/,
        
    valueobj.PublishDate.format('g:i a'),
        
    listeners : {
            
    change : function(){ 
                        var 
    time Date.parse('1/1/2007 ' this.getValue()); 
                        if(!
    isNaN(time)) this.setRawValue((new Date(time)).format('g:i a')); 
                    }
        }
    }); 

  8. #8
    Sencha User iomanip's Avatar
    Join Date
    Jul 2008
    Location
    El Salvador
    Posts
    32
    Vote Rating
    0
    iomanip is on a distinguished road

      0  

    Exclamation [2.1][TimeField] Format issue

    [2.1][TimeField] Format issue


    When I use the "format" config option for Ext.form.TimeField, and use the following regex format "h:i a" I was waiting for something like '04:30 am' to be showed in the combo Box. But it seems that TimeField does not reconize very well the format... because it showed me a format like this '4:30 pm' (even if the range is from 07:00 AM to 11:00 PM the PM is always setted). This is my code


    Code:
    new Ext.form.TimeField({
                id:'horaInicio',
                fieldLabel : e2cs.cal_locale.task_qtip_starts,
                readOnly: true,
                emptyText : e2cs.cal_locale.hourEmptyText,
                blankText : e2cs.cal_locale.hourEmptyText,
                width: 100,
                allowBlank :false,
                minValue: '07:00 AM',
                maxValue: '11:00 PM',
                format:'h:i:s a',
                invalidText: e2cs.cal_locale.dateInvalidText,
                listeners:{
                    select :function(combo, record, index){                      Ext.getCmp('startdate').setValue(Ext.getCmp('fechaInicio').getValue().format('m/d/Y') + ' ' + Ext.getCmp('horaInicio').getValue());
                        ECalendar.validarFechas();
                    }
                }
            });
    I'm using Ext 2.1

    Any comments about that?

  9. #9
    Sencha User
    Join Date
    Jul 2009
    Location
    Beijing,China
    Posts
    7
    Vote Rating
    0
    wuyahuang is on a distinguished road

      0  

    Thumbs up Thank you very much

    Thank you very much


    Quote Originally Posted by iomanip View Post
    When I use the "format" config option for Ext.form.TimeField, and use the following regex format "h:i a" I was waiting for something like '04:30 am' to be showed in the combo Box. But it seems that TimeField does not reconize very well the format... because it showed me a format like this '4:30 pm' (even if the range is from 07:00 AM to 11:00 PM the PM is always setted). This is my code


    Code:
    new Ext.form.TimeField({
                id:'horaInicio',
                fieldLabel : e2cs.cal_locale.task_qtip_starts,
                readOnly: true,
                emptyText : e2cs.cal_locale.hourEmptyText,
                blankText : e2cs.cal_locale.hourEmptyText,
                width: 100,
                allowBlank :false,
                minValue: '07:00 AM',
                maxValue: '11:00 PM',
                format:'h:i:s a',
                invalidText: e2cs.cal_locale.dateInvalidText,
                listeners:{
                    select :function(combo, record, index){                      Ext.getCmp('startdate').setValue(Ext.getCmp('fechaInicio').getValue().format('m/d/Y') + ' ' + Ext.getCmp('horaInicio').getValue());
                        ECalendar.validarFechas();
                    }
                }
            });
    I'm using Ext 2.1

    Any comments about that?



    iomanip:thank you very much.I had used datafield in my code.but I don't want users input information at datafield.I just want they select it.I spend few hours with it.Now it's worked in my expect.
    Last edited by wuyahuang; 7 Aug 2009 at 12:28 AM. Reason: up

  10. #10
    Sencha User
    Join Date
    Feb 2012
    Posts
    4
    Vote Rating
    0
    IlyasFacihov is on a distinguished road

      0  

    Default My time Field

    My time Field


    Hello, my realise time field -

    App.TimeField = Ext.extend(Ext.Panel, {
    border: false,
    baseCls: null,
    layout: 'column',
    isFormField: true,
    layoutConfig: {
    columns: 3
    },
    // private
    initComponent : function(){
    this.items=[{
    xtype: 'spinnerfield',minValue:0,maxValue:23,allowDecimals:false,incrementValue:1,readOnly:false,
    width: 40,
    maskRe: /[0-9]/,
    allowBlank:this.allowBlank,
    maxLength: 2,
    fieldLabel:this.fieldLabel,
    name: this.name+'H',
    ref: this.name+'H',
    listeners:{
    'SpinUp':function(){
    this.clearInvalid();
    },
    'SpinDown':function(){
    this.clearInvalid();
    }
    }
    }, {
    text: ':',
    xtype:'label',
    height:22,
    baseCls: null,
    style: 'font-weight: bold; font-size: 16px; padding-left: 1px; padding-right: 1px;',
    border: false
    }, {
    xtype: 'spinnerfield',minValue:0,maxValue:55,allowDecimals:false,incrementValue:1,readOnly:false,
    width: 40,
    maskRe: /[0-9]/,
    allowBlank:this.allowBlank,
    maxLength: 2,
    name: this.name+'M',
    ref: this.name+'M',
    listeners:{
    'SpinUp':function(){
    this.clearInvalid();
    },
    'SpinDown':function(){
    this.clearInvalid();
    }
    }
    }];
    Acr.TimeField.superclass.initComponent.call(this);
    },
    setValue:function(val){
    if(val&&(/^\d{2}:\d{2}$/i.test(val))){
    var hour=val.charAt(0)+val.charAt(1);
    var min=val.charAt(3)+val.charAt(4);
    this[this.name+'M'].setValue(min);
    this[this.name+'H'].setValue(hour);
    }
    },
    isValid:function(){
    var err=0;
    if(!this[this.name+'M'].isValid(false))err++;
    if(!this[this.name+'H'].isValid(false))err++;
    return err>0?false:true;
    },
    getValue:function(){
    var hour=this[this.name+'H'].getValue();
    var min=this[this.name+'M'].getValue();
    if((typeof hour=='number')||(typeof min=='number')){
    if(hour<10)hour='0'+hour;
    if(min<10)min='0'+min;
    return hour+':'+min;
    }
    else return false;
    }
    });
    Ext.reg('app-timefield',App.TimeField);


    //Release standart function isValid, setValue, getValue - return time format H:i ([00:00])



    tmfld.jpg

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar