jQuery mobileでiphoneぽい日時セレクト画面。その2

jQuerymobileのblogページにて。

10月19日の記事です。
「jQuerymobile1.0RC2がリリースされました」

とのことです。

そして、そこに、以前「jQuery mobileでiphoneぽい日時セレクト画面。」で書いた
日付・時間をいっぺんに選択でき、iphoneのようにくるくる選択出来る仕様のものが!

←クリックでブログページ行けます。

しかも今回はHTML5を使用したinputタグの入力タイプで出すことができるようです。

ブログによると、、(英文だったので、間違いもあるかもしれませんが・・)

和訳:”これらの入力のサポートはブラウザに依存するが、サポートされていない場合は、標準テキストの入力にフォールバックする必要があることに注意してください。”
という記述があるところから見ると、サポートされていないブラウザの為に何か書かなければならないのですかね・・。

和訳:”ChromeとSafariの新しいバージョンでは、日付/時刻の入力は、入力を容易にスピンボックスコントロールとして表示されます。”
新しいバージョンのChromeとSafariだと特別な表示がされるみたいですが、それもまだ確認が取れず・・・
(使っているものは最新のはずなのに表示されない??)

まだまだ実践では使えなさそうな不安定なものなんですかね??

疑問が多い中、とりあえず、サンプルを作ってみました。

まずはjQueryとjQuerymobileのjsとjQuerymobileのCSSを読み込んで、、、

=html=</pre>
<div data-role="fieldcontain"><label>日付</label>
 <input id="name" type="datetime-local" name="name" value="" /></div>
<pre>

こんな感じに。

type=”datetime-local”は国・地域別のローカルの日時(タイムゾーンなしの日時)を出してくれるようです。

サンプル

↑ iPhone(iOS5)では確認が取れました。

これを求めてました!って感じの見た目。

だけどこれ、Androidでは今現在実現できないようですし、これから先も実現できるか微妙な感じがするような・・。
ちなみに、手元にあるAndroidで試してみたら、キー入力パッドが出てきた瞬間にブラウザが落ちました・・・。

そんなこんなで、不具合やら、いろいろあって
ちょっとBlogに書くのは早い感じの内容ではありますが、
ずっと求めていた見た目の、日付・時間設定のselect画面が実現できる!(かも)
ということだったので嬉しくなり、取り急ぎ紹介しました。w

英文だったり、新しい記事なのでなかなか読んでいくのは大変でした;
読めてない部分、間違ってる部分無いようもっと勉強したいと思います。

また、他にもいろいろな情報が載っていますので、
気になったことがあったら紹介したいと思います。

Similar Posts:

3 Responses to “jQuery mobileでiphoneぽい日時セレクト画面。その2”

  1. cheese says:

    クロムではスピンボタンを確認しました。
    その他オペラではカレンダー形式の日付入力と時刻入力を行うスピンボタンが表示され、IE9・firefox4.0・Safari5.0.5 ではただのテキストフィールドとして表示されました。
    ブラウザではまだ実用的ではないような気がしました。
    最後に、貴重な記事ありがとうございました。

  2. cheese says:

    余談なのですがMobiscrollではだめなのでしょうか?
    見た目もiOS用・Android用と用意されているようです(iPadのsafariでは動作確認しました)。
    こっちはブラウザ全対応が完了しているようです(ただieは影の処理がなく平べったい感じになり、オペラではさらに透過処理まで消えてしまっているようです)。
    超蛇足なコメント、失礼しました。

  3. mizushima says:

    cheese様>
    コメントありがとうございます。
    そうですね!
    実はMobiscrollに関しましては、以前「jQuery mobileでiphoneぽい日時セレクト画面。」の記事にも少し書かせて頂いていたのですが、
    確かに便利ですし、実際のサイトに取り入れるにも使えますね!
    Mobiscrollを使用する方がカスタマイズもできますし、すごく良いと思います。

    ただ今回のものは、
    jQuerymobileだけで実現可能で簡単に実装できること。
    また、私も質問をされたことがあるのですが「iPhoneと同じような見た目にはできないのか」という方がいました。
    このように、見た目の点で見慣れたセレクト画面を要望している方もいるようなので、
    実際この先、さまざまな機種やブラウザで対応出来るのか出来ないのかはまだわかりませんが出来るようになれば、
    そういう方の要望にも応えることができますし、セレクト画面の仕様の選択の幅は増えるだろうなあ、と思います。

Leave a Reply