html 5輸入日期類型足以在所有瀏覽器中選擇日期

我有一個輸入fieild我想使用日期選擇器。我使用的是jQuery日期選擇器，然後我意識到它在iphone上運行得並不順利，並且我將其更改爲使用ios的本機日期選擇器的html5 input type =「date」。但是，這也適用於其他瀏覽器？最好的辦法是做到這一點，因爲我不想讓jquery ui日期選擇器和ios的自然日期選擇器都顯示在iphone上。html 5輸入日期類型足以在所有瀏覽器中選擇日期

來源

2013-04-28 weaveoftheride

我有同樣的問題，我認爲你可以使用jQuery Mobile ui日期選擇器。 iOS（Safari）支持本地日期選擇器和android不是！ enter image description here 需要檢測客戶端是否iOS版客戶端，然後使用input type="date"別人使用jQuery移動的UiDatePicker

如果設備的iOS這段代碼可以檢測（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 
} 

?>

最後，你需要設置<input>標籤是readonly="readonly"

CODE（jQuery Mobile的）：

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

來源

2013-04-28 09:53:41

是的，如何做檢測？ – weaveoftheride 2013-04-28 09:55:22

你使用PHP嗎？ – 2013-04-28 09:56:23

是的，我使用PHP，在這種情況下。 – weaveoftheride 2013-04-28 09:57:47

對datepicker輸入類型的支持非常少見。見here。在支持該功能的少數瀏覽器中，支持和實現是非常不同的。

Safari提供日期格式的文本字段，但沒有真正的日曆小部件。 Chrome中的部分支持是指「日期」類型的日曆窗口小部件，但僅適用於所有其他日期/類型字段的文本字段。 Chrome 23支持「時間」類型。 Chrome 25增加了對「周」和「月」類型的支持。一些修改版本的Android 4.x瀏覽器確實支持日期/時間字段。

我不確定jQuery Ui Datepicker是否足夠聰明，可以檢測輸入類型是否受支持，如果不支持，也不會出現。但爲了節省一方，我會使用jQuery Ui。

有很多的可能性。究竟做了什麼不好？

編輯

由於這個答案被錄取了我只是想這個問題是清楚（安德魯·韋爾奇在評論中提到下文）。如果用戶可以選擇在日期選擇器的輸入字段中輸入某些內容，則會觸發iPhone鍵盤，這會導致不需要的行爲並「中斷」日期選擇器。爲了防止這種情況，你只需要使輸入成爲只讀字段。

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

來源

2013-04-28 08:50:59 SirDerpington

我認爲我的決議是在日期輸入字段上執行readonly =「true」來停止鍵盤在ios中觸發，然後使用jquery ui datepicker。 – weaveoftheride 2013-04-28 09:22:53

有道理！所以現在起作用了？如果你可以，我可以將其添加到我的答案中。如果不是，也許你可以寫一個答案，並接受你自己的，因爲我沒有真正解決你的問題只是表明，你不能依靠html5輸入日期此刻^^ – SirDerpington 2013-04-28 09:27:22

html 5輸入日期類型足以在所有瀏覽器中選擇日期

回答

相關問題