front-end/mallApp/src/components/app-date-picker.vue

<template>
  <view>
    <picker :mode="mode" :value="date" :start="startDate2" :end="endDate2" @change="bindDateChange">
      <slot>
        <view class="uni-input">
          <span v-if="placeholder && !date">{{placeholder}}</span>
          <span v-else>{{date}}</span>
          <span></span>
        </view>
      </slot>
    </picker>
  </view>
</template>

<script>
export default {
  name: "app-date-picker",
  props: {
    mode: {
      type: String,
      default: "date"
    },
    placeholder: {
      type: String,
      default: null
    },
    dateVal: {
      type: String,
      default: ""
    },
    startDate: {
      type: String,
      default: ""
    },
    endDate: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      date: null
    };
  },
  watch: {
    dateVal(val) {
      this.date = val;
    }
  },
  computed: {
    startDate2() {
      console.log(this.getDate("start"));
      return this.getDate("start");
    },
    endDate2() {
      return this.getDate("end");
    }
  },
  methods: {
    bindDateChange: function(e) {
      let val = e.target.value;
      this.date = val;
      console.log(val);
      this.$emit("update:dateVal", val);
      this.$emit("change", val);
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === "start") {
        year = this.startDate;
      } else if (type === "end") {
        year = this.endDate;
      }

      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      return `${year}-${month}-${day}`;
    }
  }
};
</script>

<style scoped>
</style>