pc-component-v5/packages/datetime/src/DateTime.vue

<template>
  <date-picker
    :readonly="readonly"
    :date="starttime"
    :option="option"
    style="padding: 0px; border: none;"
  />
</template>

<script>
import VueDatepicker from '../../vue-datepicker/src/vue-datepicker.vue';
import VueDatepickerOption1 from './vue-datepicker-setting.js';

export default {
  name: 'DateTime',

  components: {
    'date-picker': VueDatepicker,
  },
  props: {
    'dateValue':{
      type: String,
      default: null,
    },
    'readonly':{
      type: Boolean,
      default: null,
    },
  },

  emits: ['on-value-change'],

  data: function () {
    var vueDatepickerOption = VueDatepickerOption1();
    vueDatepickerOption.option.type = 'min';
    vueDatepickerOption.option.format = 'YYYY-MM-DD HH:mm:ss';

    vueDatepickerOption.timeoption.type = 'min';
    vueDatepickerOption.timeoption.format = 'YYYY-MM-DD HH:mm:ss';

    vueDatepickerOption.multiOption.type = 'multi-day';
    vueDatepickerOption.multiOption.format = 'YYYY-MM-DD HH:mm:ss';
    return {
      starttime: {
        time: this.dateValue,
      },
      endtime: {
        time: '',
      },
      testTime: '',
      multiTime: '',
      option: vueDatepickerOption.option,
      timeoption: vueDatepickerOption.timeoption,
      multiOption: vueDatepickerOption.multiOption,
      limit: vueDatepickerOption.limit,
    };
  },

  watch: {
    // 'value': function(val){
    // 	// 监听外部对props属性value的变更，并同步到组件内
    // 	starttime.time = val;
    // },

    'starttime.time': function (val) {
      // 组件内对starttime.time变更后向外部发送事件通知
      this.$emit('on-value-change', val);
      console.log('name has been changed:', val);
    },
    dateValue: function (val) {
      this.starttime.time = val;
    },
  },
};
</script>