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

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

    <h2>基本表单</h2>

    <div>
      <div class="form-group">
        <label for="datetime">日期</label>
        <Date
          v-model="dateValue0"
          @update:model-value="getNewDate"
        />
      </div>
    </div>

    {{ dateValue0 }} 更改次数 {{ changedCount0 }}

    <div>
      <div class="form-group">
        <label for="datetime">日期(日期时间强制转换)</label>
        <Date
          v-model="dateValue1"
          @update:model-value="changedCount1++"
        />
      </div>
    </div>

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

    <h2>内联表单</h2>
    <div class="form-inline">
      <div class="form-group">
        <label
          class="control-label"
          for="inputGroupSuccess3"
        >日期</label>
        <Date
          v-model="dateValueV2"
        />
      </div>
    </div>

    {{ dateValueV2 }}

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

    {{ dateValueV3 }}
  </div>
</template>

<script>


import Date from '@/date/index.js';

export default {
  name: 'DateExample',

  components: {
    Date,
  },

  data: function () {
    return {
      dateValue0: '2021-10-08',
      changedCount0: 0,

      dateValue1: '2021-10-09 17:54:00',
      changedCount1: 0,

      dateValueV2: '2021-10-09',
      changedCount2: 0,

      dateValueV3: '2022-10-09',
      changedCount3: 0,
    };
  },

  methods: {
    getNewDate(date) {
      console.log(date);
      this.changedCount0++;
    },
  },
};
</script>

<style>
</style>