はじめに

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

 

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

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

 

 

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

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


 

環境

  • vue.js: 2.5.17
  • vuejs-datepicker: 1.5.4

 

インストール

インストールにはnpm,yarn,CDNどれか一つを使用します。

npm

npm install vuejs-datepicker --save

yarn

yarn add vuejs-datepicker

CDN

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

 

Gitは以下のGithubから

https://github.com/charliekassel/vuejs-datepicker

 

導入手順

CDNを使った導入を紹介します。

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

componentsvuejsDatepickerを呼び出します。

new Vue({
  el: '#app',
  components: {
    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: {
    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(英語)が指定されています。

これを別の言語に変更したい場合は、以下の設定を行います。

 

npm もしくは yarn

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

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

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

data() {
  return {
      ja:ja
  }
}

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

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

 

CDN

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

new Vue({
  el: '#app',
  data: {
    ja:{
      language: 'Japanese',
      months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      monthsAbbr: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      days: ['日', '月', '火', '水', '木', '金', '土'],
      rtl: false,
      ymd: 'yyyy-MM-dd',
      yearSuffix: '年'
    }
  },
  components: {
    vuejsDatepicker,
  }
});

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

  <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 See below for configuration
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 Use to render custom content in day cell
bootstrap-styling Boolean false bootstrap v4 のClass属性をせ
initial-view String minimumView If set, open on that view
disabled Boolean false inputにdisable属性を付与
required Boolean false inputにrequired属性を付与
typeable Boolean false trueの場合、ユーザーに日付の入力を許可します。
use-utc Boolean false use UTC for time calculations
open-date Date|String If set, open on that date
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を使用する

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: {
    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

 

まとめ

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

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

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

 

今日はこの辺で-

 

時間入力Timepicker系ライブラリ

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

興味ありましたらどぞー

時間入力系Timepickerライブラリ「Wickedpicker」を使ってみた

 

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

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

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

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください