WkWebView のdatetime-local で “有効な値を入力してください(Enter a valid value)” のエラーが表示される



現象

WkWebView を使ったアプリの開発で、input 要素の type 属性に “datetime-local” を設定すると、iOS 13 以前だとドラムロール式の選択画面が、iOS14 だとカレンダーから入力できます。

しかしここで正しい日時を選択している(そもそも手入力はできず選択するしかない)にもかかわらず、Submit ボタンで POST しようとすると「有効な値を入力してください」または “Enter a valid value” という吹き出しが表示されて次へ進めません。

有効な値を入力してくださいのエラー

Enter a valid value のエラー

原因

いろいろと探してみると、以前から Safari でもよく発生するようで、WebKit に固有の問題のようです。

この問題への対処方法は input 要素に datetime-local を設定した場合、初期値を設定しておくことで回避できるようです。

しかし初期値を空にしたい要件の場合はこの手法は使えません。

datetime-local の他の問題

そもそも input の type に datetime-local を設定しても Firefox のように対応していないブラウザも存在します。上記のことも考えると datetime-local をやめるという選択肢もありそうです。

代替策

代替案としては type="date"type="time" に設定した2つのinput 要素を並べることです。

これであればエラーも防げますし Firefox でもカレンダーが表示されます。

参考文献

ITエンジニア募集中!

キュアコード株式会社はITエンジニアを募集しております。少人数の職場なので、上流・下流やサーバー・クライアント対応の垣根なく、あなたの強みを活かしながら いろいろなことにチャレンジ可能です。エンジニアとしての未経験の方、経験が少ない方も歓迎しています。

下記よりITエンジニア募集の採用情報をご覧いただけます。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA