[HTML5]iOSから<input type="datetime-local">に入力すると「有効な値を入力してください」と弾かれてしまう

Question

Djangoを用いたウェブアプリケーションを開発しています。簡単なCRUDを扱うウェブアプリです。

コードはGitHubにあり、一応Herokuにデプロイ済みなので実際に試してみていただきたいです。

GitHub

いつでもエア実況

PC、Android端末からは投稿の保存ができたのですが、iPhoneから投稿を行うとDatetimeFieldに対してエラーが発生してしまいます。

調べてみたところ、

• Safariがdatetime-localの入力に対応していない
• DjangoがSafariに対応していない
• iOSがdatetime-localを扱う場合には初期値を与えなければいけない

という原因が挙げられていました。

How can I use <input type=datetime > and iOS Safari with Django?

ios – Mobile Safari（10.3.1）DateTime-Local“有効な値を入力してください”エラー

iPhone版Google Chromeでも投稿の保存ができなかったので、iOS特有の仕様なのでしょうか。

JavaScriptを用いた日時入力の方法(Datetime-pickerなど)もあるようですが、iPhoneの日時入力のフォームは扱いやすいので、可能ならばdatetime-localを扱いたいです。

class CreateForm(forms.Form):
    title = forms.CharField(
        label='タイトル',
        max_length=140,
        help_text='Twitterハッシュタグの仕様上、？や！などの記号は使えません。Vtuberなどのアーカイブの場合、「配信タイトル_名前」を推奨します。'
    )
"""
以下が問題の箇所です。
"""
    start_time = forms.DateTimeField(
        label='開始時刻',
        widget=forms.DateTimeInput(attrs={"type": "datetime-local"}),
        input_formats=['%Y-%m-%dT%H:%M']
    )
    episode = forms.IntegerField(
        label='話数',
        help_text='劇場作品やYouTube動画のときはとりあえず０話にしておいてください。空欄不可なので。（後々対応します）'
    )
    comment = forms.CharField(
        label='コメント',
        widget=forms.Textarea(attrs={"max_length": 140}),
        max_length=140,
        help_text='「未視聴なのでネタバレNG」「一緒に考察しましょう」「１５周目」「〇〇への愛を語りましょう」など書いておくといいかもしれません。'
                  'あと、見るプラットフォーム（Netflix, Prime Videoなど）を書いてあげると優しいかもです。'
    )

Answer 1

Androidはあまり使わないのでわかりませんが、iPhone,iOSにおいて「Safari for iOSに対応しててChrome for iOSに対応していない」またはその逆は聞いたことがありません（FireFoxも同様）。

追記

iOSはすべてのブラウザにおいてSafariと同じWebkitを採用しているようです。
マイナビニュース
エキサイトニュース
リンク先がプログラミングと全く関係ないことは気にしないでください。

Comments

[kyoya0819]

ちなみにiPad6(iOS12.4.1,Safari12.2.1)でも同様の挙動が確認できました。

[ttmone_]

ご回答ありがとうございます。つまり、iPhoneの利用しているレンダリングエンジンのWebkitがdatetime-localに対応していない。もしくは、僕のコードがWebkitに対応できていないという可能性が高いということですよね。レンダリングエンジンのことまで考えが至らなかったのでとても参考になります。

Answer 2

解決しました。レンダリングエンジンがWebkitの場合、<input type="datetime-local">に対して初期値を設定しなければならないようです。forms.pyを以下のように編集することで解決できました。strftime()メソッドでinput_formatsと形式を合わせてあげる必要があります。

start_time = forms.DateTimeField(
        label='開始時刻',
        widget=forms.DateTimeInput(attrs={"type": "datetime-local", "value": timezone.datetime.now().strftime('%Y-%m-%dT%H:%M')}),
        input_formats=['%Y-%m-%dT%H:%M']
    )