Vue.jsでホテルや旅館などに便利なDatePickerを実装する「vue-hotel-datepicker」

vue-hotel-datepickerとは

vue-hotel-datepickerは、Vue.jsを使ってホテルや旅館などの予約日付を範囲していできるDatePickerコンポーネントライブラリです。

【動画サイズ：78KB】

環境

インストール

以下のnpm、CDNを使ってインストールします。

npm

npm install vue-hotel-datepicker --save

CDN

<script src="https://cdn.jsdelivr.net/npm/vue-hotel-datepicker@2.7.8/dist/vue-hotel-datepicker.min.js"></script>

gitリポジトリは以下から取得できます。

https://github.com/krystalcampioni/vue-hotel-datepicker

導入手順

1. ライブラリの取り込み

（1）ES6等の場合 [注意]モジュール版は未検証です。

import HotelDatePicker from 'vue-hotel-datepicker'

（2）UMDの場合

const HotelDatePicker = window['HotelDatePicker'].default;

2.メソッドを設定

上記で取得したHotelDatePickerを components に取り込みます。

言語翻訳用にjaオブジェクトを用意します。

new Vue({
  el: '#app', 
  components: {
    'hotel-date-picker': HotelDatePicker,
  },
  data: {
    ja: {
      night: '日',
      nights: '日間',
      'day-names': ['日', '月', '火', '水', '木', '金', '土'],
      'check-in': 'チェックイン',
      'check-out': 'チェックアウト',
      'month-names': ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    }
  }
});
 

3. テンプレートを準備

<hotel-date-picker> を設置する。
i18nで日本語を設定します。

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <hotel-date-picker :i18n="ja"></hotel-date-picker>
</div>

サンプル

>>専用ページで確認する

さいごに

Vue.jsを使ってホテルや旅館などの予約日付を範囲していできるDatePickerコンポーネントライブラリでした。

今日はこの辺でー