【Nuxt.js】dayjs応用編：カウントダウンをしてみよう！

2021.06.03

前置き

基礎編に続き応用編です。
2つの日時の差分を出していきます🕰
基礎編はこちら

【Nuxt.js】dayjs導入編：リアルタイムな日時を表示してみよう

<p v-text="$dayjs().format('dddd、MMMM D、YYYY h：mm A')" />

1	<p v-text="$dayjs().format('dddd、MMMM D、YYYY h：mm A')" />

Tuesday、February 4、2020 1：33 PM

dddd MMMM D ……長い！😒笑
省略したい場合はLLLLで同じ表記に。
この辺りも基礎編で解説済みです。

locale('ja')を指定で日本語表記

<p v-text="$dayjs().locale('ja').format('dddd、MMMM D、YYYY h：mm A')" />

1	<p v-text="$dayjs().locale('ja').format('dddd、MMMM D、YYYY h：mm A')" />

2020年2月4日火曜日 13:33

グローバルでlocale('ja')指定済み

<p v-text="$dayjs('February 4, 2020').add(1, 'year').format('YYYY')" />

1	<p v-text="$dayjs('February 4, 2020').add(1, 'year').format('YYYY')" />

では基礎編を踏まえて
2つの日時の差分を出しましょう！
あと何ヶ月、とかあと何日！
差分はdiff()を使用します。

<p v-text="$dayjs('2020-02-04').diff('2020-01-01')" />

1	<p v-text="$dayjs('2020-02-04').diff('2020-01-01')" />

結果はミリ秒で表示

2937600000

<p v-text="$dayjs('2020-02-04').diff('2020-01-01', 'month') + '月'" />

1	<p v-text="$dayjs('2020-02-04').diff('2020-01-01', 'month') + '月'" />

結果は1ヶ月ですね。
diffの第二引数がformatのような役割です。

1月

<p v-text="$dayjs('2020-02-04').diff('2020-02-01', 'day') + '日'" />

1	<p v-text="$dayjs('2020-02-04').diff('2020-02-01', 'day') + '日'" />

3日

<p v-text="$dayjs('2020-02-04T12:30:00').diff('2020-02-04T10:30:00', 'h') + '時間'" />

1	<p v-text="$dayjs('2020-02-04T12:30:00').diff('2020-02-04T10:30:00', 'h') + '時間'" />

2時間