the singularity of being and nothingness
Sencha Touch 2: Ext.ux.field.TimePicker
Today I wrapped up work on a custom Sencha Touch 2 form field component called TimePicker which, as indicated by its name, allows you to select a custom time via the faux-OS picker dialog.
There are a bunch of other TimePickers out there for Touch, but most are old or just don’t do what I want them to do. So I made my own 🙂
If you’re interested in using this, head over to my GitHub repo and pull it into your project. There’s a bunch of config, but it’s all documented in the repo.
If you do end up using it, please let me know what you think. I’d love feedback on usefulness, suggestions for improvements, etc.
| Print article | This entry was posted by existdissolve on January 27, 2013 at 3:50 pm, and is filed under Uncategorized. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |
about 12 years ago
Looks really useful. Thanks for sharing this. My wish would support for i18n internationalization. Ideally so I can just drop in a config property that replaces all words with translations from my own JSON file.
about 12 years ago
Hi Tony–
Thanks! The internationalization sounds like a great idea. Do you have an example or two of various configs that you would like to support? I’d be happy to integrate something like that into this.
Thanks!
about 12 years ago
Hi ExistDissolve,
Really nice component, thanks for sharing.
I’m not sure if I’ve done something wrong but when a time is shown in the field as e.g.03:00 PM i.e. uses meridiem and is greater or equal to 13:00 when clicking in the field the picker is not defaulting to the correct value i.e. 03:00 PM. Instead it defaults to 01:00 PM.
I think the setValue in Time.js should have –
hour : useMeridiem ? value.getHours()==0 ? 12 : value.getHours()>=13 ? value.getHours() – 12 : value.getHours() : value.getHours(),
instead of just –
hour : useMeridiem && value.getHours()==0 ? 12 : value.getHours(),
This way if using Meridiem and greater 12 it turns it into correct AM/PM time.
Cheers,
Rob.
about 12 years ago
Hi Rob–
If you have useMeridiem=true, then you should also set the endHour=12. When using a 24-hour based clock (e.g., 13:00, 15:00), meridiems aren’t applicable.
I will, however, add some debugging messages in there to warn about that.
Thanks!
about 11 years ago
It would be nice if the documentation had an example =\
about 9 years ago
Rob is correct — the picker is not set properly when using a 12 hour time clock vs 24 hour no matter what the endHour is set to. The setValue() function of the picker does not account for 12 hour time because getHours on the date object ALWAYS returns 0-23.
setValue: function( value, animated ) {
if ( Ext.isDate( value ) ) {
var useMeridiem=Ext.Array.contains( this.getSlotOrder(), ‘meridiem’ );
var hours = value.getHours();
if(useMeridiem){
if(hours == 0){
hours = 12;
}else if(hours > 12){
hours -= 12
}
}
value = {
hour : hours,
minute: value.getMinutes(),
second: value.getSeconds(),
millisecond: value.getMilliseconds(),
meridiem: value.getHours() >= 12 ? this.getPMText() : this.getAMText()
};
}
this.callParent([value, animated]);
}