iot-front-ui/src/components/common/timeRange.vue

<template>
  <a-range-picker v-if="show" :default-value="[defaultStartTime,defaultEndTime]"
                  :format="timeFormat"
                  @change="change"
  />
</template>

<script>
export default {
  data() {
    return {
      show: false,
      defaultStartTime: null,
      defaultEndTime: null,
    }
  },
  props: {
    timeFormat: {
      type: String,
      default: "YYYY/MM/DD"
    },
    timeRange: Object,
  },
  created() {

  },
  mounted() {
    this.$nextTick(()=>{
      if (this.timeRange) {
        if (this.timeRange.startTime) {
          this.defaultStartTime = this.$moment(this.timeRange.startTime, this.timeFormat)
        }
        if (this.timeRange.endTime) {
          this.defaultEndTime = this.$moment(this.timeRange.endTime, this.timeFormat)
        }
      }
      this.show = true
    })
  },
  emits: ['update:timeRange'],
  setup(props, context) {
    const methods = {
      updateTimeRange(obj) {
        context.emit('update:timeRange', obj)
      },
    }
    return methods
  },
  methods: {
    change(date, dateStr) {
      let obj = {
        startTime: dateStr[0],
        endTime: dateStr[1]
      }
      this.updateTimeRange(obj);
    },
    range(start, end) {
      const result = [];
      for (let i = start; i < end; i++) {
        result.push(i);
      }
      return result;
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current && current < this.$moment().endOf("day");
    },

    disabledDateTime() {
      return {
        disabledHours: () => this.range(0, 24).splice(4, 20),
        disabledMinutes: () => this.range(30, 60),
        disabledSeconds: () => [55, 56],
      };
    },
    disabledRangeTime(_, type) {
      if (type === "start") {
        return {
          disabledHours: () => this.range(0, 60).splice(24, 4),
          disabledMinutes: () => this.range(30, 60),
          disabledSeconds: () => [55, 56],
        };
      }
      return {
        disabledHours: () => this.range(0, 60).splice(24, 4),
        disabledMinutes: () => this.range(0, 31),
        disabledSeconds: () => [55, 56],
      };
    },
  },
};
</script>

<style></style>