web-dev-qa-db-ja.com

iOS / AndroidのWebアプリからネイティブの日付ピッカーを呼び出す

HTML5を使用してさまざまなプラットフォームでネイティブWebアプリを実行する可能性を探っています。現在、<input type="date">fieldは、AndroidおよびiOSで標準のソフトキーボードを開くだけです。将来、モバイルOSのソフトキーボードには日付ピッカーなどが含まれると思います-<select>が今日のネイティブセレクトを呼び出すように。

これはAndroidまたはiOSのいずれにも実装されていませんが、ネイティブUIに実装されているため、Webアプリがネイティブの日付ピッカーを呼び出すことは可能ですか？

これにより、jQuery mobileやYUIなどのJavaScriptライブラリの使用を停止できます。

私の質問が何らかの形で不明な場合は、教えてください。前もって感謝します ：-）

javascriptiphoneandroidioshtml5
77
hnilsen

一部のデバイスは<input type="date">をサポートしていますが、サポートしていないデバイスもあるため、注意が必要です。 2012年からのいくつかの観察結果を以下に示しますが、それは今日でも有効です。

  • type="date"がサポートされているかどうかは、その属性を設定してからその値を読み取ることで検出できます。それをサポートしていないブラウザ/デバイスは、タイプをdateに設定することを無視し、その属性を読み戻すときにtextを返します。または、検出に Modernizr を使用できます。いくつかのAndroidバージョンを確認するだけでは不十分であることに注意してください。 Android 4.0.3のSamsung Galaxy S2はtype="date"をサポートしますが、最新のAndroid 4.0.4のGoogle/Samsung Nexus Sはサポートしますnot。

  • ネイティブの日付ピッカーの日付を事前設定するときは、必ずデバイスが認識する形式を使用してください。それを行わないと、デバイスはそれを静かに拒否し、既存の値を表示しようとしたときに空の入力フィールドを残します。 Android 4.0.3を実行しているGalaxy S2で日付ピッカーを使用するように、6月1日に<input>を2012-6-1に設定する場合があります。ただし、JavaScriptから値を設定する場合は、先行ゼロが必要です：2012-06-01。

  • Cordova（PhoneGap）などを使用して、type="date"をサポートしていないデバイスでネイティブの日付ピッカーを表示する場合：

    • 組み込みサポートを適切に検出してください。 2012年のようにAndroid 4.0.3を実行しているGalaxy S2で、誤ってalsoCordova Androidプラグインを使用して日付ピッカーを2回連続で表示します。最初のオカレンスで[設定]をクリックした後、もう一度。

    • 同じページに複数の入力がある場合、一部のデバイスは「前」と「次」を表示して別のフォームフィールドに入ります。 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バージョンは実際に使用しましたそれをサポートしていません。また、iOSバージョンがMon Jul 02 2012 00:00:00 GMT+0200 (CEST)を返したときに、新しい日付を2012/7/2として返しました。

  • <input type="date">がサポートされている場合でも、物事は面倒に見えるかもしれません：

    • iOS 5は、2012-06-01や1 Jun. 2012などのローカライズされた形式でJune 1, 2012を適切に表示します（さらに、日付ピッカーの操作中にすぐに更新します）。ただし、Android 4.0.3を実行しているGalaxy S2では、使用されているロケールに関係なく、ugい2012-6-1または2012-06-01が表示されます。

    • iPadのiOS 5（シミュレーター）は、日付入力に触れたとき、または別の入力で「前」または「次」を使用したときにキーボードがすでに表示されている場合、キーボードを非表示にしません。次に、入力の下に日付ピッカーを同時に表示しますと下部のキーボード、およびseems両方からの入力を許可します。ただし、表示される値は変更されますが、キーボード入力は実際には無視されます。 （値を読み戻したとき、または日付ピッカーを再度呼び出したときに表示されます。）キーボードがまだ表示されていない場合、日付入力をタッチすると、キーボードではなく日付ピッカーのみが表示されます。 （これは実際のデバイスでは異なる場合がありますので、コメントまたは編集してください！）

    • デバイスは入力フィールドにカーソルを表示し、長押しするとクリップボードオプションがトリガーされ、通常のキーボードも表示される場合があります。一部のデバイスでは、クリックすると、日付ピッカーを表示するように変更する前に、通常のキーボードが一瞬表示される場合があります。

104
Arjan

iOS 5はHTML5をより良くサポートするようになりました。あなたのウェブアプリで

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

4.0以降のAndroidには、このタイプのネイティブメニューサポートがありません。

14
Bot

iOS5はこれをサポートしています（ Reference ）。ネイティブの日付ピッカーを呼び出す場合は、PhoneGapを使用するオプションがあります（自分でテストしていません）。

5
Eirik Hoem

Mobiscroll を試してください。スクロールスタイルの日付と時刻のピッカーは、特にタッチデバイスでの対話用に作成されました。かなり柔軟で、簡単にカスタマイズできます。 iOS/Androidテーマが付属しています。

5
Levi Kovacs

私の答えは単純すぎです。クロスプラットフォームで動作する単純なコードを作成する場合は、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">
3
oabarca

Trigger.ioのUI モジュールを使用して、通常のHTML5入力でネイティブAndroid日付/時刻ピッカーを使用できます。ただし、フレームワーク全体を使用する必要があります（したがって、通常のモバイルWebページとしては機能しません）。

このブログ投稿でスクリーンショットの前後を見ることができます： date time picker

1
Amir Nathoo

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');
    };
0
Mauro