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