CODEWITHSUNDEEP
androidcsshtmlgoogle-chrome
suish
suish

Reputation: 3343

How to remove seconds of HTML5 input type time

I'm developing HTML5 app for both Android and IOS and encountering some sort of buggy issue. What I want to achieve is to get HH:MM format of <input type="time">

According to W3C http://www.w3.org/TR/html5/forms.html#time-state-(type=time)

Default attribute of step is 60s. This means users would never be able to select seconds without any extra attributes and The timepickers of both IOS safari(IOS7/8) and Android(jellybeans - lolipop chrome latest) works as they are expected.

The problem is that Chrome's input displays HH:MM:SS instead of HH:MM. even though SS never get any value but 00

Is there any way to remove SS part?

Edit This issue is only on Android's Chrome.

JSfiddle : http://jsfiddle.net/yymvLk9a/

thanks in advance

Upvotes: 2

Views: 5625

Answers (2)

Brian Jones
Brian Jones

Reputation: 69

If you're getting the time from MySQL you can use

$sql = "SELECT *, TIME_FORMAT(PickupTime, '%H:%i') AS PT FROM Trips WHERE TripID=".$tid;

then when filling the form

type="time" id="pickuptime" name="pickuptime" value="<?php echo $row['PT']; ?>"

This seems to present in Firefox as HH:mm without seconds

Upvotes: 1

suish
suish

Reputation: 3343

I got a solution for this.

html

<input id="foo" />

js

$("#foo").on("change",function(){
  $(this).attr("type","text");
});
$("#foo").on("touchstart",function(){
  $(this).attr("type","time");
});

display the value as type="text" and change the type before keyboard shows up.

simple but works great for me.

EDITED

I reported this bug to google.and got confirmed and fixed. This bug will be disappeared next update. https://code.google.com/p/chromium/issues/detail?id=459966

Upvotes: 2

Related Questions