CODEWITHSUNDEEP
jqueryhtmljquery-uidatepicker
Steve
Steve

Reputation: 1046

HTML 5 datepicker

I use HTML5 and jquery datepicker.

script:

$( "#myDate" ).datepicker({
        dateFormat: 'dd/mm/yy'
});

html:

<input type="date" name="myDate" id="myDate" value="">

When I try the example on the browser it shows me the jquery datepicker. When instead I try the example on a android device it shows me the native android datepicker and after selection of a date it shows me the jquery datepicker.

How would it be possible to show just the android datepicker when I am on an android device? Any ideas? Thanks

Upvotes: 1

Views: 531

Answers (2)

Mehmet Atabey
Mehmet Atabey

Reputation: 33

You can use this method:

var isAndroid = /android/i.test(navigator.userAgent.toLowerCase());

if (isAndroid)
{
  alert("mobile device");
}
else
{
  alert("not a mobile device");
}

Upvotes: 1

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9439

An easy way to do it would to have two date pickers, one for mobile and one for desktop. Then use a media query to display the mobile and hide the desktop when viewing on smaller screens.

Like this

HTML

<input type="date" name="myDate" id="myDate" value="">
<input type="date" name="myDate" id="mobile" value="">

css

#mobile{display: none}

@media (max-width: 600px){
#mobile{display: inline}
#myDate{display: none}
}

Upvotes: 2

Related Questions