JavaScriptで【日付(Date)型⇔文字列(String)型】に変換する方法

JavaScriptでDateオブジェクトから文字列を生成したり、逆に文字列からDateオブジェクトを作ったりすることが多いので、ノウハウとサンプルソースをまとめました。
どのような形でフォーマットするのが良いか迷うことも多いですもんね。

Date -> String(日付 -> 文字列)へ変換する
String -> Date(文字列 -> 日付)への変換
- Dateオブジェクトのコンストラクタを使ってString->Date
Date.parse()を使ってString->Date

Date -> String(日付 -> 文字列)へ変換する

Dateオブジェクトから文字列を生成するには、以下のように、それぞれ年、月、日などを取得して、そこから文字列を組み立てる方法が確実です。(理由は後述。)

早速、コードを載せます。

0埋めしない日時表示をしたい場合

Date型から「YYYY-MM-DD hh:mm:ss」形式に変換するサンプルです。

var date = new Date();
var rtn_str = getStringFromDate(date);
console.log(rtn_str);
 
 
//日付から文字列に変換する関数
function getStringFromDate(date) {
 
 var year_str = date.getFullYear();
 //月だけ+1すること
 var month_str = 1 + date.getMonth();
 var day_str = date.getDate();
 var hour_str = date.getHours();
 var minute_str = date.getMinutes();
 var second_str = date.getSeconds();
 
 
 format_str = 'YYYY-MM-DD hh:mm:ss';
 format_str = format_str.replace(/YYYY/g, year_str);
 format_str = format_str.replace(/MM/g, month_str);
 format_str = format_str.replace(/DD/g, day_str);
 format_str = format_str.replace(/hh/g, hour_str);
 format_str = format_str.replace(/mm/g, minute_str);
 format_str = format_str.replace(/ss/g, second_str);
 
 return format_str;
};

実行結果

2019-9-26 14:11:2

解説

getXXX()で年、月、日などが取得できますので、それぞれの値を取得して、最後に
format_str = ‘YYYY-MM-DD hh:mm:ss’;
に対してreplaceすることで指定したフォーマットの形式にしています。

なので、
format_str = ‘YYYYMMDD’;
に変更すると、「YYYYMMDD」形式になりますね。

注意点としては、月のみ、
var month_str = 1 + date.getMonth();
のように「+1」する必要があります。
なぜかというと、date.getDate()だけ、1月なら0が、2月なら1が返却されるからです。

0パディング(0埋め)した日時表示をしたい場合

また、getXXX()では数字が返却されるので、「2019-9-26」ではなく「2019-09-26」のように0埋めをしたい場合は、以下のようにします。

日の部分を例にとると、
day_str = (‘0’ + day_str).slice(-2);
のように、返却された数字に0をつけて、後ろから２文字を取得しています。

つまり、
9が返却された場合「09」のようになり、後ろから２文字なので「09」になります。
一方、二けたの数字11が返却された場合「011」のようになり、後ろから２文字なので「11」になります。

//日付から文字列に変換する関数
function getStringFromDate(date) {
 
 var year_str = date.getFullYear();
 //月だけ+1すること
 var month_str = 1 + date.getMonth();
 var day_str = date.getDate();
 var hour_str = date.getHours();
 var minute_str = date.getMinutes();
 var second_str = date.getSeconds();
 
 month_str = ('0' + month_str).slice(-2);
 day_str = ('0' + day_str).slice(-2);
 hour_str = ('0' + hour_str).slice(-2);
 minute_str = ('0' + minute_str).slice(-2);
 second_str = ('0' + second_str).slice(-2);
 
 format_str = 'YYYY-MM-DD hh:mm:ss';
 format_str = format_str.replace(/YYYY/g, year_str);
 format_str = format_str.replace(/MM/g, month_str);
 format_str = format_str.replace(/DD/g, day_str);
 format_str = format_str.replace(/hh/g, hour_str);
 format_str = format_str.replace(/mm/g, minute_str);
 format_str = format_str.replace(/ss/g, second_str);
 
 return format_str;
};

実行結果

2019-09-26 14:06:28

日付をYYYY/MM/DD形式の文字列で取得する簡便な記述

上記では、汎用的な関数にするためにフォーマットをreplaceする形式にしていますが、原理が分かればもう少しシンプルに記述することもできます。

例えば、現在日付をYYYY/MM/DD形式の文字列で取得するには

function getNowDateWithString(){
 var dt = new Date();
 var y = dt.getFullYear();
 var m = ("00" + (dt.getMonth()+1)).slice(-2);
 var d = ("00" + dt.getDate()).slice(-2);
 var result = y + "/" + m + "/" + d;
 return result;
}

のように記述できます。

String -> Date(文字列 -> 日付)への変換

日時を表現した文字列からDate型のオブジェクトを生成するには、Date型オブジェクトのコンストラクタを使う方法とDate.parse()を使う方法があります。

Dateオブジェクトのコンストラクタを使ってString->Date

コンストラクタは、以下の形式で指定します。

new Date( year, month, day [, hour, minute, second, millisecond] )

例えば、

var date = new Date("2019", "09", "26", "11", "01", "22");
console.log(date.toString());

のように使います。

Date.parse()を使ってString->Date

var datestr = "2019/09/26 11:01:22";
var date = Date.parse(datestr);
console.log(date.toString());

parseに上記のような文字列を渡すと、Date型を生成してくれます。

なお、Date.parse() メソッドは、日時を表す文字列を解釈して、協定世界時 (UTC) 1970年1月1日00:00:00からの経過ミリ秒を返す関数なので、Date型の中身は、1970/1/1 00:00:00からの経過ミリ秒になります。

また、文字列を解釈できなかったり不正な日付 (例えば 2019-02-31) が指定された場合には NaN を返します。

渡す文字列のフォーマットは上記の他に

var datestr = “2019-09-26 11:01:22”;

var datestr = “2019-09-26T11:01:22”;

var datestr = “2019-09-26T11:01:22+09:00”;

なども渡すことができますが、ブラウザによってparseできる形式とできない形式が混在します。

また、”2019-09-26 11:01:22″というハイフンの形式だとPCのChrome、Edge、IE11ではマシンのタイムゾーンを見て判断するので日本時間となりますが、モバイルのSafariだと標準時で取得され9時間のずれが発生するので、“2019-09-26T11:01:22+09:00”のように時差をつけて指定するか、“2019/09/26 11:01:22”のようにスラッシュ(/)形式で指定するのがよさそう。

もしくは、素直に、コンストラクタの形式で、年、月、日等を別々に分けて渡すといいですね。