目的

Monaca上でjavascriptの時刻を扱うライブラリ”Moment.js”を使う

導入手順

準備として、コンポーネントを追加します。
その後、正しく設定できているか動作を確認します。

準備

画面右上の”設定”の中の、”JS/CSSコンポーネントの追加と削除…”をクリックします。

"設定"をクリックし、"JS/CSSコンポーネントの追加と削除"を選択します。

検索ボックスに”momentjs”を入力して、検索ボタンをクリックします。

検索ボックスに"momentjs"を入力して、検索ボタンをクリックします。

一覧から”momentjs”を見つけて、”追加”をクリックします。

一覧から"momentjs"を見つけて、"追加"をクリックします。

モーダルウィンドウが表示されるので、”インストール”をクリックします。

モーダルウィンドウが表示されるので、"インストール"をクリックします。

インクルードするファイルを選択して”保存する”をクリックします。
まず使ってみたいということで、”components/momentjs/min/moment.min.js”を選択しています。

インクルードするファイルを選択して"保存する"をクリックします。

ここまでで、moment.jsを使う準備は完了です。

動作確認

index.htmlのons.readyに以下のように記述します。

    ons.ready(function() {
        console.log("Onsen UI is ready!");
        ons.platform.select('android');
        var now = moment().format('MMMM Do YYYY, h:mm:ss a');
        console.log(t);
    });

デバッガーのコンソールに以下のように現在時刻が表示されれば、正しくセットアップできています。

March 17th 2018, 11:38:26 pm

まとめ

以上、MonacaでMoment.jsを使うためのセットアップ方法でした。
Moment.jsはjavascriptで時刻を扱う上で大変重宝するので、ぜひ試してみてください。
Moment.jsの使い方については補足に記載している公式ページなどを参考にしてください。

補足

moment.jsの公式ページ: https://momentjs.com/