pc-component-v5/examples/date/src/DateExample.vue

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

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

        {{ dateValueV2 }}

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

        {{ dateValueV2 }}

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

        {{ dateValueV3 }}


    </div>
</template>

<script>


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

export default {
    name: 'date-example',

    data: function () {
        return {
            dateValue: '2021-10-09',
            dateValueV2: '2021-10-09 14:02:00',
            dateValueV3: '2022-10-09 14:02:00',
        }
    },

    components: {
        DateTime,
    },

    methods: {

    }
}
</script>

<style>
</style>