Ext.ux.DateTimeField - DateTimePicker for ext4, also DateTimeMenu, TimePickerField

[wzl002]

dateTime.jpg

Add a time spinner to the DatePicker.

From picture left, there are DateTimeMenu, TimePickerField, DateTimeField, a simple example.js for this is contained in the zip.

Any improve or bug report Welcome!


update
-29/06/2011 bug resolve: [Creating multiple instances of the DateTimeField results in all time fields appearing within the first field.]
Thank emrejen and zombeerose!


update
-27/04/2012 upgrade for 4.1.0-gpl, Now it can work at 4.1.0 and GridColumn Editor.
-27/04/2012 the time part in init value can work now.
-27/04/2012 the Ext.ux.form.TimePickerField could get a Date type init value.
-27/04/2012 fix the format didn't work bug. BUT the format for time part 'H:i' is immutable.

Thank Nicname, janiceh, jonaldomo.
Any improve or bug report Welcome!

update datetime_4.2.1.zip
- 25/08/2014
- Fix the alias name 'timepicker' conflict, change to 'uxtimepicker'.
- The width can auto-suit different theme now.

PS:My code always works well in chrome and IE9, if you have problem, please reply with your test code.


attachment remark:
datetime_2.zip for Ext-4.0.x
datetime_4.1.0.zip for Ext-4.1.0-gpl
datetime_4.2.1.zip for Ext-4.2.1


the js files should be import in order:
<script type="text/javascript" src="..../UX_TimePickerField.js"></script>
<script type="text/javascript" src="..../UX_DateTimePicker.js"></script>
<script type="text/javascript" src="..../UX_DateTimeField.js"></script>
<script type="text/javascript" src="..../UX_DateTimeMenu.js"></script>

[morfeusz]

Very good and useful extension.
Thanks!

[emrejen]

I have included all the files, and getting:
ext-all-debug.js:4786An uncaught error was raised with the following data:
ext-all-debug.js:4787
Object
msg: "Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Ext.ux.DateTimePicker"
sourceClass: "Ext.Loader"
sourceMethod: "require"
__proto__: Object
ext-all-debug.js:4793Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Ext.ux.DateTimePicker
ext-all-debug.js:4800Uncaught Error
Ext.Error.Ext.extend.statics.raiseext-all-debug.js:4800
Loader.Ext.Loader.requireext-all-debug.js:4403
Manager.registerPostprocessor.itemsext-all-debug.js:4692
Ext.Class.Class.processext-all-debug.js:3023
Ext.Class.Class.processext-all-debug.js:3024
Ext.Class.Classext-all-debug.js:3028
Manager.Ext.ClassManager.createext-all-debug.js:3582
(anonymous function)ext-all-debug.js:1364
(anonymous function)DateTimeField.js:1
ext-all-debug.js:3520[Ext.ClassManager] Overriding existing alias: 'widget.timepicker' of: 'Ext.picker.Time' with: 'Ext.ux.form.TimePickerField'. Be sure it's intentional.
ext-all-debug.js:3712[Ext.Loader] Synchronously loading 'Ext.ux.form.DateTimeField'; consider adding Ext.require('Ext.ux.form.DateTimeField') above Ext.onReady
ext-all-debug.js:4786An uncaught error was raised with the following data:
ext-all-debug.js:4787
Object
ext-all-debug.js:4793Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Ext.ux.form.DateTimeField
ext-all-debug.js:4800Uncaught Error
Ext.Error.Ext.extend.statics.raiseext-all-debug.js:4800
Loader.Ext.Loader.requireext-all-debug.js:4403
Loader.Ext.Loader.syncRequireext-all-debug.js:4351
(anonymous function)ext-all-debug.js:1364
Manager.Ext.ClassManager.instantiateext-all-debug.js:3716
(anonymous function)ext-all-debug.js:1364
(anonymous function)fabrix_text.jsp:16
isEventext-all-debug.js:10138
call

[emrejen]

Found the issue

[emrejen]

dateTime.jpg

Add a time spinner to the DatePicker.

From picture left, there are DateTimeMenu, TimePickerField, DateTimeField, a simple example.js for this is contained in the zip.

Any improve or bug report Welcome!

I think that I found a bug
this widget works well, and nice if it's the onlScreenshot.jpgy of it's kind on the page
But once, you add more then one, then 2 things happen.
1. when you click on the first one, it opens nice, and when you click on it again, you have 2 time object inside the widget


Otherwise this looks like a very nice work, but some ironing needs to be done
2. the 2nd one that you try to open will open as a normal data object, and not the new shiny one.

[zombeerose]

I can confirm the first issue reported by emrejen. Creating multiple instances of the DateTimeField results in all time fields appearing within the first DTF.

Thanks for the ux. Anxious for a patch

[jonaldomo]

Will this work in as an editor in a grid for a datetime object?

Thanks.

[wzl002]

I can confirm the first issue reported by emrejen. Creating multiple instances of the DateTimeField results in all time fields appearing within the first DTF.

Thank you!
I had edited the post and uploaded a new zip.
I'm very sorry for this bug because I had found and resolve this before I post it, but I made a big mistake when upload the js files.

Expect more feedback. Thanks!

[wzl002]

Will this work in as an editor in a grid for a datetime object?

I didn't test that, you can try it and if there are any bug, I will be glad to help.

[janiceh]

Thanks for this extension, it's very useful. Just that I found if the datetimefield is set for example to 05/05/2011 05:05 PM, when I open the picker. The date is set correctly to 05/05/2011, but the time is set to 12:00 instead of 17:05.