Vue.js vuejs-datepickerを利用してカレンダーから日付選択を可能にする

Vue.js vuejs-datepickerを利用してカレンダーから日付選択を可能にする

Vue.jsのライブラリvuejs-datepickerをインストールして、日本語化とフォーマット指定してカレンダーから日付を取得するサンプルコードです。bootstrapも利用してます。

環境

  • OS  CentOS 8.0.1905 (Core)
  • node v12.13.1
  • npm 6.13.2
  • @vue/cli 4.1.1
  • vuejs-datepicker 1.6.2

※CentOS8にVue.jsの環境構築はこちら

vuejs-datepickerインストール

記のコマンドでインストールします。

bootstrapもインストールしておきます。

vuejs-datepickerの利用

vue-toastedを利用するまでの簡単なサンプルコードとなります。

src配下のApp.vueを下記のように編集します。

編集後に、 ブラウザから http://プライベートIP:8080 にアクセスすると、 vuejs-datepickerによりカレンダーから日付の選択が可能になります。