ローカライズされた日付と時刻の表示方法(moment.jsを使用)


ステップ1: moment.jsのインストール まず、moment.jsをインストールします。npmを使用している場合は、以下のコマンドを実行します。

npm install moment

または、CDNを使用している場合は、HTMLファイルの<head>セクション内に次のスクリプトを追加します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

ステップ2: 必要なロケールのインポート moment.jsはデフォルトでは英語のロケールが設定されていますが、他の言語のロケールを使用することもできます。例えば、ポルトガル語のロケールを使用する場合は、次のようにインポートします。

import 'moment/locale/pt';

または、CDNを使用している場合は、HTMLファイルの<head>セクション内に次のスクリプトを追加します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/pt.min.js"></script>

ステップ3: ローカライズされた日付と時刻の表示 moment.jsを使用して、ローカライズされた日付と時刻を表示する方法を見てみましょう。

const now = moment();
const formattedDate = now.format('LL'); // ロケールに応じた日付のフォーマット
const formattedTime = now.format('LT'); // ロケールに応じた時刻のフォーマット
console.log(formattedDate); // 例: 2022年1月1日
console.log(formattedTime); // 例: 午後2:30

上記のコードでは、moment()関数を使用して現在の日付と時刻を取得し、format()メソッドを使用してロケールに応じたフォーマットで表示しています。'LL'は日付のフォーマットを表し、'LT'は時刻のフォーマットを表します。