Cannot set input="time" anymore on android


#1

I’ve got a form with a time field, I am 92% certain that I’ve used it before without issue, but now when I try to change the value on my Android phone, I get this:

As you can see, I can clear and cancel, but I cannot set.

The input code is as follows

<input name="what" type="time" />

When I access the following JSFiddle from Chrome on my android phone, I get the modern date selector.

http://jsfiddle.net/x4dxy2t2/

Am I missing something?

Ta
-Chris


#2

Hmm, interesting.

Android 5.0?
Can you put together a codepen? I can try on a genymotion sim of 5.0


#3

Hi, sorry not quite sure how to make a codepen for an ionic framework app, but if you do

ionic start someApp sidemenu

and add the following before ion-list in playlists.html

`

`

You will get the what I am experiencing. I am using Android 5.0 (on a Nexus 5) and I think that’s the significant change I’ve made to either phone or app recently!

Cheers
-Chris


#4

Weird, got the same issue too. I noticed it didn’t include an ‘set’ option on in the time input.

Are you seeing this on a real device or a genymotion sim?


#5

Hi Mike,

on a real device.

A current incompatibility between Cordova/Webview and Android 5.0 maybe?

Cheers
-Chris


#6

Facing ditto same issue. Its surely Android 5 problem, as the same app and time picker works great with any device having Android 4.

Do I need to upgrade to Android 5 in cordova to get latest web views ?


#7

If you guys are describing what I think you are, then try this.

In you’re platforms/android/ folder, edit the AndroidManifest.xml

Look for a part android:theme="@android:style/Theme.Black.NoTitleBar" and remove it.
This sets the native ui theme for android. By removing this, we’ll just use the default theme provided by the android version.


#8

Same issue (Nexus 5, on Android 5). Even after removing the theme, the only buttons available are “Clear” and “Cancel”.


#9

This issue is also reported as bug on both chromium and android.

https://code.google.com/p/chromium/issues/detail?id=434695
https://code.google.com/p/android/issues/detail?id=79948

Still if any mobile expert can give a work around for the same, it would be very helpful.


#10

I was able to get around this issue using ngCordova’s date picker. Please follow this link for more details:

http://ngcordova.com/docs/#DatePicker

The date picker also offers a time mode, which shows time picker correctly. Not ideal and simple, but a good work around for now.


#11

@abhinavguptas Thanks for the suggestion. How are you triggering the DatePicker to show?

Right now I have to set the input to have type="text" and readonly and then open the DatePicker on click. (Otherwise ionic will attempt to show the broken date picker when the input is clicked)


#12

Here is sample code

<span class="col-20" ng-click="showTimePicker()">
   {{timeFieldInModel | date:'h:mm a'}}
</span>


$scope.showTimePicker = function() {    
var options = {date: new Date(), mode: 'time'};      
$cordovaDatePicker.show(options).then(function(date){
    $scope.timeFieldInModel = date;
});
}

#13

Thanks for the alternative suggestions.

It appears it’s quite a broad error, which I would probably take as a positive in relation to it getting fixed!

Thanks again
-Chris


#14

Hope the following link may help you. It works in all the devices.


#15

i think these issue is relevant to Android Web view please upgrade in your device if it is 5.0.1 android please check it once i got my issue solved


#16

I’m having the same issue and I use Phonegap build to build my apps. How can i come out of this issue? Plz help…


#17

it doesn’t work with ionic 1.4.2 version.

I’ve the same problem with native
I’ve the same bug on Huawey P8 Lite. Android 5.0.1.
On xperia Z with 5.1.1 works.


#20

Hi, after facing several issues with the time pickers available on market myself, wanting a more native experience for the user, I’ve created a new component which does just that.

It can be seen at:

Hope this helps!

Thanks