<template>
</template>

<script>
    import VueTimepicker from 'vue2-timepicker'
    import 'vue2-timepicker/dist/VueTimepicker.css'
    export default {
        components: {
            'vue-timepicker': VueTimepicker,
        },
    }
</script>

以下の書き方だとcssも一緒にインポートしてくれます。下の方は環境によっては読み込めない可能性があるようです。

import VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue'
export default {
    components: {
        'vue-timepicker': VueTimepicker,
    },
}

import VueTimepicker from 'vue2-timepicker/src' 
export default {
    components: {
        'vue-timepicker': VueTimepicker,
    },
}

vue2-timepickerを使ってみる

インポートできたら実際に使用してみたいと思います。templateタグ内にvue-timepickerコンポーネントを入れてみます。

<template>
    <vue-timepicker></vue-timepicker>
</template>

以下のように時間入力用のコンポーネントが表示されます。

vue2-timepickerの基本コンポーネント

フォーマット指定

デフォルトでは”HH:mm”形式での入力になりますが、変更する事が可能です。

<template>
    <vue-timepicker
        format="hh:mm:ss A">
    </vue-timepicker>
</template>

vue2-timepickerでフォーマット指定

フォーマットとして指定可能な形式は以下の通り。

トークン	説明	例
HH	[時] 0付きの24時間 (0-23時)	00, 01, …, 23
H	[時] 0なしの24時間 (0-23時)	0, 1, …, 23
kk	[時] 0付きの24時間 (1-24時)	01, 02, …, 24
k	[時] 0なしの24時間 (1-24時)	1, 2, …, 24
hh	[時] 0付きの12時間	01, 02, …, 12
h	[時] 0なしの12時間	1, 2, …, 12
mm	[分] 0付き	00, 01, …, 59
m	[分] 0なし	0, 1, …, 59
ss	[秒] 0付き	00, 01, …, 59
s	[秒] 0なし	0, 1, …, 59
A	[午前午後] 大文字	AM, PM
a	[午前午後] 小文字	am, pm

初期値を与える

デフォルトの値をObjectまたはStringの変数をバインドすることで設定します。

<!-- オブジェクト -->
<template>
    <vue-timepicker
        format="hh:mm:ss A"
        v-model="dateObject">
    </vue-timepicker>
</template>

<script>
    export default {
        data: function () {
            return {
                dateObject: {
                    hh: '01',
                    mm: '02',
                    ss: '03',
                    A: 'AM',
                },
            }
        },
    }
</script>

<!-- 文字列 -->
<template>
    <vue-timepicker
        format="hh:mm:ss A"
        v-model="dateString">
    </vue-timepicker>
</template>

<script>
    export default {
        data: function () {
            return {
                dateString: '01:02:03 AM',
            }
        },
    }
</script>

vue2-timepickerで初期値指定

input要素に属性を与える

時間フォームはHTMLのinput要素になっていますが、こちらに属性を与えることができます。

<template>
    <vue-timepicker
        format="hh:mm:ss A"
        id="timepicker"
        name="time"
        placeholder="時間を入力"
        input-class="form-control">
    </vue-timepicker>
</template>

vue2-timepickerのinputの属性指定

与えることができる属性は以下のとおりです。

属性	説明
id	inputにid属性を設定できます
name	inputにname属性を設定できます
placeholder	inputにplaceholder属性を設定できます
input-class	inputにclass属性を設定できます
input-width	inputにwidth属性を設定できます
tabindex	inputにtabindex属性を設定できます
autocomplate	inputにautocomplete属性を設定できます

選択リストの文言を日本語化

フォームを選択した際に表示される選択リストの”HH”、”mm”、”am”、”PM”などの表示を変更することができます。

<template>
    <vue-timepicker
        format="hh:mm:ss A"
        hour-label="時"
        minute-label="分"
        second-label="秒"
        apm-label="区分"
        am-text="午前"
        pm-text="午後">
    </vue-timepicker>
</template>

vue2-timepickerの表示を日本語化

与えることができる設定は以下のとおりです。

プロパティ	説明
hour-label	HH, H, hh, h, kk, kの表示を変えます
minute-label	mm, mの表示を変えます
second-label	ss, sの表示を変えます
apm-label	A, aの表示を変えます
am-text	AM, amの表示を変えます
pm-text	PM, pmの表示を変えます

イベント

vue2-timepickerには以下のイベントハンドリングを設定することができます。

イベント	説明
@input	値が変わったときに呼び出されます
@change	値が変わったときに呼び出されます
@open	選択リストを開いたときに呼び出されます
@close	選択リストを閉じたときに呼び出されます
@focue	フォームにフォーカスしたときに呼び出されます
@blur	フォームのフォーカスが外れたときに呼び出されます
@error	入力値がエラーになった際に呼び出されます

オプション

ここからはvue2-timepickerに設定することができるオプションを見ていきます。

選択可能な分秒の間隔を設定する

時間を指定する際に5分おきや5秒おきの時間を選択したい場合もあるでしょう。分と秒の間隔を指定することができます。

<template>
    <vue-timepicker
        format="hh:mm:ss A"
        minute-interval="5"
        second-interval="5">
    </vue-timepicker>
</template>

vue2-timepickerで分秒の間隔を設定

時分秒の指定可能な範囲を制限する

間隔指定ではなく、選択可能な時間を指定して制限することもできます。ここで選択された数字以外はリストに表示されますが、選択ができない状態になります。

