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

2018年12月6日

vuejs-datepickerとは

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

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

 

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

環境

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

vue.js 2.6.10
vuejs-datepicker 1.6.2

 

ライブラリの取得

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

npm

npm install vuejs-datepicker --save

yarn

yarn add vuejs-datepicker

CDN

<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

 

フォーマット形式

設定 説明
d 日付 1
dd 0 付きの日付 01
D 曜日 Mon
su date suffix st, nd, rd
M 月(月名を併記) 1 (for Jan)
MM 0 付きの月 01
MMM 月名 Jan
MMMM フルの月名 January
yy 2桁の年 16
yyyy 4桁の年 2016

 

言語翻訳(日本語等)

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

 

デフォルトですと、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>

 

プロパティ一覧

Type Default 説明
value Date|String
name String name属性
id String ID属性
format String|Function dd MMM yyyy 日付フォーマット
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 outer のdivのClass属性
monday-first Boolean false 週の開始を月曜日にする
clear-button Boolean false 日付のクリアボタンを表示
clear-button-icon String クリアボタンのテキスト
calendar-button Boolean false カレンダーを表示するボタン
calendar-button-icon String 上記のアイコン
calendar-button-icon-content String 上記のマテリアルアイコン
day-cell-content Function デイセルでカスタムコンテンツをレンダリングするために使用
bootstrap-styling Boolean false bootstrap v4 のClass属性をせ
initial-view String minimumView 設定されている場合、そのビューで開きます
disabled Boolean false inputにdisable属性を付与
required Boolean false inputにrequired属性を付与
typeable Boolean false trueの場合、ユーザーに日付の入力を許可します。
use-utc Boolean false 時間計算にUTCを使用
open-date Date|String 設定されている場合、その日に開く
minimum-view String 'day' カレンダーの「年」「月」「日」の最小値設定
maximum-view String 'year' カレンダーの「年」「月」「日」の最大値設定

 

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

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

 

イベント

設定例

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

 

イベント一覧

イベント属性 返り値 説明
opened カレンダーが開いたとき
closed カレンダーが閉じたとき
selected Date|null 日付が選択されたとき
selectedDisabled Object A disabled date has been selected
input Date|null 日付が入力されたとき
cleared 日付がクリアされたとき
changedMonth Object 月を変更したとき
changedYear Object 年を変更したとき
changedDecade Object 前後10年ページに変更したとき

 

日付を制限する

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

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を連携させる

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-Date Picker, Form, UI Components, vue.js, ライブラリ
-, , , ,