從iOS / Android上的web-app調用本機日期選擇器

Question

我正在嘗試使用HTML5在不同平台上運行本機Web應用程序來探索可行性。 目前， <input type="date">字段只會在Android和iOS上打開標准軟鍵盤。 我想在未來移動操作系統的軟鍵盤將包括日期選擇器等 - 正如<select>今天調用本機選擇一樣。

由於這不是在Android或iOS上實現，而是在本機UI中實現，因此Web應用程序是否可以調用本機日期選擇器，即單擊時？

這將使我們可以停止使用jQuery mobile和YUI等JavaScript庫。

如果我的問題不清楚，請告訴我。 先感謝您 ：-）

Answer 1

有些年頭，有些設備支持<input type="date">但有些設備不支持，因此需要注意。 以下是2012年的一些觀察結果，今天仍然有效：

• 通過設置該屬性然后讀回其值，可以檢測是否支持type="date" 。 不支持它的瀏覽器/設備將忽略將類型設置為date並在讀回該屬性時返回text 。 或者， Modernizr可用於檢測。 請注意，檢查某些Android版本是不夠的; 比如Android 4.0.3上的三星Galaxy S2確實支持type="date" ，但最近的Android 4.0.4上的Google / Samsung Nexus S卻沒有 。

• 在預設本機日期選擇器的日期時，請務必使用設備可識別的格式。 如果不這樣做，設備可能會靜默拒絕它，在嘗試顯示現有值時會留下一個空輸入字段。 就像在運行Android 4.0.3的Galaxy S2上使用日期選擇器一樣，它本身可以將<input>設置為6月1日的2012-6-1 。 但是，從JavaScript設置值時，它需要前導零： 2012-06-01 。

• 使用Cordova（PhoneGap）之類的東西在不支持type="date"設備上顯示本機日期選擇器時：

  • 務必正確檢測內置支持。 就像在2012年銀河S2運行的是Android 4.0.3， 還錯誤地使用科爾多瓦Android插件會導致顯示的日期選擇器連續兩次：一次點擊后，在其第一次出現的“設置”。

  • 當同一頁面上有多個輸入時，某些設備會顯示“previous”和“next”進入另一個表單字段。 在iOS 4上，這不會觸發onclick處理程序，因此會為用戶提供常規輸入。 使用onfocus來觸發插件似乎工作得更好。

  • 在iOS 4上，使用onclick或onfocus觸發2012 iOS插件首先進行常規鍵盤演示，然后將日期選擇器置於其上。 接下來，在使用日期選擇器之后，仍然需要關閉常規鍵盤。 在顯示日期選擇器之前使用$(this).blur()刪除焦點對iOS 4有幫助，並且不影響我測試的其他設備。 但是它在iOS上引入了一些快速閃存的鍵盤，在第一次使用時可能會更加混亂，因為日期選擇器速度較慢。 人們可以通過將輸入完全禁用普通鍵盤readonly如果使用的插件，但禁用“前”，並在同一屏幕上的其他輸入打字時“下一步”按鈕。 似乎iOS 4插件沒有使原生日期選擇器顯示“取消”或“清除”。

  • 在iOS 4 iPad（模擬器）上，2012年Cordova插件似乎無法正確呈現，基本上沒有給用戶任何輸入或更改日期的選項。 （也許iOS 4不能在Web視圖上很好地呈現其原生日期選擇器，或者我的Web視圖的CSS樣式可能會產生一些影響，當然這在真實設備上可能會有所不同：請評論或編輯！）

  • 雖然，在2012年，Android日期選擇器插件嘗試使用與iOS插件相同的JavaScript API，並且其示例使用了allowOldDates ，但Android版本實際上並不支持。 此外，它返回新日期為2012/7/2而iOS版本返回Mon Jul 02 2012 00:00:00 GMT+0200 (CEST) 。

• 即使支持<input type="date"> ，事情也可能看起來很亂：

  • iOS 5很好地以1 Jun. 2012 June 1, 2012 1 Jun. 2012或1 Jun. 2012 June 1, 2012的本地化格式顯示2012-06-01 （甚至在仍然操作日期選擇器時立即更新）。 然而，運行Android 4.0.3的Galaxy S2顯示了丑陋的2012-6-1或2012-06-01 ，無論使用哪種語言環境。

  • 當觸摸日期輸​​入時，或者在另一個輸入中使用“上一個”或“下一個”時，iPad（模擬器）上的iOS 5不會隱藏鍵盤。 然后它同時顯示輸入下方的日期選擇器和底部的鍵盤，並且似乎允許來自兩者的任何輸入。 但是，雖然它確實更改了可見值，但實際上忽略了鍵盤輸入。 （在回讀值時或在再次調用日期選擇器時顯示。）當鍵盤尚未顯示時，觸摸日期輸​​入僅顯示日期選擇器，而不是鍵盤。 （這在真實設備上可能有所不同，請評論或編輯！）

  • 設備可能會在輸入字段中顯示光標，長按可能會觸發剪貼板選項，也可能顯示常規鍵盤。 點擊時，某些設備甚至可能會在一瞬間顯示常規鍵盤，然后再更改為顯示日期選擇器。

Answer 2

iOS 5現在更好地支持HTML5。 在你的webapp做

<input type="date" name="date" />

Android 4.0版本缺少此類本機菜單支持。

Answer 3

iOS5支持此功能（ 參考 ）。 如果你想調用本機日期選擇器，你可能有一個PhoneGap選項（我自己沒有測試過）。

Answer 4

試試Mobiscroll 。 滾動條樣式的日期和時間選擇器專門用於觸摸設備上的交互。 它非常靈活，可輕松定制。 它帶有iOS / Android主題。

Answer 5

我的回答過於簡單了。 如果您想編寫跨平台工作的簡單代碼，請使用window.prompt方法向用戶詢問日期。 顯然，您需要使用正則表達式進行驗證，然后創建日期對象。

function onInputClick(e){
var r = window.prompt("Give me a date (YYYY-MM-DD)", "2014-01-01");
if(/[\d]{4}-[\d]{1,2}-[\d]{1,2}/.test(r)){
    //date ok
    e.value=r;
    var split=e.value.split("-");
    var date=new Date(parseInt(split[0]),parseInt(split[1])-1,parseInt(split[2]));
}else{
    alert("Invalid date. Try again.");
}
}

在你的HTML中：

<input type="text" onclick="onInputClick(this)" value="2014-01-01">

Answer 6

您可以使用Trigger.io的UI模塊將常規HTML日期/時間選擇器與常規HTML5輸入一起使用。 這樣做確實需要使用整體框架（因此不能用作常規移動網頁）。

您可以在此博客文章中查看屏幕截圖之前和之后： 日期時間選擇器

Answer 7

在HTML中：

  <form id="my_form"><input id="my_field" type="date" /></form>

在JavaScript中

  // test and transform if needed if($('#my_field').attr('type') === 'text'){ $('#my_field').attr('type', 'text').attr('placeholder','aaaa-mm-dd'); }; // check if($('#my_form')[0].elements[0].value.search(/(19[0-9][0-9]|20[0-1][0-5])[- \\-.](0[1-9]|1[012])[- \\-.](0[1-9]|[12][0-9]|3[01])$/i) === 0){ $('#my_field').removeClass('bad'); } else { $('#my_field').addClass('bad'); }; 

Answer 8

在表單元素上使用input type="time" 。 它將為您節省嘗試使用數據選擇器庫的所有麻煩。