# vuejs-datepicker 使ってカレンダー表示 日本語多言語対応

最近は nuxtjs と bootstrap-vue でプロジェクト立ち上げ開発中です。bootstrap-vue は vuejs ユーザーにとっては非常にわかりやすくて、学習コストも低くて、使いやすい。今までずーと愛用していますが、唯一不満としたらカレンダーコンポーネントがないことです。仕事でエントリーフォームを作成することがあって、誕生日やエントリー日などのカレンダー表示が必要な時は非常に困ります。bootstrap-vue のこの欠点を vuejs-datepicker でいつも補っていますが、今更ですが、使い方をまとめました。

ちなみに、bootstrap-vue はバージョン 2.5 で b-calendar をリリースする予定だそうです。早ければ 2020 年の夏まではリリースできるとのスケジュールですが、機能や UI などがまだわかりませんが、bootstrap の作品は期待できるに違いないでしょう。カレンダー機能がリリースされるまではとりあえず、パワーフルで機能もたくさんある vuejs-datepicker をお勧めします。作者は Charlie Kassel で MIT ライセンスになります。

# 公式デモ

online demo (opens new window)
公式サイトに公開しているオンラインデモです。基本的に細かい設定いらなかったら、パッと見てすぐ使えるくらいのレベルで非常にわかりやすいです。

# パッケージインストール動かすまで

npm: vuejs-datepicker (opens new window)

インストール

npm i vuejs-datepicker

インポートして動かす

<template>
  <div>
    <datepicker />
  </div>
</template>

<script>
import Datepicker from "vuejs-datepicker";

export default {
  // ...
  components: {
    Datepicker
  }
  // ...
};
</script>

# 利用できる props

Prop タイプ デフォルト 説明
value Date|String カレンダーのデータ設定
name String input name 設定
id String input id 設定
format String|Function dd MMM yyyy inpute value データフォーマット
full-month-name Boolean false 月名称のフル表示
language Object en 言語設定
disabled-dates Object 選択できない日付設定
placeholder String Input placeholder 内容
inline Boolean カレンダー常に表示
calendar-class String|Object 表示するカレンダーへ class 追加
input-class String|Object input フォームに class 追加
wrapper-class String|Object input フォームの外にある div に class 追加
monday-first Boolean false 月曜日からスタートする
clear-button Boolean false 閉じるボタン表示
clear-button-icon String 閉じるボタンアイコン指定 (例: fa fa-times)
calendar-button Boolean false カレンダーボタン表示
calendar-button-icon String カレンダーボタンアイコン指定 (ex: fa fa-calendar)
calendar-button-icon-content String カレンダーボタン material アイコン指定 (ex: event)
day-cell-content Function day セルのカスタマイズレンダー
bootstrap-styling Boolean false bootstrap v4 風
initial-view String minimumView 設定された初期表示で表示
disabled Boolean false 選択できないように指定
required Boolean false 必須として指定
typeable Boolean false タイプ可能
use-utc Boolean false UTC 利用でタイム計算
open-date Date|String 指定した日付で開く
minimum-view String 'day' 最小表示単位
maximum-view String 'year' 最大表示単位

# Events

Datepicker のイベントたち

Event Output
opened
closed
selected Date|null
selectedDisabled Object
input Date|null
cleared
changedMonth Object
changedYear Object
changedDecade Object

# Date 表示フォーマット

# 文字列フォーマット

Token Desc Example
d day 1
dd 0 prefixed day 01
D abbr day Mon
su date suffix st, nd, rd
M month number (1 based) 1 (for Jan)
MM 0 prefixed month 01
MMM abbreviated month name Jan
MMMM month name January
yy two digit year 16
yyyy four digit year 2016

# ファンクション フォーマット

moment, date-fns, globalize などのライブラリ使ってフォーマット指定することができます。

moment の場合

<script>
  methods: {
    customFormatter(date) {
      return moment(date).format('MMMM Do YYYY, h:mm:ss a');
    }
  }
</script>
<datepicker :format="customFormatter"></datepicker>

# 日付の disabled 化

