<template>
    <div>
        <h1>时间控件</h1>

        <h2>基本表单</h2>
        <div>
            <div class="form-group">
                <label for="datetime">时间</label>
                <Time v-model="dateValue1"
                      class="form-control"></Time>
            </div>
        </div>

        {{ dateValue1 }}

        <h2>内联表单</h2>
        <div class="form-inline">
            <div class="form-group">
                <label class="control-label"
                       for="inputGroupSuccess3">时间</label>
                <Time v-model="dateValue2"
                      class="form-control"
                      style="width: 200px;"></Time>
            </div>
        </div>

        {{ dateValue2 }}

        <h2>只读</h2>

        <div class="form-inline">
            <div class="form-group">
                <label class="control-label"
                       for="inputGroupSuccess3">时间</label>
                <Time v-model="dateValue3"
                      :readonly="true"
                      class="form-control"
                      style="width: 200px;"></Time>
            </div>
        </div>

        {{ dateValue3 }}

    </div>
</template>

<script>


import Time from "@/time/index.js";

export default {
    name: 'date-example',

    data: function () {
        return {
            dateValue1: '12:00:01',
            dateValue2: '14:02:00',
            dateValue3: '14:02:00',
        }
    },

    components: {
        Time,
    },

    methods: {

    }
}
</script>

<style>
</style>
