Written by Kasumi

Vue.jsで日本語カレンダー入力を実装する方法【Vue 3 Datepickerライブラリ】

Vue.jsでカレンダーから日付選択して入力するフォームを実装したい。

また、カレンダーは日本語化されたものを導入したい。

本記事ではこの様な悩みを解決。

実装方法について解説します。

実装サンプル

See the Pen
Vue.js datapicker
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

入力フォームをクリックするとカレンダーがポップアップされ、選択した日付が入力されます。

実装手順は以下の通りです。

Vue 3 DatepickerライブラリをCDNで読み込む

<!-- vue 3 Datapicker css -->
<link rel="stylesheet" href="https://unpkg.com/@vuepic/vue-datepicker@latest/dist/main.css">

<!-- vue(Vue.jsを使う環境が整っていれば必要ありません) -->
<script src="https://unpkg.com/vue@next"></script>

<!-- vue 3 Datapicker js -->
<script src="https://unpkg.com/@vuepic/vue-datepicker@latest"></script>

本記事ではVue 3 Datepickerライブラリを使います。

上記CDNを実装環境に読み込んでください。

インストールされる方は公式サイトを参照↓
https://vue3datepicker.com/installation/

Vue.jsでDatepickerをコンポーネント化

    const app = Vue.createApp({
      components: { Datepicker: VueDatePicker },
      data() {
          return {
              date: null,
          };
      }
    }).mount("#app");

Vue 3 Datepickerライブラリをコンポーネントに追加して、使用できるようにします。

dataメソッドにDatepicker用のdateプロパティを設定します。

コンポーネントタグを挿入

<div id="app">
  <Datepicker v-model="date" placeholder="クリックして日時を入力"></Datepicker>
</div>

前章で設定したコンポーネントをDatepickerを使いたいエリアに挿入します。

v-modalディレクティブを設定。

以上でDatapickerが使えるようになります。

日本語化する

  <Datepicker v-model="date" locale="jp" select-text="選択する" cancel-text="キャンセル"></Datepicker>

日本語化するにはコンポーネントタグの属性にlocale=”jp”を設定します。

また、日付のselect cancelも日本語化したい場合は同じく属性にselect-text=”selectの代替え” cancel-text=”cancelの代替え”を設定します。

フォーマットも日本語化する

<Datepicker v-model="date" format="yyyy年MM月dd日 HH:mm"></Datepicker>

入力される日付のフォーマットを年月日時間に変更したい場合は上記の様にformat属性を追加します。

日付のみで時間はいらない

.dp__button {
  display: none;
}

Datepickerはデフォルトで時間も設定できるようになってます。

日付のみにしたい場合は上記CSSをあてます。

後はformat属性の値から時間表記(HH:mm)を削除すればOKです。

まとめ

Vue.jsで日本語カレンダー入力フォームを実装する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

Vue.js

Vue.jsでフォームの入力値をチェックし、リアルタイムで取得する方法

2022.09.11
8655
Vue.js

Vue.jsで開閉するドロップダウンリストを実装する方法

2022.09.02
3307
Vue.js

Vue.jsでスムーススクロールを実装する方法【vue-scrolltoライブラリを使おう】

2022.09.04
5039
Vue.js

Vue.jsでif文を使い条件分岐する方法

2022.08.27
9115