VueCtkDateTimePicker

Vueで使いやすい日時選択UIライブラリを探した結果、現時点では「 VueCtkDateTimePicker」かな？ということで。

（vue-datetime も悪くなさそうでしたが、日選択と時間選択が別画面なのがユーザの手間になるように感じました。vuejs-datepicker はとても使いやすそうだったけど、時間選択がありませんでした。）

インストール

npm i --save vue-ctk-date-time-picker

import ＆ component化

import VueCtkDateTimePicker from 'vue-ctk-date-time-picker';
import 'vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css';

// グローバルコンポーネント指定
Vue.component('VueCtkDateTimePicker', VueCtkDateTimePicker);

// or ローカルコンポーネント指定
export default {
  components: {
    VueCtkDateTimePicker
  },
}

component使用イメージ

<VueCtkDateTimePicker
    v-model="date"
    :format="'YYYY-MM-DD HH:mm'" // 24時間表記のフォーマットにするとUIからAMとPMの指定がきえる
    :no-label="true"
    :no-header="true"
    :button-now-translation="'今日'"
    :minute-interval="5"
    :disabled-hours="['00', '01', '02', '03', '04', '05', '06', '23']"
    :overlay="true" // 日時選択UIがでているとき背景をカバーする
    :label="placeHolder" // 日時が未指定のときに表示する文字列
></VueCtkDateTimePicker>

残念なところ

日時選択UI内の月の表示がなぜか漢字なこと！！
十二月って…！！12月と表示させて、お願い…！と思いましたが、変更を受け取る仕様にはなっていなかったので断念。