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で日本語カレンダー入力フォームを実装する方法について紹介しました。
以上で解説を終わります。