JavaScriptのDateの機能を使わずにmoment.jsを使って日時処理を簡単に表示する方法をご紹介します。
Contents
ディスプレイ広告
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>
moment.jsを使って日時処理を簡単に表示するデモページ
moment.jsを使って日時処理を簡単に表示するデモページ
ソース元:Moment.js
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。