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アナリティクスタグは流用しないで下さい。