pc-component-v5/examples/datetime/src/DateTimeExample.vue

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

        <h2>基本表单</h2>
        <div>
            <div class="form-group">
                <label for="datetime">日期时间</label>
                <DateTime :dateValue="dateValue1"
                            v-on:on-value-change="dateValue1 = $event"></DateTime>
            </div>
        </div>

        {{ dateValue1 }}

        <h2>内联表单</h2>
        <div class="form-inline">
            <div class="form-group">
                <label class="control-label"
                       for="inputGroupSuccess3">日期时间</label>
                <DateTime :dateValue="dateValue2"
                            v-on:on-value-change="dateValue2 = $event"></DateTime>
            </div>
        </div>

        {{ dateValue2 }}

        <h2>只读</h2>
        
        <div class="form-inline">
            <div class="form-group">
                <label class="control-label"
                       for="inputGroupSuccess3">日期时间</label>
                <DateTime :dateValue="dateValue3"
                        :readonly="true"></DateTime>
            </div>
        </div>

        {{ dateValue3 }}


    </div>
</template>

<script>


import DateTime from "@/datetime/index.js";

export default {
    name: 'date-example',

    data: function () {
        return {
            dateValue1: '2021-10-09 12:00:01',
            dateValue2: '2021-10-09 14:02:00',
            dateValue3: '2022-10-09 14:02:00',
        }
    },

    components: {
        DateTime,
    },

    methods: {

    }
}
</script>

<style>
</style>