2013年7月9日火曜日

[jquery mobile] inputのdatetimeの動作について(iOS)

jQuery mobile + PhoneGapでiOSアプリを作成しています。
jQuery mobileは最新の1.3.1を使用してます。

テキストのinputでtypeでdatetime,datetime-localを設定すると、iOSの場合、ネイティブの日付と時刻の選択がポップアップしてきます。
Androidだとたしかうまく動かなかったりしてたと思いますが、とりあえず今はiOS向けのアプリを作成しているのでこれを使うことにしました。

datetimeとdatetime-localの違いがよくわからなかったので、とりあえずそれらしい感じのdatetime-localを使ってみたのですが、ちょっとはまってしまいました。
iOS上での動き自体はどちらも同じで、押すと日付時刻の選択がポップアップします。
問題はその後のjQueryのval()で値をとった場合の値です。
表示上は同じですが、datetimeの場合はUTC時刻のJSON形式、datetime-localはローカル時刻のJSON形式となります。

具体例だと、現在のローカル時刻(iOSの表示時刻)が、2013-7-9 13:59だったとします。
datetimeの場合の$("#testdt").val()は、「2013-07-09T04:59:00Z」となります。datetime-localの場合は「2013-07-09T13:59:00Z」となります。

一見、datetime-localのほうが使いやすそうなのですが、
var dt = new Date($("#testdt").val());
などとDateオブジェクトを生成すると、datetime-localはローカル時刻が+9時間された時刻になってしまいます(ローカル時刻を取得した場合ですね)。datetimeだと正しく設定されます。
取得した文字列からDateオブジェクトを生成する場合はdatetimeの方を使ったほうがいいみたいです。

ついでに、datetime/datetime-localの場合に初期値を設定する場合ですが、これもJSON形式で設定する必要があります。JSON形式以外だとうまく設定できません。
var dt = new Date();
$("#testdt").val(dt.toJSON());
ご参考になれば幸いです。

0 件のコメント:

コメントを投稿