pc-component-v5/packages/date/src/Date.vue

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

<script>
var VueDatepicker = require('../../vue-datepicker/src/vue-datepicker.vue').default
var VueDatepickerOption0 = require('./vue-datepicker-setting.js')

export default {
  name: 'Date',

  components: {
    'date-picker': VueDatepicker,
  },
  props: [
    'dateValue', 'readonly',
  ],

  data: function () {
    var vueDatepickerOption = VueDatepickerOption0()
    vueDatepickerOption.option.type = 'day'
    vueDatepickerOption.option.format = 'YYYY-MM-DD'

    vueDatepickerOption.timeoption.type = 'min'
    vueDatepickerOption.timeoption.format = 'YYYY-MM-DD'

    vueDatepickerOption.multiOption.type = 'multi-day'
    vueDatepickerOption.multiOption.format = 'YYYY-MM-DD'
    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)
      this.$emit('input', val)
      console.log('name has been changed:', val)
    },

    dateValue: function (val) {
      this.starttime.time = val
    },
  },
}
</script>