JavaScriptの日付をフォーマットする方法

JavaScript

2024.06.17

記事の概要
1. 結果的に帰ってきて欲しい形式
結果のコード
解説

記事の概要

ReactとTypeScriptで書いているときに、Date型で入ってくる日付データを以下のような自分の好きな形式にフォーマットしたくて調べてみました。

結果的に帰ってきて欲しい形式

2024/05/10
10:00:00
01:00:00

結果のコード

const toDate = (dateInfo: Date): string => {
    const year = dateInfo.getFullYear()
    const month = ('00' + dateInfo.getMonth()).slice(-2)
    const date = ('00' + dateInfo.getDate()).slice(-2)

    return (year + '/' + month + '/' + date).toString()
}

const toTime = (timeInfo: Date): string => {
    const hours = ('00' + timeInfo.getHours()).slice(-2)
    const minutes = ('00' + timeInfo.getMinutes()).slice(-2)
    const seconds = ('00' + timeInfo.getSeconds()).slice(-2)

    return (hours + ':' + minutes + ':' + seconds).toString()
}

const date1 = new Date(2024, 5, 10, 10, 0, 0)
const date2 = new Date(2024, 5, 10, 1, 0, 0)

return (
	<div>
		<p>{toDate(date1)}</p>
		<p>{toTime(date1)}</p>
		<p>{toTime(date2)}</p>
	</div>
)

解説

Dateオブジェクトのgetメソッドで以下のような使い方ができます。

（参考サイトから引用させていただきました）

let time = new Date();

console.log(time);
 Thu Apr 21 2022 16:22:32 GMT+0900 (日本標準時)

let year = time.getFullYear();
let month = time.getMonth();
let date = time.getDate();
let day = time.getDay();
let hours = time.getHours();
let minutes = time.getMinutes();
let seconds = time.getSeconds();
let milliseconds = time.getMilliseconds();

console.log(year + '年' + month + '月' + date + '日' + day + '曜日' + hours + '時' + minutes + '分' + seconds + '秒' + milliseconds);

 2022年3月21日4曜日16時22分32秒837

上記情報と、こちらの情報をもとに上記コードを実装しました。

getMonth() は 0-11 を返す。0は1月、11が12月。 slice(-2) は、文字列の右から数えて2文字目までを抜き出す。正確には、右から 0, -1, -2 番目までを取り出し、3番目(-2)を含まないので、結局右から2文字になる。
日付をYYYY-MM-DDの書式で返す関数 (JavaScript)