pc-component-v5/examples/components/DateTimeExample.vue

<template>
    <div>

        <h1>时间日期控件V2</h1>

        <h2>基本表单</h2>
        <div>
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email"
                       class="form-control"
                       id="exampleInputEmail1"
                       placeholder="Email">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password"
                       class="form-control"
                       id="exampleInputPassword1"
                       placeholder="Password">
            </div>
            <div class="form-group">
                <label for="datetime">日期</label>
                <DateTimeV2 :dateValue="dateValueV2"
                            v-on:on-value-change="dateValueV2 = $event"></DateTimeV2>
            </div>
        </div>

        {{ dateValueV2 }}

        <h2>内联表单</h2>
        <div class="form-inline">
            <div class="form-group">
                <label for="exampleInputName2">Name</label>
                <input type="text"
                       class="form-control"
                       id="exampleInputName2"
                       placeholder="Jane Doe">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail2">Email</label>
                <input type="email"
                       class="form-control"
                       id="exampleInputEmail2"
                       placeholder="jane.doe@example.com">
            </div>
            <div class="form-group">
                <label class="sr-only"
                       for="exampleInputAmount">Amount (in dollars)</label>
                <div class="input-group">
                    <div class="input-group-addon">$</div>
                    <input type="text"
                           class="form-control"
                           id="exampleInputAmount"
                           placeholder="Amount">
                    <div class="input-group-addon">.00</div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label"
                       for="inputGroupSuccess3">日期</label>
                <DateTimeV2 :dateValue="dateValueV2"
                            v-on:on-value-change="dateValueV2 = $event"></DateTimeV2>
            </div>
        </div>

        {{ dateValueV2 }}

        <h2>只读</h2>
        <DateTimeV2 :dateValue="dateValueV2"
                    :readonly="true"></DateTimeV2>
        {{ dateValueV2 }}

        <h2>复制/粘贴</h2>
        <DateTimeV2 :dateValue="dateValueV2_1"
                    v-on:on-value-change="dateValueV2_1 = $event"></DateTimeV2>
        {{ dateValueV2_1 }}

    </div>
</template>

<script>


import DateTimeV2 from "../../packages/datetime-v2/index.js";

export default {
    name: 'app',

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

    components: {
        DateTimeV2,
    },

    methods: {

    }
}
</script>

<style>
</style>