pc-component-v5/packages/datetime-v2/src/DateTimeV2.vue

<template>
  <div class="datetime-container input-group" :class="{'has-error' : isValid === false}">
    <input
      id="datetime"
      type="datetime-local"
      :readonly="readonly"
      :value="dateTime"
      class="datetime-item-1 form-control"
      @change="datetimeLocalValueChanged($event)"
    />

    <input
      type="text"
      :readonly="readonly"
      :value="dateValue"
      class="datetime-item-2 form-control"
      @change="textValueChanged($event)"
    />

    <span v-if="isValid === false" class="glyphicon glyphicon-remove datetime-item-3 form-control-feedback" aria-hidden="true" />
  </div>
</template>

<script>

export default {

  name: 'DateTimeV2',

  components: {

  },

  props: {
    'dateValue':{
      type: String,
      default: null,
    },
    'readonly':{
      type: Boolean,
      default: null,
    },
  },

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

  data: function () {
    return {
      'isValid': true,
    };
  },


  computed: {

    /**
         * 把(YYYY-MM-DD HH:mm:ss)格式的日期字符串转换成datetime-local(YYYY-MM-DDTHH:mm:ss)
         */
    dateTime: function () {
      if (this.dateValue == null || this.dateValue.length == 0) {
        return null;
      } else {
        return moment(this.dateValue, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DDTHH:mm:ss');
      }
    },

  },

  mounted: function () {
        
  },

  methods: {
    /**
         * 是否是有效的日期时间格式，YYYY-MM-DD HH:mm:ss
         */
    isValidDateTime: function (text) {
      if (text == null || text.length == 0) {
        return false;
      }
      return moment(text, 'YYYY-MM-DD HH:mm:ss', true).isValid();
    },

    textValueChanged: function (event) {
      let newValue = event.target.value;

      // 日期时间校验
      if (this.isValidDateTime(newValue)) {
        this.isValid = true;
        console.log('DateTimeV2 input value changed: orginal value: %s, current value: %s', this.dateValue, newValue);
        this.$emit('on-value-change', newValue);
      } else {
        this.isValid = false;
      }
    },


    /**
         * 值改变事件
         */
    datetimeLocalValueChanged: function (event) {
      let newValue = event.target.value;
      let parsedDateTime = '';
      if (newValue != null && newValue.length > 0) {
        parsedDateTime = moment(newValue).format('YYYY-MM-DD HH:mm:ss');
      }

      // 日期时间校验
      if (this.isValidDateTime(parsedDateTime)) {
        this.isValid = true;
        console.log('DateTimeV2 value changed: orginal value: %s, current value: %s', newValue, parsedDateTime);
        this.$emit('on-value-change', parsedDateTime);
      } else {
        this.isValid = false;
      }
    },
  },
};
</script>

<style>
.form-inline .datetime-container {
    display : inline-flex !important;
    vertical-align: middle;
}
</style>


<style scoped>
.datetime-container {
    position: relative;
    height: 34px;
    width: auto;
    vertical-align: middle;
    min-width: 200px;
    /* display : inline-flex; */
    display : block;
    
}

.datetime-item-1 {
    position: absolute;
    display: inline;
    width: 100%;
    cursor: pointer;
    border-radius: 4px !important;
}

.datetime-item-2 {
    position: absolute;
    border-radius: 4px 0px 0px 4px !important;
    display: inline;
    width: calc(100% - 45px) !important;
}

.datetime-item-3 {
    right: 45px;
}
</style>