日期组件有有开始日期和结束日期怎么处理选中的时间在一个月30天？

Z时代
2024-02-11
分类：IT

<a-col class="gutter-row" :span="6">
        <a-form-item label="日期" :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }">
            <a-range-picker  :value="approvalDate"  :disabled-date="disabledDate"  @change="DateFn"/>
             </a-form-item>
      </a-col>
  data() {
    return {
form{
rovalDateStart ：null，
rovalDateEnd ：null
}
}
DateFn(dates, dateStrings) {
      this.rovalDate = dates;
      this.form.rovalDateStart = dateStrings[0];
      this.form.rovalDateEnd = dateStrings[1];    },

回答：

<template>
  <a-col class="gutter-row" :span="6">
    <a-form-item label="日期" :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }">
      <a-range-picker :value="approvalDate" :disabled-date="disabledDate" @change="DateFn"/>
    </a-form-item>
  </a-col>
</template>
<script>
export default {
  data() {
    return {
      approvalDate: [null, null],
      form: {
        rovalDateStart: null,
        rovalDateEnd: null
      }
    };
  },
  methods: {
    DateFn(dates, dateStrings) {
      this.approvalDate = dates;
      this.form.rovalDateStart = dateStrings[0];
      this.form.rovalDateEnd = dateStrings[1];
    },
    disabledDate(current) {
      // 如果没有选择开始日期或者结束日期，不禁用任何日期
      if (!this.form.rovalDateStart || !this.form.rovalDateEnd) {
        return false;
      }
      const start = new Date(this.form.rovalDateStart);
      const end = new Date(this.form.rovalDateEnd);
      const currentDay = new Date(current);
      // 确定当前日期是不是在开始日期后30天内或者结束日期前30天内
      const afterStart = currentDay >= start && currentDay <= new Date(start.getTime() + (30 * 24 * 60 * 60 * 1000));
      const beforeEnd = currentDay <= end && currentDay >= new Date(end.getTime() - (30 * 24 * 60 * 60 * 1000));
      // 如果当前日期不在这个范围内，就禁用这个日期
      return !(afterStart || beforeEnd);
    }
  }
};
</script>