ぱーくんのサイト別館

ぱーくん plus idea

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

 
この記事を書いている人 - WRITER -
ご訪問ありがとうございます(^^)
副業でネットビジネスに取り組んでいるぱーくんと申します。

激務でも増えない給料に失望し、将来のために別の収入源が欲しい!の一心でネットビジネスをはじめ、2018年4月に20万円達成。

ひと月36万アクセスあるサイトを作ったノウハウは無料で公開中。 ⇒⇒コチラ
ネットビジネスで未来を夢見れる方を一人でも増やしたいと思っています。

誰でも最初は初心者。
【やってみたいけど、初心者だから不安】
という方は、ぜひお気軽にお問合せください♪
詳しいプロフィールはこちら

JavaScriptでDateオブジェクトから文字列を生成したり、逆に文字列からDateオブジェクトを作ったりすることが多いので、ノウハウとサンプルソースをまとめました。

どのような形でフォーマットするのが良いか迷うことも多いですもんね。

 

 

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

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

(理由は後述。)

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

 

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

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

Javascript(0埋めしない場合)

 

実行結果

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をつけて、後ろから2文字を取得しています。

つまり、

9が返却された場合「09」のようになり、後ろから2文字なので「09」になります。

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

 

Javascript(0埋めする場合)

 

実行結果

2019-09-26 14:06:28

 

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

上記では、汎用的な関数にするためにフォーマットをreplaceする形式にしていますが、原理が分かればもう少しシンプルに記述することもできます。
例えば、現在日付をYYYY/MM/DD形式の文字列で取得するには

Javascript(簡便な記述)

のようにできます。

 

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

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

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

コンストラクタは、以下の形式で指定します。
new Date( year, month, day [, hour, minute, second, millisecond] )

例えば、

Javascript(文字列→日付) Dateコンストラクタバージョン

のように使います。

 

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

Javascript(文字列→日付) Date.parse()バージョン

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”のようにスラッシュ(/)形式で指定するのがよさそう。

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

この記事を書いている人 - WRITER -
ご訪問ありがとうございます(^^)
副業でネットビジネスに取り組んでいるぱーくんと申します。

激務でも増えない給料に失望し、将来のために別の収入源が欲しい!の一心でネットビジネスをはじめ、2018年4月に20万円達成。

ひと月36万アクセスあるサイトを作ったノウハウは無料で公開中。 ⇒⇒コチラ
ネットビジネスで未来を夢見れる方を一人でも増やしたいと思っています。

誰でも最初は初心者。
【やってみたいけど、初心者だから不安】
という方は、ぜひお気軽にお問合せください♪
詳しいプロフィールはこちら

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Copyright© ぱーくん plus idea , 2019 All Rights Reserved.