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

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

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

<html>
<script async src=“https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=“adsbygoogle”

   style="display:block; text-align:center;"
   data-ad-layout="in-article"
   data-ad-format="fluid"
   data-ad-client="ca-pub-1602643700049884"
   data-ad-slot="1988535170"></ins>

<script>

   (adsbygoogle = window.adsbygoogle || []).push({});

</script>
</html>

• https://phoenixwong.github.io/vue2-timepicker/
• https://yama-itech.net/vue2-timepicker

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

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

<html>
<script src=“https://unpkg.com/vue@2.6.11/dist/vue.js”></script>
<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 class="form-horizontal">
  <div class="col-xs-4">
    <vue-timepicker
      minute-interval="15"
      hour-label="時"
      minute-label="分"
      drop-direction="up"
      input-class="form-control"
      input-width="100%" 
      advanced-keyboard
      close-on-complete
    ></vue-timepicker>
  </div>
  <div class="col-xs-8"></div>
</div>

<script type=“module”>
new Vue({

el: '#app',
components: {
  'vue-timepicker': VueTimepicker.default,
}

});
</script>

<style>

/* vue2-timepicker のスタイル調整 */
input.display-time {
  height: 34px !important;
  background-color: white !important;
}

</style>

</html>

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>