<script>
  var state = {
    disabledDates: {
      to: new Date(2016, 0, 5), // Disable all dates up to specific date
      from: new Date(2016, 0, 26), // Disable all dates after specific date
      days: [6, 0], // Disable Saturday's and Sunday's
      daysOfMonth: [29, 30, 31], // Disable 29th, 30th and 31st of each month
      dates: [
        // Disable an array of dates
        new Date(2016, 9, 16),
        new Date(2016, 9, 17),
        new Date(2016, 9, 18)
      ],
      ranges: [
        {
          // Disable dates in given ranges (exclusive).
          from: new Date(2016, 11, 25),
          to: new Date(2016, 11, 30)
        },
        {
          from: new Date(2017, 1, 12),
          to: new Date(2017, 2, 25)
        }
      ],
      // a custom function that returns true if the date is disabled
      // this can be used for wiring you own logic to disable a date if none
      // of the above conditions serve your purpose
      // this function should accept a date and return true if is disabled
      customPredictor: function(date) {
        // disables the date if it is a multiple of 5
        if (date.getDate() % 5 == 0) {
          return true;
        }
      }
    }
  };
</script>
<datepicker :disabled-dates="state.disabledDates"></datepicker>

# 日付ハイライト表示

<script>
  var state = {
    highlighted: {
      to: new Date(2016, 0, 5), // Highlight all dates up to specific date
      from: new Date(2016, 0, 26), // Highlight all dates after specific date
      days: [6, 0], // Highlight Saturday's and Sunday's
      daysOfMonth: [15, 20, 31], // Highlight 15th, 20th and 31st of each month
      dates: [
        // Highlight an array of dates
        new Date(2016, 9, 16),
        new Date(2016, 9, 17),
        new Date(2016, 9, 18)
      ],
      // a custom function that returns true of the date is highlighted
      // this can be used for wiring you own logic to highlight a date if none
      // of the above conditions serve your purpose
      // this function should accept a date and return true if is highlighted
      customPredictor: function(date) {
        // highlights the date if it is a multiple of 4
        if (date.getDate() % 4 == 0) {
          return true;
        }
      },
      includeDisabled: true // Highlight disabled dates
    }
  };
</script>
<datepicker :highlighted="state.highlighted"></datepicker>

# 日本語対応多言語対応

nuxtjs の plugin ファイルの設定

import Vue from "vue";
import Datepicker from "vuejs-datepicker";
import { zh } from "vuejs-datepicker/dist/locale";

Datepicker.props.language.default = () => zh;
Vue.component("datepicker", Datepicker);

これを nuxt.config に設定して、グローバルコンポーネントとして使えるようになります。

language props 使って設定するとき

<datepicker :language="es"></datepicker>
// ...
import { es } from "vuejs-datepicker/dist/locale";

// ...
  computed: {
      es(){
          return es;
      }
  }
// ...

言語リスト

Abbr Language
af Afrikaans
ar Arabic
bg Bulgarian
bs Bosnian
ca Catalan
cs Czech
da Danish
de German
ee Estonian
el Greek
en English Default
es Spanish
fa Persian (Farsi)
fi Finnish
fo Faroese
fr French
ge Georgia
gl Galician
he Hebrew
hu Hungarian
hr Croatian
id Indonesian
is Icelandic
it Italian
ja Japanese
kk Kazakh
ko Korean
lb Luxembourgish
lt Lithuanian
lv Latvian
mk Macedonian
mn Mongolian
nbNO Norwegian Bokmål
nl Dutch
pl Polish
ptBR Portuguese-Brazil
ro Romanian
ru Russian
sk Slovak
slSI Slovenian
sv Swedish
sr Serbian (Latin)
srCyrl Serbian (Cyrl)
th Thai
tr Turkish
uk Ukrainian
ur Urdu
vi Vietnamese
zh Chinese
zhHK Chinese_HK
2020-02-15
  • vuejs

関連記事

polyfill という宝物で開発時の ie11 対応した時のメモ
nuxt cordova web ハイブリッドアプリ作成した時のメモ
javascript reduce 連想配列の合計計算覚えよう
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
値段をカンマと円マーク表示 vuejs money-format filter 自作
vue hook 使って vuejs コンポーネントライフサイクル監視
vuejs v-if と v-show の違い
vuejs i18n の html-lang と font 設定
nuxtjs vue router params query ルートから取得できるもの
vuejs スクロールでナビバー表示非表示
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
vuejs 開発時に遭遇したエラーリスト
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
laravel に vuejs 使うための初期設定
vuejs で omisejapan の決済フォーム作成した時のメモ