Extend Date Picker for DateTimePicker but problem with numberfield not editable

[Stefan B]

You can also do what Guilherme Lopes Portela did in his DateTimeField component - instead of messing with date picker's template, just add a separate picker for hours and minutes next to it.

Right, but then it basically behaves like two separate components. Our UX department wouldn't like that

BTW, the UX you made doesn't work with Triton, Neptune Touch and Crisp Touch themes. Also, time fields are reset if you use month/year picker.

Funny, the theme I'm developing with is Triton. Or are you referring to "modern" Triton? This is only tested under "classic", should have been more clear about that, sorry.

[hakimio]

Right, but then it basically behaves like two separate components. Our UX department wouldn't like that

The pickers are separated but the component is still the same. Take a look at the screenshot.

Funny, the theme I'm developing with is Triton. Or are you referring to "modern" Triton? This is only tested under "classic", should have been more clear about that, sorry.

No, I only tested with classic toolkit. The problem is that you can't type anything directly into numberfields, you can only use spinners to adjust the value. It seems to work with classic and neptune theme but not with triton.

[Stefan B]

That's strange, the number fields not being able to receive focus and becoming editable via via keyboard is one of the key changes I made to the original code. Are you sure you checked out the code I posted here instead of the OP's code?

And yes, you are right, the date and time input controls are of course part of the same component. When I say "behave", I refer to the user experience, not the implementation.

[hakimio]

I tested the fiddle posted by milanz. The component works fine when Classic or Neptune theme is used but not the others. I am using the latest version of Chrome. Haven't tested with anything else.

[Stefan B]

Just increase the default number field width to 80 back from 50. The visible portion of the fields simply becomes too small with Triton's default padding.

[hakimio]

Yes, it works then. Now only resetting time when year/month picker is used issue has to be fixed and a config to hide seconds numberfield has to be introduced.

[Stefan B]

Okay, had to override the "onOkClick" method that handles month picker selection to apply the time information from the spinners.
Fixed it in the code I posted.

[hakimio]

Thanks. The fix seems to work well.
Just a couple other small issues:

• Pressing "Today" or space bar should set the time to current time instead of "0:00:00".
• The numberfield width should depend on the theme.

Also, here is my slightly modified version which doesn't include seconds field and reverts the numberfield width to 50px to look good with Crisp and Neptune themes.

[milanz]

@ milanz,

apart from the classpath of the date picker that I didn't adjust before pasting the code here (fixed above), and the changed default width for the time spinners, were there any other issues? I'd like to avoid them too in my app obviously but were not able to spot any more diffs between your fiddle and my code.

I think that's the only thing I modified with your version. But today I noticed that adding the control as an editor control on a grid column was not updating the cell value as expected - but I haven't had time to look into the cause.

[deathgod86]

Managed to solve it after studying ExtJS source code.
I updated my Sencha Fiddle to make it work.
Basically, the hack is on the picker, onMouseDown() function.
Because of it prevent all default events on mouse down, so it cancel all the events and make those textfield / numberfield you used for the time not functioning.
Hence, I check the targetId, and do nothing (aka do not prevent defaults) when it is numberfield.

Updated Sencha Fiddle at:
https://fiddle.sencha.com/#fiddle/tc3