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

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

    <h2>基本表单</h2>
    <div>
      <div class="form-group">
        <label for="datetime">日期时间</label>
        <DateTime
          v-model="dateValue1"
          @update:model-value="changedCount1++"
        />
      </div>
    </div>

    {{ dateValue1 }} 更改次数 {{ changedCount1 }}


    <div>
      <div class="form-group">
        <label for="datetime">日期时间</label>
        <DateTime
          :model-value="dateValue1"
          :readonly="true"
        />
      </div>
    </div>


    <h2>内联表单</h2>
    <div class="form-inline">
      <div class="form-group">
        <label
          class="control-label"
          for="inputGroupSuccess3"
        >日期时间</label>
        <DateTime
          v-model="dateValue2"
          @update:model-value="changedCount2 ++ "
        />
      </div>
    </div>

    {{ dateValue2 }} 更改次数 {{ changedCount2 }}

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

    {{ dateValue3 }}
  </div>
</template>

<script>


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

export default {
  name: 'DateExample',

  components: {
    DateTime,
  },

  data: function () {
    return {
      dateValue1: '2021-10-09 12:00:01',
      changedCount1: 0,

      dateValue2: '2021-10-09 14:02:00',
      changedCount2: 0,

      dateValue3: '2022-10-09 14:02:00',
      changedCount3: 0,
    };
  },

  methods: {

  },
};
</script>

<style>
</style>