Input dateと戦う

万悪のinput、いつかあなたは屈服します
はじめにinputはフォーム要素の入力コントロールとして、複雑で重い役割を果たしています.テキストから数字、URL、メールアドレス、さらにラジオ、複数選択、スライドバー、さらに年月日まで、さらにはファイルを入力する機能もありますが、どのタイプも可愛くて憎いです.最近はこのtype=dateシリーズに突き刺さり、「批判」することにした.
input日付の種類
w 3 schoolで紹介されているように、全部で以下のようになります(いずれもHTML 5特有のタイプです).date - datetime - datetime-local - month - week - time
デフォルトのBuginput要素の中で日付と時間を同時に表示することをサポートするタイプはdatetime、datetime-localの2種類で、yyyy-MM-dd hh:mmをフォームコントロールに割り当て、タイプdatetimeのものは完璧に表示できますが、タイプdatetime-localは以下のように表示されます.

The specified value "2018-08-09 20:54" does not conform to the required format.  The format is "yyyy-MM-ddThh:mm" followed by optional ":ss" or ":ss.SSS".

datetimeページに表示されるのは純粋なテキストボックスであり、ページに日付時間が表示されるように選択するコントロールはdatetime-localを使用する必要がありますが、デフォルトではyyyy-MM-dd hh:mm形式の時間はサポートされていませんので、Dateオブジェクトに変換したいと思います.PC側のブラウザではnew Date()を直接使ってDateのオブジェクトに変換することができますが、携帯電話側になると、記憶喪失患者のように、nullの値を必死に教えてくれます.
資料を照会した後、モバイルブラウザのDateオブジェクトはyyyy-MM-dd hh:mmというフォーマットをサポートしていない時間文字列であり、yyyy/MM/dd hh:mm形式に変更する必要があることが分かった.その後、変更後に生成された値は実際の値と8時間も差があります(該当地の東八区).

const date = '2018/08/09 20:54';
new Date(date); // PC       2018/08/09 20:54
new Date(date); // mobile   2018/08/09 12:54

上記のヒントに従って元の時間文字列フォーマットをyyyy-MM-ddThh:mmに変換してみると、input要素にデフォルト値を正しく追加することができます.
HTML 5のnew Dateのタイムゾーン
前節では,移動端がyyyy/MM/dd hh:mmのフォーマットを用いてDateのオブジェクトをインスタンス化すると,生成された時間が直接0タイムゾーンに表示され,探索を続けるうちにインスタンス化されたDateオブジェクトがgetHours関数を呼び出したときに得られた時間数がまた現地タイムゾーンを経て変換されていることが分かった.したがって,移動端におけるDateオブジェクトが生成した時間を文字列に変換する際にデフォルトでタイムゾーンを持たず,時間オブジェクト自体の値に問題はないと大まかに結論できる.それから、お父さんのことが来ました.ページで時間選択にdatetime-localを使用すると、現在では正常に値が付与されている(yyyy-MM-ddThh:mm形式を使用することを前提としている)が、当然のことながら、時間選択後もyyyy-MM-ddThh:mm形式の時間文字列(依然として0タイムゾーン)が返され、この値がDateオブジェクトに変換され、戻り値は予想より8時間も大きく、問題はありません.結局、表示されている値は0タイムゾーンで、東8タイムに戻るのは8時間プラスですが、問題はPC側が変換した値が正しいので、どちらかが妥協しなければなりません.間違いなく、選択はあなたです.モバイル端末です.
移動端取値・賦値の処理
以上、移動端におけるinput元素datetime-localのタイプのピットを理解することができ、次に解決策である.まず、デフォルト値を付与する際に、取得したタイムスタンプをyyyy-MM-ddTmm:hh形式の文字列に変換します(toISOStringメソッドは使用できません.このメソッドは0タイムゾーンの値を返し、字面的には8時間も少なく見えます).そして時間を選択した後、フォームを提出する際に取得したyyyy-MM-ddTmm:hh形式の時間文字列をTに置き換えて ：

date.replace('T', ' ');

PC input とする.

HTML 5は まで してきたが、inputの タイプにはまだ の がある.
ブログの ドアを します.https://blog.paddings.cn/2018/07/24/html/input-date/