#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タイプデフォルト説明
valueDate|Stringカレンダーのデータ設定
nameStringinput name 設定
idStringinput id 設定
formatString|Functiondd MMM yyyyinpute value データフォーマット
full-month-nameBooleanfalse月名称のフル表示
languageObjecten言語設定
disabled-datesObject選択できない日付設定
placeholderStringInput placeholder 内容
inlineBooleanカレンダー常に表示
calendar-classString|Object表示するカレンダーへ class 追加
input-classString|Objectinput フォームに class 追加
wrapper-classString|Objectinput フォームの外にある div に class 追加
monday-firstBooleanfalse月曜日からスタートする
clear-buttonBooleanfalse閉じるボタン表示
clear-button-iconString閉じるボタンアイコン指定 (例: fa fa-times)
calendar-buttonBooleanfalseカレンダーボタン表示
calendar-button-iconStringカレンダーボタンアイコン指定 (ex: fa fa-calendar)
calendar-button-icon-contentStringカレンダーボタン material アイコン指定 (ex: event)
day-cell-contentFunctionday セルのカスタマイズレンダー
bootstrap-stylingBooleanfalsebootstrap v4 風
initial-viewStringminimumView設定された初期表示で表示
disabledBooleanfalse選択できないように指定
requiredBooleanfalse必須として指定
typeableBooleanfalseタイプ可能
use-utcBooleanfalseUTC 利用でタイム計算
open-dateDate|String指定した日付で開く
minimum-viewString'day'最小表示単位
maximum-viewString'year'最大表示単位

#Events

Datepicker のイベントたち

EventOutput
opened
closed
selectedDate|null
selectedDisabledObject
inputDate|null
cleared
changedMonthObject
changedYearObject
changedDecadeObject

#Date 表示フォーマット

#文字列フォーマット

TokenDescExample
dday1
dd0 prefixed day01
Dabbr dayMon
sudate suffixst, nd, rd
Mmonth number (1 based)1 (for Jan)
MM0 prefixed month01
MMMabbreviated month nameJan
MMMMmonth nameJanuary
yytwo digit year16
yyyyfour digit year2016

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

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;
      }
  }
// ...

言語リスト

AbbrLanguage
afAfrikaans
arArabic
bgBulgarian
bsBosnian
caCatalan
csCzech
daDanish
deGerman
eeEstonian
elGreek
enEnglishDefault
esSpanish
faPersian (Farsi)
fiFinnish
foFaroese
frFrench
geGeorgia
glGalician
heHebrew
huHungarian
hrCroatian
idIndonesian
isIcelandic
itItalian
jaJapanese
kkKazakh
koKorean
lbLuxembourgish
ltLithuanian
lvLatvian
mkMacedonian
mnMongolian
nbNONorwegian Bokmål
nlDutch
plPolish
ptBRPortuguese-Brazil
roRomanian
ruRussian
skSlovak
slSISlovenian
svSwedish
srSerbian (Latin)
srCyrlSerbian (Cyrl)
thThai
trTurkish
ukUkrainian
urUrdu
viVietnamese
zhChinese
zhHKChinese_HK
2020-02-15
  • vuejs

関連記事

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