記事の概要
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)
コメント