Vue.jsで日付入力は「vuejs-datepicker」がおすすめ!

環境

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

 

はじめに

過去にjQuery ui のDatepickerとVue.jsを連携させるという記事を書きました。

参考↓

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

 

どうせだったらVue.js単体で動作するDatepickerは無いかなーと探してみたところ・・・

有りました!

 

Vue.js製Datepickerコンポーネント「vuejs-datepicker」

「vuejs-datepicker」はVue.js製のDatepickerコンポーネントです。
日付、インラインモード、言語の翻訳にも対応しています。

 

 

ダウンロード

ファイルのダウンロードは以下のGithubから

https://github.com/charliekassel/vuejs-datepicker?ref=madewithvuejs.com

 

もしくは

npm install vuejs-datepicker --save

or

yarn add vuejs-datepicker

 

あるいはCDNを利用

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

 

CDNを使った導入

案の定ですが、CDNを使った導入を紹介します。

 

Vue

componentsvuejsDatepickerを呼び出します。

var app = new Vue({
  el: '#app',
  components: {
    vuejsDatepicker
  }
});

 

HTML

先程のコンポーネントを呼び出します。
注意点は、カスタムタグを<vuejs-datepicker>にする事です。

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

 

デモ

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

 

 

フォーム用の設定値

フォーム用のvaluename属性の指定もできます。

<div id="app">
<vuejs-datepicker
  :value="defaultDate"
  name="datepicker" ></vuejs-datepicker>
</div>

 

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

 

 

v-modelも設定できます。

<div id="app">
<vuejs-datepicker
  v-model="defaultDate"
  name="datepicker" ></vuejs-datepicker>
</div>

 

他にも属性の指定ができます。
詳しくはこちら

 

日付のフォーマット

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

場面によっては別のフォーマットが良い場合もあります。

その時には、この設定を使用します。

 

Vue

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

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

 

HTML

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

<div id="app">
  <vuejs-datepicker
    :value="this.default"
    name="datepicker"
    :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

 

HTML props

Prop Type Default Description
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 inputのtype属性をdateに変更
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’ カレンダーの「年」「月」「日」の最大値設定

 

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

 

 

イベント

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

 

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

 

 

言語

デフォルトですと、en(英語)が指定されています。

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

 

npm or yarnの場合

import {en, ja} from 'vuejs-datepicker/dist/locale'
data() {
  return {
      ja:ja
  }
}
<datepicker :language="ja"></datepicker>

 

CDNの場合

var app = new Vue({
  el: '#app',
  data: {
    defaultDate: '2018-12-04',
    DatePickerFormat: 'yyyy-MM-dd',
    language:{
      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,
  }
});
<div id="app">
  <vuejs-datepicker
    v-model="defaultDate"
    :format="DatePickerFormat"
    :language="language"
    name="datepicker"
    id="input-id"
    input-class="input-class"></vuejs-datepicker>
</div>

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

 

 

インライン表示

<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',
    language:{
      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,
  }
});

 

HTML

<div id="app">
  datepicker1:
  <vuejs-datepicker
    v-model="datepicker1"
    :format="DatePickerFormat"
    :language="language"
    name="datepicker1"
    id="input-id-1"
    input-class="input-class"></vuejs-datepicker>
  datepicker2:
  <vuejs-datepicker
    v-model="datepicker2"
    :format="DatePickerFormat"
    :language="language"
    name="datepicker2"
    id="input-i-2"
    input-class="input-class"></vuejs-datepicker>
  datepicker3:
  <vuejs-datepicker
    v-model="datepicker3"
    :format="DatePickerFormat"
    :language="language"
    name="datepicker3"
    id="input-id-3"
    input-class="input-class"></vuejs-datepicker>
</div>

 

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

 

 

まとめ

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

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

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

いかがでしょうか?
今日はこの辺で-

コメントを残す

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