quanyawei
2024-11-15 a19b20afeacf84c1c743c76b5018bcfbddac2270
src/components/Form/HourPicker1.vue
@@ -5,17 +5,16 @@
    placeholder="选择日期"
    value-format="yyyy-MM-dd"
  /> -->
  <el-time-picker
    is-range
  <el-date-picker
    v-model="value1"
    type="datetimerange"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    placeholder="选择时间范围"
     size="inputSize"
    value-format="yyyy-MM-dd HH"
    start-placeholder="开始日期"
    value-format="yyyy-MM-dd HH:mm:ss"
    end-placeholder="结束日期"
    :picker-options="pickerOptions"
  >
  </el-time-picker>
  </el-date-picker>
</template>
<script>
@@ -23,16 +22,37 @@
// 例如:import《组件名称》from'《组件路径》';
export default {
// import 引入的组件需要注入到对象中才能使用
  // import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    value1: String
    // value1: String
  },
  data() {
    // 这里存放数据
    return {
      // newValue1: ''
      newValue1: ''
      value1: '',
      timeOne: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          // 最大时间  最小时间
          this.timeOne = minDate.getTime() // 当选一个日期时 就是最小日期
          // // 如何你选择了两个日期了,就把那个变量置空
           if (maxDate) this.timeOne = ''
        },
        disabledDate: time => {
          if (this.timeOne) {
            const WEEK = 7 * 24 * 3600 * 1000 - 1 // 这里乘以6相当于 限制7天以内
            const minTime = this.timeOne // 七天之前
            const maxTime = this.timeOne + WEEK // 七天之后
            return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > new Date()
          } else {
            return time.getTime() > new Date()
          }
        }
      },
    }
  },
  // 计算属性 类似于data概念
@@ -40,18 +60,15 @@
  // 监控data中的数据变化
  watch: {
    value1(nv, ov) {
      this.newValue1 = nv
      // this.newValue1 = nv
      this.sendPicker()
    }
    },
  },
  // 生命周期 - 创建完成(可以访问当前 this 实例)
  created() {
  },
  created() {},
  // 生命周期 - 挂载完成(可以访问 DOM 元素)
  mounted() {
  mounted() {},
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
@@ -62,11 +79,10 @@
  // 方法集合
  methods: {
    sendPicker() {
      this.$emit('sendPickerChild', this.newValue1)
    }
  } // 如果页面有keep-alive缓存功能,这个函数会触发
      this.$emit('sendPickerChild', this.value1)
    },
  }, // 如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
</style>