Vue.jsの時間入力にvue2-timepickerを使ってみた

下記に全て書いてある（英語）
https://www.npmjs.com/package/vue2-timepicker

インストールする

$ yarn add vue2-timepicker
or 
$ npm install vue2-timepicker --save

利用例

<template>
  <div>
    <!-- 文字列"15:00:00"などをv-modelでバインドできる --!>
    <vue-timepicker 
      :format="format"
      :minute-interval="minInterval"
      placeholder="時間"
      hour-label="時"
      minute-label="分"
      v-model="stringTime"
    />
    <!-- オブジェクトのパターン --!>
    <vue-timepicker 
      :format="format"
      :minute-interval="minInterval"
      v-model="objectTime"
    />
  </div>
</template>
<script>
import VueTimepicker from 'vue2-timepicker'
import 'vue2-timepicker/dist/VueTimepicker.css'

const vm = new Vue({
   // 色々省略
   data: {
     format: 'HH:mm', // 形式 AMなどの指定もできる
     minInterval: 5, // 分の間隔 これは5分ごとの設定
     stringTime: "15:00",
     objectTime: {
       HH: '15',
       mm: '00'
     }
   },
   components: {
     VueTimepicker,
   }
})

export default vm
</script>

注意: 文字列形式の場合のNULL

v-modelなどでバインドさせる値をstring形式（"15:00"など）にした場合
DB側からNULLなどを貰うと正しくNULLで認識されるが、そこから入力すると

想定していた文字列形式"15:00"ではなく
オブジェクトの{HH: "15", mm: "00"}になるので注意

対策1: 初期値NULLを文字列にする

初期値のNULLを空文字列 ""にする

対策2: オブジェクトを文字列に変換する

フォーマットが指定されているので文字列に戻しやすい