Ext.ux.TimePicker

[curlybracket]

I am preparing the release of a TimePicker component, basing on a library to provide an objectorientated api for the HTML 5 canvas tag and want to hear your opinions about my current state.

You can find a demo right here:
http://js.curlybracket.de/Ext.ux.TimePicker/demo.html

Description:
I'm going to release the component the next days in this thread, i'f just to clean some mess up. The first alpha release of the canvas library is currently hosted at google code.

The TimePicker component makes use of the Ext.ux.Canvas and Ext.ux.Clock components and utilizes three Ext.ux.SpinnerField components for the time components. All methods of the Ext.form.Field class are properly overloaded. A value has to be given and is returned in the format "HH:MM:SS". The component is currently tested in Firefox 3.5 and IE 8.

What's also on the Roadmap?

• Support to drag a clock hand and change the value directly in the canvas
• Support different rendering formats (like a small clock on the right instead of the big one)

Snapshot:
clock.png

Downloads:
(Modify the path to your extjs manually in the demo.html file please)
Version 0.2

• More Ext-like rendering of the clock
• Enable circular scrolling of the spinners
• Add configuration values to customize the clock rendering process
• Updated canvas component to r25

Version 0.3

• Added render and afterrender events to the ClockController
• Added extraClockCfg property to the TimePickerField to make setting clock configurations easier
• Translated doc comments of ClockController into english. Didn't realize i've left them in german in the previous release...

Looking forward to read your opinions

[mitchellsimoens]

I like it! Is there an option to hide/show the clock. You could have the clock be able to render to a DOM element aswell.

[galdaka]

Hi,

Excellent work. Sorry, my English is poor.

1) Will be posible add this widget as formField?

2) Would be great circular scrolling of hours, minutes and seconds. When field arrive to 23 / 59, goto 0,1,2...

3) Will be clock CSS customizable?

Thanks in advance,

[curlybracket]

I like it! Is there an option to hide/show the clock. You could have the clock be able to render to a DOM element aswell.

Nice idea, i'll add an option to hide/show the clock.
The clock itself is an Ext.ux.Clock component, so you can do everything you want with it.

1) Will be posible add this widget as formField?

The class is deriving the Ext.form.Field class, so it's already fully functional in a form.

2) Would be great circular scrolling of hours, minutes and seconds. When field arrive to 23 / 59, goto 0,1,2...

Nice idea, i add that to my list.

3) Will be clock CSS customizable?

No, that's not possible because the clock is based on the HTML 5 canvas tag, so the clock is drawn to a plain area and not customizable by css. I'll add some more configuration values to customize the rendering of the clock a bit more.

[leeyesong]

I like it very much, thanks...

[wm003]

Does (of course) not work in IE6. You should catch that with "if(Ext.isIE6)" to switch off the canvas clock in that case and just show the spinner. Now it leaves a js-error.

besides that: very nice extension

edit: Idea: In case canvas is not supported you could switch the display to 3 transparent gif layers(because if canvas is not supported PNG won't also) with different line-positions of hour/minute/seconds line. That would also make the clock themeable / CSS customizable

[curlybracket]

Does (of course) not work in IE6. You should catch that with "if(Ext.isIE6)" to switch off the canvas clock in that case and just show the spinner. Now it leaves a js-error.

I've only tested in IE8 and there it's working. That's because i included the excanvas script for non-canvas browsers. I'll test the script in IE6.

[curlybracket]

I've just updated the TimePicker component with a more ExtJS-like layout and the support to circular scroll the different spinners.
Also you can customize the clock rendering process a bit by using the clockCfg configuration value of the TimePicker.
You can find the version 0.2 download in the first post.

I've some rendering problems with the clock in the IE6. IE8 is working in compat and non-compat mode, so i think the IE7 is also fine. I'll have a look on that.

[scipio]

Very cool! Great work.

[jheid]

Great work.

Two additional points:

1. Would be great if the hour/minute will increase if the minute/second is 59+1 (or 0-1)
2. I would implement a scroll wheel support so that you can scroll the hours/minutes/seconds faster