[2.0] Ext.ux.form.TimeField

[2.0] Ext.ux.form.TimeField

The SpinnerField is great. It's familiar, it looks good and it just works!

Recently @curlybracket made an extension named "Ext.ux.TimePicker" which using the SpinnerField but I wanted something a little more familiar and something that looks a little better. Not that Ext.ux.TimePicker doesn't look familiar, I think it could be better with just one SpinnerField.

I had to modify 2 of the ux files that is distributed with extjs - Spinner.js and SpinnerField.js. Attached are these files.

UPDATE!!!!!!!!!!!!
I have added a config option "twentyFour" that if set to true will display the Ext.ux.TimeField in a 24 hour time format. If set false, it will be in a 12 hour time format with am/pm. Attachment has been updated aswell as the online demo and screen shot below.

UPDATE!!!!!!!!!!!!
I have reworked the spin function so it will now keep an updated millisecond count in the config. This will now act as a clock so when the minutes pass 60, it'll add an hour aswell as change the minutes to zero. The online demo has been updated aswell as the attachment here. Also if you call the getRawValue() it will return the milliseconds where getValue() will return what you see in the field.

UPDATE!!!!!!!!!!!!
Add some more functions due to request... getHours(), getMinutes(), getSeconds(), isAM(), and isPM(). First three will return a number, the last two will return boolean.

UPDATE!!!!!!!!!!!!
Cleaned up the code and am using the date.format() functions instead of doing it all by hand.

UPDATE!!!!!!!!!!!! 2.0
Instead of having seperate functions to get the hours and minutes, I have decided to modify the getValue() function so now you enter the format you want returned. eg:

What browser are you using? I've tested with Chrom/FF/Safari on Mac/Win and hours, minutes, seconds, and am/pm move up or down.

Originally Posted by Animal

And the 24 hour one increments/decrements seconds, but that just wraps at 60/0 without ticking the minute over.

I did not design this first version to tick the minute over when the seconds reach 60. When I can, this will be a config option so you can have the choice.

Originally Posted by Animal

Keep a Date object containing the value and use Date.add to add to it whatever increment has been configured (You should be able to configure an increment value and an increment unit)

I get what you are saying on this and it'll probably replace much of the code that I still need to go through and cleanup.

This was just a first version. In fact, I haven't even started numbering it yet so right now I'd put it in the proof of concept or dev stage. You can tell this by the lack of code cleanup that has been done. I posted it to let people know of the development and @javaman found a couple bugs that I overlooked. I appreciate you taking time to help me with this extension and have a to-do list started!