Vue.jsのdatepickerは「vuejs-datepicker」がおすすめ！

vuejs-datepickerとは

Vue.jsのDatepickerライブラリを探したところ「vuejs-datepicker」を見つけました。

日付フォーマット、インラインモード、言語の翻訳にも対応していて非常に便利なのでご紹介します。

環境

この記事は、以下の管理人の検証環境にて記事にしています。

ライブラリの取得

ライブラリを取得するには、npm, yarn, CDNのどれか一つを使用します。

npm install vuejs-datepicker --save

yarn add vuejs-datepicker

<script src="https://unpkg.com/vuejs-datepicker"></script>

直接「vuejs-datepicker」のリポジトリを取得する場合は、以下のURLから取得できます。

導入手順

管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。
このサンプルでは、CDNを使ってVue.jsでdatepickerを実装します。

1. Vueにコンポーネントを追加する

components で vuejsDatepickerを呼び出します。

new Vue({
  el: '#app',
  components: {
    'vuejs-datepicker':vuejsDatepicker
  }
});

2. テンプレートを用意する

<vuejs-datepicker>を設置します。

サンプルはケバブケースで記載しています。

<div id="app">
  <vuejs-datepicker></vuejs-datepicker>
</div>

サンプル

今回のソースを実際に触って確認できるようにデモを用意しました。

See the Pen vuejs-datepicker by カバの樹 (@kabanoki) on CodePen.0

日付のフォーマット

日付のデフォルトの設定だと「dd MMM yyyy」になっています。

場面によっては別のフォーマットが良い場合もあります。
その時には、この設定を使用します。

1. フォーマットを指定

今回は、例として日付のフォーマットを「yyyy-MM-dd」形式に設定します。

new Vue({
  el: '#app',
  data: {
    default: '2018-10-04',
    DatePickerFormat: 'yyyy-MM-dd'
  },
  components: {
    'vuejs-datepicker':vuejsDatepicker
  }
});

2. テンプレートに:formatを設定

<vuejs-datepicker>に:format属性を付与することで、日付のフォーマットを「yyyy-MM-dd」に設定します。

<div id="app">
  <vuejs-datepicker
    :value="this.default"
    :format="DatePickerFormat"></vuejs-datepicker>
</div>

サンプル

See the Pen vuejs-datepicker format by カバの樹 (@kabanoki) on CodePen.0

フォーマット形式

言語翻訳（日本語等）

年月曜日等の日本語を設定する場合、以下を行います。

デフォルトですと、en(英語)が指定されています。
これを別の言語に変更したい場合は、以下の設定を行います。

ES6等で実装する場合

[手順1] - 言語用のプラグイン

import {ja} from 'vuejs-datepicker/dist/locale'

[手順2] - プラグインを取り込む

data() {
  return {
      ja:ja
  }
}

[手順3] - テンプレートにパラメーターを設置する

<datepicker :language="ja"></datepicker>

UMDで実装する場合

[手順1] - 言語用CDNを呼び出す

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locale/translations/ja.js"></script>

[手順2] - Vueに言語用データをもたせる

new Vue({
  el: '#app',
  data: {
    ja: vdp_translation_ja.js
  },
  components: {
    'vuejs-datepicker':vuejsDatepicker
  }
});

[手順3] - テンプレートに言語のパラメーターを設置する

  <vuejs-datepicker :language="ja"></vuejs-datepicker>

サンプル

See the Pen vuejs-datepicker language-v2 by カバの樹 (@kabanoki) on CodePen.0

プロパティ

設定例

<vuejs-datepicker
  v-model="datepicker1"
  :value="defaultDate"
  name="datepicker" ></vuejs-datepicker>

プロパティ一覧

v-modelがフォーマット通りに表示されない場合は以下の記事を参考にしてください。

vuejs-datepickerでv-modelの値がフォーマット通りにならない時の解決方法

イベント

設定例

<vuejs-datepicker 
      @opened="opened"              
      @selected="selected"              
      @closed="closed"></vuejs-datepicker>

イベント一覧

日付を制限する

選択できる日付を制限する方法は以下の記事を参考にしてください。

vuejs-datepickerで日付の制限する方法

指定した日付を強調表示する

土日、祝日等の日付を強調表示したい場合は、以下の記事を参考にしてください。

vuejs-datepickerで指定の日付を強調表示する

土曜日と日曜日を目立つように色をつけたい場合は、以下の記事を参考にしてください。

vuejs-datepickerで土日を強調表示する

インライン表示

<vuejs-datepicker :inline="true"></vuejs-datepicker>

See the Pen vuejs-datepicker inline by カバの樹 (@kabanoki) on CodePen.0

年のみ表示

<vuejs-datepicker minimum-view="'year'"></vuejs-datepicker>

See the Pen vuejs-datepicker year only by カバの樹 (@kabanoki) on CodePen.0

複数のDatepickerを使用する

1ページに複数のdatepickerが必要な場合は以下のように記述する。

Vue

var app = new Vue({
  el: '#app',
  data: {
    datepicker1: '2018-12-04',
    datepicker2: '2018-12-05',
    datepicker3: '2018-12-06',
    DatePickerFormat: 'yyyy-MM-dd',
  },
  components: {
    'vuejs-datepicker':vuejsDatepicker
  }
});

HTML

<div id="app">
  datepicker1:
  <vuejs-datepicker
    v-model="datepicker1"
    :format="DatePickerFormat"
    name="datepicker1"></vuejs-datepicker>
  datepicker2:
  <vuejs-datepicker
    v-model="datepicker2"
    :format="DatePickerFormat"
    name="datepicker2"></vuejs-datepicker>
  datepicker3:
  <vuejs-datepicker
    v-model="datepicker3"
    :format="DatePickerFormat"
    name="datepicker3"></vuejs-datepicker>
</div>

例

See the Pen vuejs-datepicker multiple by カバの樹 (@kabanoki) on CodePen.0

外部のボタンから起動する

外部のボタンをクリックしてdatepickerを起動したい場合は以下の記事を参考にしてください。

vuejs-datepickerを外部ボタンから起動する方法

まとめ

という訳で、Vue.js製Datepickerコンポーネントをご紹介しました。

かなり複雑な処理も可能なので、jQuery製Datepickerと差し替えても不便は無いと思います。

管理人もVue.jsを使うプロジェクトには、今回の「vuejs-datepicker」をメインに使用しています。

今日はこの辺で－

時間入力Timepicker系ライブラリ

Timepicker系のライブラリの記事も書きました。

興味ありましたらどぞー

Timepicker系ライブラリ「Wickedpicker」を使ってみた

「V-Calendar」で特殊な入力のdatepickerを実装する

本来はカレンダーのライブラリなのですが、特殊な入力のdatepickerとして使えるので、こちらもおすすめです！

VueJS製datepickerにもなる「V-Calendar」の使い方

Date Time Pickerを使いたい

日付入力だけじゃなくて、時間の入力も一括で行いたいなら、以下の記事がおすすめです。

Vue.jsのDate Time Picker「VueCtkDateTimePicker」の使い方

過去にjQuery ui のDatepickerとVue.jsを連携させるという記事も書きましたので、興味がありましたらこちらもどぞー

Vue.jsとJQuery UI のDatePickerを連携させる