New Date() ブラウザ毎の挙動が違う

Safariで new Date('2023-03-20 12:00:00')すると　Invalid Date

日付を出力したく、以下のようにJsonで取得したデータを引数で渡しました。

new Date('2023-03-20 12:00:00') 


// Chrome
Mon March 20 2023 12:00:00 GMT+0900 (日本標準時)

// Firefox
Mon March 20 2023 12:00:00 GMT+0900 (日本標準時)

// Safari
Invalid Date

Safariのみ出力できません。

原因：ブラウザ間で解析できる日付フォーマットが違う

Chromeは基本なんでも通りますが、比較的厳しいSafariではハイフンで日付が繋がれている　「YYYY-MM-DD HH:MM:SS」の形式を受け付けてくれません。

👍OK

以下がChrome、Firefox、Safariの3つのブラウザに対応している日付フォーマットになります。
(タイムゾーン省略時はローカル時間と解釈されます）

🙆‍♀ 2023-03-20 
🙆‍♀️ 2023-03-20T12:00:00
🙆‍♀️ 2023-03-20T12:00:00+09:00　(ISO 8601拡張形式)
🙆‍♀️ 2023/03/20 12:00:00

// Mon March 20 2023 12:00:00 GMT+0900 (JST)


UTC基準の場合
🙆‍♀️ 2023-03-20T12:00:00Z 

// Mon March 20 2023 21:00:00 GMT+0900 (JST)

👎NG

以下のフォーマットは指定のブラウザで出力できないので注意しましょう。

🙅‍♀️ 2023-03-20 12:00:00+09:00　
🙅‍♀️ 2023-03-20 12:00:00

//　Safariで　Invalid Date

🙅‍♀️ 2023/03/20 12:00:00+9:00

//　Firefoxで　Invalid Date

解決法：日付フォーマットを加工する

データベースから取得する日付フォーマットで一番多い「2023-03-20 12:00:00」の形を、
ブラウザ対応の形「2023/03/20 12:00:00」に加工してnew Date()で出力します。

1️⃣replaceAll()

replaceAll()メソッドを使用して - を / に置き換えます。

const dt = '2023-03-20 12:00:00'
const date = dt.replaceAll("-","/");　　　// 2023/03/20 12:00:00

console.log(date)　　　// Mon March 20 2023 12:00:00 GMT+0900 (JST)

2️⃣replace()

replace()メソッドでも加工できます。

const date = dt.replace(/-/g,"/");　　　// 2023/03/20 12:00:00

console.log(date)　　　// Mon March 20 2023 12:00:00 GMT+0900 (JST)