CODEWITHSUNDEEP
iosformsdate
weaveoftheride
weaveoftheride

Reputation: 4395

Is html 5 input date type enough to pick date in all browsers

I have a input fieild I want to use a date picker on. I was using the jquery date picker, then I realised it doesn't work so well on iphone, and I read to change it to html5 input type="date" which uses ios's native date picker. However does this also work on other browsers? Whats the best way to do this as I don't want both the jquery ui date picker and ios's nature date picker to show up on the iphone.

Upvotes: 0

Views: 2095

Answers (2)

One Man Crew
One Man Crew

Reputation: 9578

I have the same problem i think you can use jQuery Mobile ui date picker. the iOS(Safari) support native date picker and android is not! enter image description here you need to detect if the client is iOS client and then to use input type="date" else to use the UiDatePicker of jQuery Mobile

You can detect if the device is iOS by this code(PHP according to Haim Evgi):

<?php

//Detect special conditions devices
$iPod    = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone  = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad    = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
$Android = stripos($_SERVER['HTTP_USER_AGENT'],"Android");
$webOS   = stripos($_SERVER['HTTP_USER_AGENT'],"webOS");

//do something with this information
if( $iPod || $iPhone ){
    //browser reported as an iPhone/iPod touch -- do something here
}else if($iPad){
    //browser reported as an iPad -- do something here
}else if($Android){
    //browser reported as an Android device -- do something here
}else if($webOS){
    //browser reported as a webOS device -- do something here
}

?>

Finally you need to set the <input> tag to be readonly="readonly"

CODE(jQuery Mobile):

<input type="date" name="date" id="date" value=""  data-role="datebox"
   data-options='{"mode": "datebox","useDialogForceFalse": true}' readonly="readonly" />

Upvotes: 1

SirDerpington
SirDerpington

Reputation: 11460

Support for the datepicker input type is atm very rare. See here. Support and implementation are very different in those few browsers that support the feature.

Safari provides date-formatted text fields, but no real calendar widget. Partial support in Chrome refers to a calendar widget for the "date" type, but just text fields for all other date/type fields. Chrome 23 supports the "time" type. Chrome 25 adds support for the "week" and "month" types. Some modified versions of the Android 4.x browser do have support for date/time fields.

I'm not sure if the jQuery Ui Datepicker is clever enough to detect if the input type is supported and if so doesnt appear. But to be on the save side I'd use the jQuery Ui one.

There are a lot of possibilities. What exactly doesnt work so well?

EDIT

As this answer got accepted I just want to make clear what the problem was (Andrew Welch mentioned it in the comments below). If the user has the option to type something intothe input field for the datepicker the iPhone keyboard fires which causes an unwanted behaviour and "breaks" the datepicker. To prevent this you just have to make the input to be a readonly field.

<input type="text" id="datepicker" readonly="readonly">

Upvotes: 1

Related Questions