Time Field

[gensisns]

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

Thanks in advance,
Michael

[jweber]

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).

[mnyhuis]

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.

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:

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

[JeffHowden]

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.

[gensisns]

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

[MrKurt]

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.

[MrKurt]

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.

var times = [];
var lastDate = obj.PublishDate;

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

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"}, 
    store: store,
    displayField:'times',
    typeAhead: true,
    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/,
    value: obj.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')); 
                }
    }
}); 

[iomanip]

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

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?

[wuyahuang]

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

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.

[IlyasFacihov]

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