JavaScriptで日時操作を行う際はmoment.jsというライブラリが非常に役に立ちます。簡単な使用方法を後述します。
Nuxt.jsから扱う場合は専用のモジュールがあるため、そちらを利用します。
$ npm install --save-dev @nuxtjs/moment # or yarn add --dev @nuxtjs/moment
export default {
buildModules: [
'@nuxtjs/moment'
],
moment: {
// configをここで設定可能
locales: ['ja']
}
}
moment.jsにthis.$momentでアクセスできるようになっている。
<template>
<div>{{ now }}</div>
</template>
<script>
export default {
computed: {
now () {
return this.$moment().format('YYYY-MM-DD')
}
},
}
</script>
moment.jsでは簡単にフォーマッティングが可能です。
moment().format('MMMM Do YYYY, h:mm:ss a') // July 11th 2020, 10:25:10 am
moment().format('dddd') // Saturday
moment().toDate() // Date型で取得
moment().unix() // unix timestampで取得
moment().toISOString() // `2020-07-10T10:00:00.964Z` ISO8601 フォーマットの文字列で取得
実際の開発現場で頻出の使い方を紹介します。
例えばSQLを使って日の初めから終わりまでのデータを取得したいとします。
以下のように、プレースホルダでbetween区のfromとtoを用意し、そこにmoment.jsで作ったfromとtoを差し込みます。
日の初めも終わりも、moment.jsを使えば直感的に取得できます。
const mysql = require('mysql')
const connection = mysql.createConnection({
host : 'localhost',
user : 'me',
password : 'password'
})
const from = moment().startOf('day').unix()
const to = moment().endOf('day').unix()
connection.query(
'SELECT * FROM `your_table` WHERE `sample_column` between ? and ?',
[from, to],
function (error, results, fields) {}
)
tsconfig.json
{
"compilerOptions": {
"types": [
"@nuxt/types",
"@nuxtjs/moment"
]
}
}