Threaded View

  1. #1
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default [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:
    Code:
    TimeField.getValue('h:i:s a')
    I have decided to leave the isAM() and isPM() functions though.

    Demo here
    Attached Files