iOS/AndroidでWebアプリからネイティブの日付選択機能を呼び出す

質問

HTML5を使用して、異なるプラットフォームでネイティブのWebアプリケーションを実行する可能性を探ろうとしています。現在 <input type="date"> フィールドは、Android と iOS の標準的なソフト キーボードを開くだけです。将来的には、モバイル OS のソフト キーボードには日付選択機能などが含まれるようになると思います。 <select> が今日ネイティブの select を呼び出すのと同じです。

これはAndroidでもiOSでも実装されておらず、ネイティブUIで実装されているので、Webアプリがネイティブの日付ピッカーを起動する、つまりクリックされたときに起動することは可能でしょうか？

そうすれば、jQuery mobileやYUIなどのJavaScriptライブラリの使用をやめることができます。

私の質問が何か不明な点があれば、教えてください。よろしくお願いします :-)

どのように解決するのですか？

数年前から、一部のデバイスで <input type="date"> をサポートしているデバイスもありますが、そうでないものもあるので、注意が必要です。以下は、2012 年の観察結果ですが、現在でも有効な場合があります。

• 次のような場合 type="date" がサポートされているかどうかは、その属性を設定し、その値を読み返すことでわかります。サポートしていないブラウザやデバイスは、タイプに date に設定しても無視され text を返す。あるいは モダニズル を使って検出することもできます。Android 4.0.3 の Samsung Galaxy S2 がサポートしているように、一部の Android バージョンをチェックするだけでは十分ではないので注意してください。 type="date" をサポートしていますが、より新しい Android 4.0.4 を搭載した Google/Samsung Nexus S では をサポートしていません。 .

• ネイティブの日付ピッカーに日付をプリセットするときは、デバイスが認識する形式を使用するようにしてください。そうしないと、デバイスは黙って拒否し、既存の値を表示しようとしたときに空の入力フィールドが残ることがあります。Android 4.0.3を搭載したGalaxy S2で日付選択機能を使用する場合、日付の入力フィールドに自動的に <input> を 2012-6-1 を6月1日に設定する。しかし、JavaScriptから値を設定する場合、先頭のゼロが必要です。 2012-06-01 .

• をサポートしていないデバイスでネイティブの日付ピッカーを表示するために Cordova (PhoneGap) などを使用する場合、そのデバイスに対応した type="date" :

  • 組み込みサポートを正しく検出するようにします。2012 年に Android 4.0.3 を実行している Galaxy S2 で起こったように、誤って も

    を使用すると、日付ピッカーが 2 回連続して表示されることになります (最初の表示で "set" をクリックした後にもう一度)。

  • 同じページに複数の入力がある場合、一部のデバイスでは、別のフォーム フィールドに入るために "previous" および "next" が表示されます。iOS 4 では、これは onclick ハンドラをトリガーしないため、ユーザーに通常の入力を与えることができます。使用方法 onfocus を使用することで、プラグインをトリガーすることができるようです。

  • iOS 4 では onclick または onfocus で2012 iOSプラグインを起動すると、まず通常のキーボードが表示され、その上に日付ピッカーが配置されます。次に、日付ピッカーを使用した後、やはり通常のキーボードを閉じる必要がある。使用方法 $(this).blur() を使用して日付ピッカーが表示される前にフォーカスを外すことは、iOS 4 では役に立ち、私がテストした他のデバイスには影響しませんでした。しかし、iOS ではキーボードがすばやく点滅し、最初の使用では日付の選択画面が遅くなるため、さらに混乱する可能性がありました。通常のキーボードを完全に無効にするには、入力欄に readonly とすることで通常のキーボードを完全に無効にすることができますが、その場合、同じ画面上で他の入力をすると "previous" と "next" ボタンが無効になってしまいます。また、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 では、次のようにうまく表示されます。 2012-06-01 をローカライズしたフォーマットで表示します。 1 Jun. 2012 または June 1, 2012 (といった具合です（さらに、日付ピッカーを操作したまま、それをすぐに更新することもできます）。しかし、Android 4.0.3 を実行している Galaxy S2 では、醜い 2012-6-1 または 2012-06-01 のように、どのロケールであっても

  • iPad (シミュレーター) 上の iOS 5 は、日付入力に触れたとき、または別の入力で "previous" や "next" を使用したときに、キーボードがすでに表示されている場合には、キーボードを隠しません。その場合、入力の下に日付ピッカーが同時に表示されます。 と と表示され、下部のキーボードと は で、両方からの入力を許可しているように見えます。しかし、表示されている値は変更されますが、キーボードの入力は実際には無視されます。(キーボードがまだ表示されていないときは、日付入力に触れるとキーボードではなく日付ピッカーが表示されるだけです。 (これは実際のデバイスでは異なるかもしれません。コメントまたは編集をお願いします!)

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