javascript_javascript スキルの日付関数 new Date() に関するブラウザの互換性の問題

同じ言語である JavaScript でも、異なるブラウザでは言語互換性の問題があります。これは基本的に、異なるブラウザが異なる言語標準と実装をサポートしているためです。この記事では、この問題を分析するために、新しい Date に基づいて Date オブジェクトを作成します。

1. 問題は、開始時間と終了時間の空間が値を正しく転送できないことです

このページでは、時間コンポーネントを使用して時間選択ボックスを開発しましたが、Firefox では正しく動作しないことがわかりましたが、Chrome では正常に動作しました。 何が問題ですか?

2. 問題分析

分析の結果、問題の原因は次のコードであることが判明しました:

var timestart = '2010-05-04';
var timeend = '2015-09-05';
var time1 = (timestart+' 00:00:00').toString();
var time2 = (timeend+' 23:59:59').toString();
timestart = new Date(time1);
timeend = new Date(time2);

問題は、新しい Date(time1) コンストラクターが Date オブジェクトを正しく生成できず、その値が NaN であることです。何が問題なのでしょうか?

3. さまざまなブラウザでのパフォーマンス

IE での実行:

Firefox での実行:

Chrome での実行:

上記の分析により、この JavaScript スクリプトは Chrome では正しく実行できますが、他のブラウザではエラーが報告されることがわかります。

4. 正しいアプローチ

正しいアプローチは以下にリストされています:

 var time1 = (timestart+' 00:00:00').toString();
 var time2 = (timeend+' 23:59:59').toString();
 timestart = new Date(Date.parse(time1.replace(/-/g,"/"))).getTime();
 timeend = new Date(Date.parse(time2.replace(/-/g,"/"))).getTime();

主な変更点は、デフォルトの日付形式の変換です。「/」形式に基づく日付文字列は、さまざまなブラウザで広くサポートされています。「-」で接続された日付文字列は、Chrome でのみ使用できます。

5. 知識ポイントのまとめ

「2015-09-05」は、さまざまなブラウザーで new Date(str) を使用して日付オブジェクトを正しく生成するために使用できません。 正しい使用法は「2015/09/06」です。