Vue.js 2.x 時間入力コンポーネント vue2-timepicker を使ってみる

時間入力を簡素化するためのコンポーネントを探し、vue2-timepicker を試してみました。

ただし、Bootstrap3 のスタイルに融合させるために、いくつか調整が必要だったため、その内容をご紹介します。

DokuWiki, Bootstrap3 Template テーマ内で利用する
ライブラリは CDN からロードする

ページ最下部で使用するため、ドロップアップを実現する
スタイルを Bootstrap3 に融合させる

DokuWiki の HTML埋め込みで実装しています。

<html>

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<!-- CDN からライブラリとスタイルシートをロード -->
<script src="https://cdn.jsdelivr.net/npm/vue2-timepicker@1.1.5/dist/VueTimepicker.umd.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vue2-timepicker@1.1.5/dist/VueTimepicker.css" rel="stylesheet">

<div id="app">
  <div class="form-horizontal">
    <div class="col-xs-4">
      <vue-timepicker
        minute-interval="15"
        hour-label="時"
        minute-label="分"
        drop-direction="up"        // 入力候補を上方向に表示
        input-class="form-control" // Bootstrap3 のフォームクラスを指定
        input-width="100%"         // Bootstrap3 Gird 内で最大幅になるよう指定 
        advanced-keyboard          // キーボード操作を許可
        close-on-complete          // 入力候補選択後に自動で入力候補を閉じる
      ></vue-timepicker>
    </div>
  </div>
</div>

<script type="module">
new Vue({
  el: '#app',
  components: {
    'vue-timepicker': VueTimepicker.default,  // .default が必要
  }
});
</script>

<style>
  /* vue2-timepicker のスタイル調整 */
  input.display-time {
    height: 34px !important;             // フォームの高さを Bootstrap3 に合わせる
    background-color: white !important;  // readonly 属性で自動的に背景色がグレーになるのを防ぐ
  }
</style>
</html>

Vue.js 2.x 時間入力コンポーネント vue2-timepicker を使ってみる

公式・参照

前提条件

要求仕様

デモ

サンプルコードと解説