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

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

    <input
      autocomplete="off"
      type="text"
      :readonly="readonly"
      :value="dateTime"
      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>

import moment from 'moment';

export default {

  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Date',

  components: {

  },

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

  emits: ['update:modelValue'],

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


  computed: {

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

  },

  mounted: function () {

  },

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

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

      // 日期时间校验
      if (this.isValidDateTime(newValue)) {
        if (this.readonly == true && (newValue == null || newValue.length == 0)) {
          this.isValid = false;
        } else {
          this.isValid = true;
        }
        console.log('Date input value changed: orginal value: %s, current value: %s', this.modelValue, newValue);
        this.$emit('update:modelValue', newValue);
      } else {
        this.isValid = false;
      }
    },


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

      // 日期时间校验
      if (this.isValidDateTime(parsedDateTime)) {
        if (this.readonly == true && (parsedDateTime == null || parsedDateTime.length == 0)) {
          this.isValid = false;
        } else {
          this.isValid = true;
        }
        console.log('Date value changed: orginal value: %s, current value: %s', newValue, parsedDateTime);
        this.$emit('update:modelValue', 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: inline-flex;
}

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

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

.datetime-item-3 {
    right: 39px;
}

/*控制下拉小箭头的*/
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    padding-right: 0px;
}
</style>