moment.jsを使って日時処理を簡単に表示する方法｜DAD UNION

JavaScriptのDateの機能を使わずにmoment.jsを使って日時処理を簡単に表示する方法をご紹介します。

Contents

moment.jsを使って日時処理を簡単に表示するCSS記述
moment.jsを使って日時処理を簡単に表示するJavaScriptの記述
moment.jsを使って日時処理を簡単に表示するデモページ
ソース元：Moment.js

moment.jsを使って日時処理を簡単に表示するCSS記述

※必要に応じて変更して下さい。

<style>
body {
  font-size: 18px;
  text-align: center;
  line-height: 1.8em;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.6em;
  padding: 20px 0;
}
h2{
  text-align: center;
  font-size: 20px;
  padding-top: 20px;
}
p{
  padding-bottom: 20px;
}
</style>

moment.jsを使って日時処理を簡単に表示するJavaScriptの記述

※moment.jsファイルを読み込みます。以下の様に記述することで指定した日時処理を簡単に出来ます。

moment().format(‘日付のフォーマット’)
moment(“相対時間”, “日付のフォーマット”).fromNow()
moment().subtract(何日前数値, ‘days’).calendar()

document.write()で各日時処理後の内容を表示してます。

<script src="moment.js"></script>
<h2>日付のフォーマット</h2>
<script>
var m = moment().format('MMMM Do YYYY, h:mm:ss a'); // July 25th 2023, 5:28:31 pm
document.write(m);
</script>
<br>

<script>
var m = moment().format('dddd');    // Tuesday
document.write(m);
</script>
<br>

<script>
var m = moment().format("MMM Do YY");   // Jul 25th 23
document.write(m);
</script>
<br>

<script>
var m = moment().format('YYYY [escaped] YYYY'); // 2023 escaped 2023
document.write(m);
</script>
<br>

<script>
var m = moment().format();  // 2023-07-25T17:35:13+09:00
document.write(m);
</script>
<br>


<h2>相対時間</h2>
<script>
var m = moment("20111031", "YYYYMMDD").fromNow();   // 12 years ago
document.write(m);
</script>
<br>

<script>
var m = moment("20120620", "YYYYMMDD").fromNow();   // 11 years ago
document.write(m);
</script>
<br>

<script>
var m = moment().startOf('day').fromNow();  // 18 hours ago
document.write(m);
</script>
<br>

<script>
var m = moment().endOf('day').fromNow();    // in 6 hours
document.write(m);
</script>
<br>

<script>
var m = moment().startOf('hour').fromNow(); // 38 minutes ago
document.write(m);
</script>
<br>


<h2>カレンダー時間</h2>
<script>
var m = moment().subtract(10, 'days').calendar();   // 07/15/2023
document.write(m);
</script>
<br>

<script>
var m = moment().subtract(6, 'days').calendar();    // Last Wednesday at 5:40 PM
document.write(m);
</script>
<br>

<script>
var m = moment().subtract(3, 'days').calendar();    // Last Saturday at 5:40 PM
document.write(m);
</script>
<br>

<script>
var m = moment().subtract(1, 'days').calendar();    // Yesterday at 5:40 PM
document.write(m);
</script>
<br>

<script>
var m = moment().calendar();    // Today at 5:40 PM
document.write(m);
</script>
<br>

<script>
var m = moment().add(1, 'days').calendar(); // Tomorrow at 5:40 PM
document.write(m);
</script>
<br>

<script>
var m = moment().add(3, 'days').calendar(); // Friday at 5:40 PM
document.write(m);
</script>
<br>

<script>
var m = moment().add(10, 'days').calendar();    // 08/04/2023
document.write(m);
</script>
<br>