View Full Version : Datetimepicker

7 Dec 2011, 4:36 AM
I'm not sure if someone have done Datetimepicker in ST2, but have seen couple of those in ST1.
You can have a look into https://github.com/tomalex0/SenchaTouch-v2-Datetimepicker.
Screenshots are available at https://github.com/tomalex0/SenchaTouch-v2-Datetimepicker/tree/master/img

I have also setup few examples to get a better idea of implementation of DateTimePicker and DateTimePickerField.

Have a look and let me know any issues:).

12 Jan 2012, 3:09 PM
Thanks for sharing, I had no problems in the implementation

nareh tank
8 Feb 2012, 2:58 AM
Not working with Sencha Touch 2 beta .
It gives Cannot call method 'getPageBox' of null this error while click on datetimepickerfield.

8 Feb 2012, 7:47 PM

Please check the github for updated code, i have made a quick fix.

nareh tank
8 Feb 2012, 9:40 PM
Thanks tomalex0 now this work for me.
thanks again.

18 Apr 2012, 10:45 AM
They added usedom parameter to picker slot getvalue function. To fix just change DateTime.js line 155 to...

values[item.getName()] = item.getValue(true);

22 Jun 2012, 12:50 AM
FYI, I got the Cannot call method 'getPageBox' of null error too, but the latest JS files on Github as recommended by tomalex0 worked for me.

28 Jun 2012, 6:36 AM
The Cannot call method 'getPageBox' of null error happens in the Github version for the Cancel button.

11 Jul 2012, 11:52 PM
Hi tomalex0,

I used your datetimepicker on my android app and successfully distribute it to google play.
But when i'm distributing my iOS app, my app is rejected and i got an email stated that the reason why my app is rejected is because the datetimepicker field is not in compliance with App Store Review Guidelines.
They tested my app in iPad running iOS 5.1.1. This is their comment:

"As recommended by the iOS Human Interface Guidelines, Pickers should only be presented within a popover element, Pickers should not take up the entire width of the screen."
In my understanding, your datetimepicker take up the entire width of the screen even on iPad. Or should i do something to make it presented within a popover element when the app is running on iPad?


12 Jul 2012, 2:13 AM

This is new to me, is your app targeted ipad alone ? what about other lower IOS versions? I think its better you show the picker in some pop up then.

I haven't actually considered these things while developing the component, anyway thanks for the information.

12 Jul 2012, 3:07 AM
Are you using select fields in your app? which is actually rendered in a action sheet rather than popup.

just want to know how IOS select fields in ipad are displayed, popup or action sheet?

12 Jul 2012, 3:13 AM
it targeted universal device, including iphone & ipad.

i tried on my iphone version 4.3.3 and of course it's ok since the popover elements only required for ipad device.

i'm not sure how to put your datetimepicker in popover element, but I'll try to look for it. It will be very great if your very useful datetimepicker can handle this and put the picker in popover only in ipad device, since that is the behavior of sencha built-in picker.

12 Jul 2012, 3:38 AM
thanks for quick reply!

yes, i'm using selectfield, datepickerfield and your datetimepickerfield.
all of them will use the entire width of the screen on iphone device, but only selectfield will be displayed as popup on ipad device. Both sencha datepickerfield and your datetimepickerfield still use the entire width of the screen on ipad.

This is example of popover element in ipad:


You can explore more in this link (http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html#//apple_ref/doc/uid/TP40006556-CH13-SW1).

Himmat Bhanushali
10 Sep 2012, 6:29 AM
I have used datetimepickerfield in form panel
After tapping on the cancel button , getting foloowing error:

Uncaught TypeError: Cannot read property 'dom' of null

Next time when picker is opened, Slot values become 1st january 1980.

Can anyone give me the fix for this?

3 Oct 2012, 9:39 AM
Hi, thanks for this great component extension! I'm trying to use this in my app, but am having trouble figuring out how to use it via Sencha Architect 2...

I looked at the form.js and picker.js examples that were on github as well as in the downloaded .zip file and saw where it's added via ST2 code, but when I try to add this code within Architect 2, the .js file is read-only...

Is there a way to load this custom component extension into Architect 2 so I can drag it onto my container /formpanel?

Thanks so much! Any help or guidance is appreciated..

13 Dec 2012, 7:37 AM
Not sure if anyone else ran into this bug, but I recently updated to Sencha Touch 2.1.0. When I ran some tests on the code base, I noticed that when I configured the Ext.ux.picker.DateTime extention to use the time slots configuration (01:01 AM/PM) the value selected in the picker never returned back to the form field.

xtype: 'datetimepickerfield',
label: 'Payment Time',
name: 'offline_payment_time',
format : 'h:i A',
picker: {
minuteInterval : 1,
ampm : true,
slotOrder: ['hour','minute','ampm']

It took a bit of research, but I was able to track down the issue to the Ext.picker.Slot.getValue() method.

If the "useDom" parameter is not defaulted to "true", it won't set the proper return value when the getValue() method is called in the process. So I added this bit of code (highlighted in blue font) to the method and it works fine now.

I'm not sure if this is a bug in the framework, or in the way the Ext.ux.picker.DateTime extension and how it configures the slot objects, but I thought I'd bring it to everyone's attention.

getValue: function(useDom) {
var store = this.getStore(),
record, value;

if (!store) {

if (!this.rendered || !useDom) {
return this._value;

//if the value is ever false, that means we do not want to return anything
if (this._value === false) {
return null;

record = store.getAt(this.selectedIndex);

value = record ? record.get(this.getValueField()) : null;
// this._value = value;

return value;

20 Jun 2013, 5:32 AM
Is anybody using this on Sencha 2.2.1? If you press cancel, the next time it loads up the datetimepicker all the slots are empty.

23 Aug 2013, 8:28 AM
I had the same behavior. Setting destroyPickerOnHide to true will solve the problem :

* @cfg {Boolean} destroyPickerOnHide
* Whether or not to destroy the picker widget on hide. This save memory if it's not used frequently,
* but increase delay time on the next show due to re-instantiation. Defaults to false
* @accessor
destroyPickerOnHide: true,

23 Aug 2013, 8:40 AM
I have another problem with ST2.2.1 :

In Chrome, the slots don't appear in the picker, in IE10 the picker doesn't appear at all and it's working well with FF... :


25 Aug 2013, 4:41 PM
I know this isn't a great solution, but it seems to be working okay for me with Sencha 2.3 beta 1 for Chrome and IE 10. There must be some issue with 2.2.1, either that or I fixed the above problem in some other way. I'll take a look and see what I changed.

12 Aug 2014, 1:34 PM
Just a heads up for anyone having problems with this component with ST 2.3.1
Make sure you grab the latest version from the authors github:
https://github.com/tomalex0/senchatouch-datetimepickerv2 (https://github.com/tomalex0/senchatouch-datetimepickerv2Also)

The one from sencha market is outdated.

Also, i noticed the input field was masked with some grey background in chrome, this can be removed by changing the following line in DateTimePicker.js (in initialize)

this.getComponent().input.dom.disabled = true;
To this

if (Ext.browser.is.AndroidStock2) {
this.getComponent().input.dom.disabled = true;