PDA

View Full Version : [2.0] Ext.ux.form.TimeField



mitchellsimoens
10 Jan 2010, 7:32 PM
The SpinnerField is great. It's familiar, it looks good and it just works!

Recently @curlybracket made an extension named "Ext.ux.TimePicker (http://www.extjs.com/forum/showthread.php?t=88979)" 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:

TimeField.getValue('h:i:s a')
I have decided to leave the isAM() and isPM() functions though.

Demo here (http://www.simoens.org/ux/TimeField/)

elnove
11 Jan 2010, 12:26 AM
very nice :)
thanks fow sharing.

javaman
13 Jan 2010, 10:01 AM
Well, i looked the demo and there are bugs

the minutes can be negative and the bumber 60 appears on minutes instead of 00

[]'s

Animal
13 Jan 2010, 10:24 AM
Really, it should just extend SpinnerField, maintain an internel Date object, and add a certain increment to that on spin.

So you could have it incrementing in seconds, minutes or hours.

And you could specify a format string for it to display the time.

mitchellsimoens
13 Jan 2010, 7:42 PM
Really, it should just extend SpinnerField...

I tried but the problem is is that the standard SpinnerField is an Ext.form.NumberField so I had to change that to Ext.form.TextField.


And you could specify a format string for it to display the time.

Was going to have this feature in a next release. The girlfriend wants me to make an app for her so whatever boss lady wants! lol :D

mitchellsimoens
13 Jan 2010, 7:56 PM
the minutes can be negative and the bumber 60 appears on minutes instead of 00

Both bugs are fixed! Online demo is fixed and the zip file above has been reuploaded!

Animal
13 Jan 2010, 10:04 PM
Still does not work.

The 12 hour clock does not increment/decrement at all on spin.

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

You must perform incrementing/decrementing using Date arithmetic.

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)

mitchellsimoens
14 Jan 2010, 4:08 PM
The 12 hour clock does not increment/decrement at all on spin.

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.


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.


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!

javaman
14 Jan 2010, 4:48 PM
:)

I thing you could do: in 12hrs, when you go up and pass by 12 hour, it could change am/pm, like on watch

[]'s

mitchellsimoens
14 Jan 2010, 5:26 PM
I thing you could do: in 12hrs, when you go up and pass by 12 hour, it could change am/pm, like on watch

Yeah, I'll add this as a config option like what I was telling Animal when the seconds get too 60 it'll add one to the minutes.

mitchellsimoens
23 Jan 2010, 3:29 PM
I have updated the online demo.

Instead of doing the math via the script, I now have it keep track of the milliseconds and the just format that. It'll just add x amount of milliseconds to the current milliseconds and then formats the field.

I also modified the default getRawValue() function. The new getRawValue() will return the milliseconds while the getValue() will return the same formatted time that you see in the field.

Let me know if you like this better. The root post has the updated attachment and the online demo has been updated.

javaman
23 Jan 2010, 4:51 PM
Well, I tested only the demo online and it looks very nice :)

But is possible to get the minutes, hours, everything you want?

[]'s

mitchellsimoens
23 Jan 2010, 6:29 PM
You mean have like a separate function to return just the hours or just the minutes to whatever is being shown? That would be an easy addition if that's what you'd want!

javaman
23 Jan 2010, 6:33 PM
Yeah, that's it!

Sometimes you just want to know the hour, if it's am or pm and things like that :)

[]'s

mitchellsimoens
23 Jan 2010, 7:22 PM
@javaman

Check out the online demo! Add a few buttons for ya! Also updated the zip file at the root post.

Anything else ya think of?

mitchellsimoens
23 Jan 2010, 8:14 PM
Cleaned up some code. Instead of doing all the formatting by hand, I'm using the date.format() function now. Can't believe I didn't think of that earlier so now it's a lot better! 1 line of code instead of about 30!

Animal
24 Jan 2010, 12:47 AM
The 24 hour one does not change at all. It just flickers.

In fact what it is doing is switching from am to pm on every repeat of the click event.

mitchellsimoens
24 Jan 2010, 7:19 AM
The 24 hour one does not change at all. It just flickers.

Just tested with IE, FF, and Chrome on Win and it changes up and down as expected so can you tell me what your using so I can see what you're seeing?


