VuetifyのDatePickerを日本語化する

Vuetifyのv-date-pickerに以下のカスタマイズをしてみます。

  • テキストフィールドのクリックで表示
  • 日本語化
  • 日付の”日”を削除
  • テキストフィールドに表示する書式をYYYY-MM-DDからYYYY/MM/DDに変更
  • 土日に色付け

コード

まずは最終的なコードです。

解説

基本的に公式のサンプルを組み合わせているだけですが一応解説です。

テキストフィールドのクリックで表示(10~20行目当たり)

v-menuのactivatorスロットにv-text-fieldを指定するだけです。通常はボタンなんかをactivatorに指定することが多いですが、こんな書き方もできるんですね。

日本語化(30行目)

v-date-pickerにlocale=”jp-ja”を指定するだけです。

日付の”日”を削除(31行目)

localeを指定するだけだと以下の様に”日”と付いてきてしまいます。

v-date-pickerのday-formatで以下の様に書式を指定してあげます。

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

テキストフィールドに表示する書式をYYYY-MM-DDからYYYY/MM/DDに変更(12行目)

v-text-fieldのvalueで以下の様に書式指定用のメソッドを用意してあげます。

:value=”formatDate(date)”

formatDateでは前述のコードの様に/で区切って返してあげます。

土日に色付け(67~84行目)

styleで色付けしてあげます。

結果

こんな感じになります。取得する値自体はDate型ではなくString型なので必要なら変換が必要です。

コメントを残す

メールアドレスが公開されることはありません。