CODEWITHSUNDEEP
javascriptjqueryhtmlmobile
Nazanin Faghihi
Nazanin Faghihi

Reputation: 31

Setting time input with jquery does not work in mobile

I have a simple html code that sets the value of input of type time in document ready function. it works in computer browser correctly. but it does not work in mobile devices. 

<html>
<head>
<script	src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
	<input type="time" id="time" style="height:25px">

	<script>
		$(document).ready(function (){
			$("#time").attr("value","23:30");
		});
		
	</script>
</body>
</html>
while raw javascript works perfectly (below code):

    <html>
<head>
<script	src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
	<input type="time" id="time" style="height:25px">

	<script>
		$(document).ready(function (){
			document.getElementById("time").value = "23:30";
		});
		
	</script>
</body>
</html>

any idea?

Upvotes: 1

Views: 669

Answers (1)

Badiparmagi
Badiparmagi

Reputation: 1285

I did some search on Google and Mozilla has a great explanation about <input type="time">. some mobile browsers like Safari does not support this input yet.

As mentioned above, Safari and a few other, less common, browsers don't yet support time inputs natively

Source

this code behaves like time input on my mobile phone. use val method instead att.

$(document).ready(function (){
            $("#time").val("23:30");
        });

let me know if this helps you.

Upvotes: 1

Related Questions