VuetifyのDatePickerを日本語化してみる

こんにちは！スギモトです！

VuetifyというVue用のUIコンポーネントライブラリをご存知でしょうか。

Googleが提唱しているマテリアルデザインに則ったUIコンポーネントがお手軽に利用できるすばらしいライブラリですので、触ったことないという方はぜひ一度お試しください。

実際の業務でVuetifyを利用してもう１年以上になるのですが、最近はずいぶんと公式のドキュメントが充実してきた印象があります。

さらに公式の解説に加え、日本でもユーザが増えたのか個人のブログや各社の技術ブログなどでも紹介される頻度が上がっており、日本語の記事が増えてきている印象があります。

ただ、未だにソースを見ないとイマイチ使い方がわからない！

しかも定期的にコンポーネントが増えたり、バージョンアップで便利なプロパティが増えているに説明がない……。

といういった部分もあるので、自分が業務でハマった内容を紹介していきたいと思います。

各コンポーネントについては、Vuetifyの公式サイトでまあまあ紹介されているので、コンポーネントを利用する際はぜひ確認してみてください。

Vuetifyのセットアップはこちらの記事で軽く紹介しています。

なぜこれにハマったかというと、VutifyのDatePickerを日本語化すると日付に”日”ってついてくるんですよね（笑）

次のように、素直にlocaleを設定するとこんな感じになります。

locale="ja-jp"

うーん、微妙。

利用できるpropsを見ていくと、「day-format」なるものがあるので試して見ました。

:day-format="date => new Date(date).getDate()"

それらしくなりましたね！

公式サイトで紹介されているpropsを見てもそれらしいものがありません。

eventsとevent-colorでなんとなくできそうですけど、これはちょっと気持ち悪いですよね。

そこでCSSを上書きしてみましょう。

例としてこんな感じになると思います。:nth-child(n)を使うのがポイントですね。

.v-date-picker-table.v-date-picker-table--date > table > tbody tr td:nth-child(7) .v-btn__content {
    color:blue
}

.v-date-picker-table.v-date-picker-table--date > table > tbody tr td:nth-child(1) .v-btn__content {
    color:red
}

うまくいきましたね！

日本のカレンダーっぽくなりました。

まとめ

少し工夫するだけでずいぶんと使い勝手のいいカレンダーになりました。

もともとシンプルで便利なUIですので、色々な場面で利用できそうです。