In fact what it is doing is switching from am to pm on every repeat of the click event.

What I have the script to do, and it using the same function for both types just formats it differently, is I get where the cursor is so that I can tell which time to get (hour, minute, second or am/pm), I add x amount of milliseconds to the current milliseconds that is held in a config option, create a new date object and then format it.

I'm not doing any of the math or formatting by hand anymore. Pretty much letting the date function take care of that. Only math is to add x amount of milliseconds. So I'm not sure why it would be switching from am to pm on every click event because it should just be adding milliseconds and then formatting the new date object.

javaman
24 Jan 2010, 8:38 AM
A lot of updates, congratulations!

I've tested here, without problems.

I don't know anything more you can do it....hehe

EDIT

You could do a function that we pass an hour and it returns the difference of the hour we passed and the hour of the component.....

[]'s

mitchellsimoens
24 Jan 2010, 8:43 AM
I just made some changes. I have dropped the following functions: getHours(), getMinutes(), and getSeconds(). The reason for this is that I have modified the getValue() function. U can pass a date string that will format the time to whatever u need. This can return just the hours, for example, or u can mix and match some.

Couple of examples:

To get just the hours u can do this
TimeField.getValue('h')

To get the minutes u can do this
TimeField.getValue('i')

To get seconds since. EPOCH
TimeField.getValues('U')

If u check the online demo, I have provided the descriptions and what it would return.

I have decided to leave the isAM() and isPM() functions.

Let me know if u like this change, it provides flexibility.

mitchellsimoens
24 Jan 2010, 8:58 AM
You could do a function that we pass an hour and it returns the difference of the hour we passed and the hour of the component.....

I don't think this will become part of this extension. It's a function that will be used but its something you'd have to do in ur script.

But keep the ideas coming! I haven't tested what would happen if this extension was part of a form and you submit it, what value it would pass. It does give a default value of what it displays but it could just break the form. Will test this when I get home.

curlybracket
30 Jan 2010, 6:35 AM
Very cool component. Interested in merging your Ext.ux.form.TimeField and my Ext.ux.TimePicker?

mitchellsimoens
30 Jan 2010, 6:36 AM
Very cool component. Interested in merging your Ext.ux.form.TimeField and my Ext.ux.TimePicker?

lol I was just typing the same thing on your update as I got the email saying you posted on mine! haha You provide the clock, I'll provide the time field?

curlybracket
30 Jan 2010, 6:38 AM
lol I was just typing the same thing on your update as I got the email saying you posted on mine! haha You provide the clock, I'll provide the time field?

Yes, that would be perfect. I'm currently in a hurry, but i'll have a deeper look in your component later on.

mitchellsimoens
30 Jan 2010, 6:49 AM
Yes, that would be perfect. I'm currently in a hurry, but i'll have a deeper look in your component later on.

That's cool! Using your example, I have a clock displaying already :)

mitchellsimoens
3 Feb 2010, 2:49 PM
Just bumping to let everyone know of the new project.... Ext.ux.TimeFieldPicker (http://www.extjs.com/forum/showthread.php?t=91027)

madcity
8 Mar 2010, 11:46 PM
This is so cool! Thanks!

It would be great if you could set a default start time, say 8:00 am and then set an increment for the minutes so it would spin for example from 8:00 am, 8:15 am, 8:30 am, etc.

Thanks again for the great code!

mitchellsimoens
9 Mar 2010, 3:28 PM
This is so cool! Thanks!

It would be great if you could set a default start time, say 8:00 am and then set an increment for the minutes so it would spin for example from 8:00 am, 8:15 am, 8:30 am, etc.

Thanks again for the great code!

Glad you like this! Will look into adding your suggestions.

raj_ds
6 Apr 2012, 8:29 AM
Its really excellent extjs component. Just i want have hh:mm AM only.
how can we do? thanks for all work

titusaduxass
25 Sep 2012, 10:32 PM
Hi,

Do you have a newer version of this that works with ExtJS 4? I have been trying to hack around with spinnerMod.js and TimeField.js, but I don't seem to be able to get it working!

Apart from the obvious Date().format changes that need to be done, do you have any other pointers?

I look forward to hearing from you.

Kind Regards,

Cj