<!-- hour: 10, 11, 13, 14, 15, 16, 17 -->
<!-- minute: 0, 40 -->
<!-- second: 0, 20 -->
<template>
    <vue-timepicker
        format="hh:mm:ss A"
        :hour-range="[10, 11, [13, 17]]"
        :minute-range="[0, 40]"
        :second-range="[0, 20]">
    </vue-timepicker>
</template>

vue2-timepickerで選択可能範囲の設定

選択可能な数字以外が不要な場合はそれらをリストから隠すこともできます。

<template>
    <vue-timepicker
        format="hh:mm:ss A"
        :hour-range="[10, 11, [13, 17]]"
        :minute-range="[0, 40]"
        :second-range="[0, 20]"
        hide-disabled-hours
        hide-disabled-minutes
        hide-disabled-seconds>
    </vue-timepicker>
</template>

vue2-timepickerで選択可能範囲以外の非表示設定

キーボード入力を可能にする

フォームが選択された状態でキーボードを使って以下の操作を可能にすることができます。

上下左右キー: 数字の選択
Space, Enterキー: 選択されている数字で決定

<template>
    <vue-timepicker
        format="hh:mm:ss A"
        advanced-keyboard>
    </vue-timepicker>
</template>

vue2-timepickerでキーボード入力

手入力を可能にする

TABキーで時、分、秒、午前午後それぞれにフォーカスが当たるようになり、そこに数字を手入力できるようにできます。

<template>
    <vue-timepicker
        format="hh:mm:ss A"
        manual-input>
    </vue-timepicker>
</template>

vue2-timepickerで手入力

手入力を許す場合に選択リストを非表示にすることができます。

<template>
    <vue-timepicker
        format="hh:mm:ss A"
        manual-input
        hide-dropdown>
    </vue-timepicker>
</template>

手入力時に「12」など入力したいときに「1」のあとに「2」を入力した際に最終的に「12」となるのか、「2」になるのかを分ける時間をミリ秒単位で設定できます。

※環境によっては効かない可能性あり?デモページでは確認できましたが、私の環境では確認できませんでした。

<template>
    <vue-timepicker
        format="hh:mm:ss A"
        manual-input
        :manual-input-timeout="2000">
    </vue-timepicker>
</template>

選択済みの時分秒が表示されるように自動スクロールする

フォームを選択した際に、現在選択中の数字が表示されるように自動でスクロールしてくれます。

manual-inputモードでは無効です。

<template>
    <vue-timepicker
        format="hh:mm:ss A"
        auto-scroll>
    </vue-timepicker>
</template>

vue2-timepickerの自動スクロール

入力完了時に時分秒選択リストを閉じる

すべての欄の選択を終えたら自動的に選択リストを隠すか設定できます。

<template>
    <vue-timepicker
        format="hh:mm:ss A"
        close-on-complete>
    </vue-timepicker>
</template>

クリアボタンを表示しない

初期設定では入力内容を一括削除するバツボタンがありますが、それを表示しないように設定できます。

<template>
    <vue-timepicker
        format="hh:mm:ss A"
        hide-clear-button>
    </vue-timepicker>
</template>

フォームを無効にする

フォームのinput要素にdisabledを付与して、フォームを無効化することができます。

<template>
    <vue-timepicker
        format="hh:mm:ss A"
        disabled>
    </vue-timepicker>
</template>

プログラムによる変更でinput、changeイベントを発火させない

プログラムによって内部の数字が書き換えられた際に@input、@changeイベントを発火しないように設定できます。つまり、ユーザの入力によって変更された場合のみ@input、@changeイベントが発火します。

<template>
    <vue-timepicker
        format="hh:mm:ss A"
        lazy>
    </vue-timepicker>
</template>

フォーカスが外れた後、選択リストを非表示にするまでの時間を設定

TABキーを押すなどして、フォームからフォーカスが外れた際に選択リストを非表示にするまでの時間をミリ秒単位で設定できます。

<template>
    <vue-timepicker
        format="hh:mm:ss A"
        :blur-delay="1000">
    </vue-timepicker>
</template>

おまけ：選択リストを選択したときの色を変更

選択リストが選択されたとき、デフォルトでは緑色ですが、以下のCSSを追加することで色を変えられます。

<template>
    <div class="my-time-picker">
        <vue-timepicker></vue-timepicker>
    </div>
</template>

<style scoped>
    .my-time-picker >>> .vue__time-picker .dropdown ul li:not([disabled]).active,
    .my-time-picker >>> .vue__time-picker .dropdown ul li:not([disabled]).active:focus,
    .my-time-picker >>> .vue__time-picker .dropdown ul li:not([disabled]).active:hover {
        background: #999;
    }
</style>

vue2-timepickerで選択済みの色を変更

最後に

vue2-timepickerを使えばいい感じに時間入力のフォームを作る事ができます。

セレクトボックスで時間入力を実装すると時、分、秒それぞれで選択してリストを展開しなくてはいけませんが、vue2-timepickerを使えば、一回のクリックですべてのリストを展開できます。

そもそも時間入力する機会は少ないかもしれませんが、必要になったときに選択肢の一つとして検討してみてください。

Vue.js入門基礎から実践アプリケーション開発まで/川口和也/喜多啓介/野田陽平

created by Rinker

Vue.jsで時間を入力するならvue2-timepickerでいい感じにできる

インストール