前置き
基礎編に続き応用編です。
2つの日時の差分を出していきます🕰
基礎編はこちら
復習1
共通の使用関数
- dayjs() =パース、解析
- format() =表示形式の指定
|
1 |
<p v-text="$dayjs().format('dddd、MMMM D、YYYY h：mm A')" /> |
表示
Tuesday、February 4、2020 1：33 PM
dddd MMMM D ……長い！😒笑
省略したい場合はLLLLで同じ表記に。
この辺りも基礎編で解説済みです。
復習2
日本語表記を指定
locale('ja')を指定で日本語表記
|
1 |
<p v-text="$dayjs().locale('ja').format('dddd、MMMM D、YYYY h：mm A')" /> |
表示
2020年2月4日 火曜日 13:33
表示する年月日の形式
グローバルでlocale('ja')指定済み
|
1 |
<p v-text="$dayjs('February 4, 2020').add(1, 'year').format('YYYY')" /> |
カウントダウン
diff()関数で差分を出す
では基礎編を踏まえて
2つの日時の差分を出しましょう！
あと何ヶ月、とかあと何日！
差分はdiff()を使用します。
|
1 |
<p v-text="$dayjs('2020-02-04').diff('2020-01-01')" /> |
表示
結果はミリ秒で表示
2937600000
月の差分
|
1 |
<p v-text="$dayjs('2020-02-04').diff('2020-01-01', 'month') + '月'" /> |
表示
結果は1ヶ月ですね。
diffの第二引数がformatのような役割です。
1月
日の差分
|
1 |
<p v-text="$dayjs('2020-02-04').diff('2020-02-01', 'day') + '日'" /> |
表示
3日
時間の差分
|
1 |
<p v-text="$dayjs('2020-02-04T12:30:00').diff('2020-02-04T10:30:00', 'h') + '時間'" /> |
表示
2時間