laws_chery_client/src/components/JDatePicker.vue

<template>
  <span tabindex="0" class="ant-calendar-picker j-calendar-picker" @click="onChangeOpen(true)">
    <span class="ant-calendar-picker-input ant-input">
      <input readonly="true" v-model="startDate" :placeholder="placeholder[0] || $t('startDate')" tabindex="-1" class="ant-calendar-range-picker-input">
      <span class="ant-calendar-range-picker-separator"> ~ </span>
      <input readonly="true" v-model="endDate" :placeholder="placeholder[1] || $t('endDate')" tabindex="-1" class="ant-calendar-range-picker-input">
      <a-icon v-if="startDate || endDate" @click.stop="clearValue" type="close-circle" class='anticon anticon-close-circle ant-calendar-picker-clear' theme="filled" />
      <span class="ant-calendar-picker-icon"></span>
    </span>
    <a-range-picker class="j-calendar-picker-comp"
                    v-model="dateValue"
                    :open="open"
                    @openChange="onChangeOpen"
                    @change="onChange"
                    dropdownClassName="j-calendar-picker-comp-dropdown"
                    v-bind="$attrs">
      <template slot="dateRender" slot-scope="current">
        <div class="ant-calendar-date" @click="clickCalendarDate(current)">
          {{current.date()}}
        </div>
      </template>
      <template slot="renderExtraFooter">
        <div class="j-calendar-picker-comp-dropdown-btns">
          <a-button @click="handleCurrentChange('startDate')" type="primary" size="small">{{$t('curAfter')}}</a-button>
          <a-button @click="handleCurrentChange('endDate')" type="primary" size="small" style="margin-left: 8px;">{{$t('curBefore')}}</a-button>
        </div>
      </template>
    </a-range-picker>
  </span>
</template>

<script>
const minDate = '2000-01-01'
const maxDate = '3000-01-01'
export default {
  name: 'JDatePicker',
  props: {
    placeholder: {
      type: Array,
      required: false,
      default: () => []
    },
    value: {
      type: Array,
      required: false,
      default: () => []
    },
    // 是否返回区间，只选择一侧，另一侧会返回一个minDate或maxDate
    returnInterval: {
      type: Boolean,
      required: false,
      default: true
    }
  },
  data () {
    return {
      open: false,
      dateValue: [],
      startDate: '',
      endDate: '',
      lastSelectDate: ''
    }
  },
  watch: {
    value (val) {
      console.log('更新日期', val)
      if (Array.isArray(val)) {
        this.startDate = val[0] || ''
        this.endDate = val[1] || ''
        // 如果开始日期是搜索最小日期就不显示
        if (this.startDate === minDate) {
          this.startDate = ''
        }
        // 如果结束日期是搜索最小日期就不显示
        if (this.endDate === maxDate) {
          this.endDate = ''
        }
        this.dateValue = [this.startDate, this.endDate]
      } else {
        this.lastSelectDate = ''
        this.startDate = ''
        this.endDate = ''
        this.dateValue = []
      }
    }
  },
  methods: {
    // 清空选中值
    clearValue () {
      this.lastSelectDate = ''
      this.startDate = ''
      this.endDate = ''
      this.dateValue = []
      this.triggerChange()
    },
    // 控制弹出层打开
    onChangeOpen (open) {
      this.open = open
      this.dateValue = [this.startDate, this.endDate]
    },
    // 日期正常选择
    onChange (dateArr) {
      this.startDate = dateArr[0]
      this.endDate = dateArr[1]
      this.triggerChange()
    },
    // 点击底部按钮
    handleCurrentChange (field) {
      if (!this.lastSelectDate) {
        this.$message.warning(this.$t('pleaseSelectADate'))
        return
      }
      this.onChangeOpen(false)
      this.startDate = ''
      this.endDate = ''
      this[field] = this.lastSelectDate
      this.triggerChange()
    },
    // 触发change事件
    triggerChange () {
      const startDate = this.startDate || minDate
      const endDate = this.endDate || maxDate
      // 是否一侧为空时，返回最大日期或最小日期
      if (this.returnInterval) {
        this.$emit('change', [startDate, endDate])
      } else {
        this.$emit('change', [this.startDate, this.endDate])
      }
    },
    // 记录最后一次点击的日期
    clickCalendarDate (val) {
      this.lastSelectDate = val.format('YYYY-MM-DD')
      console.log(val, this.lastSelectDate)
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>

<style lang="less" scoped>
.j-calendar-picker {
  position: relative;

  .j-calendar-picker-comp {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;

  }
}
</style>
<style lang="less">
// 弹出层样式
.j-calendar-picker-comp-dropdown {
  .ant-calendar-range .ant-calendar-footer-extra {
    width: 100%;

    .j-calendar-picker-comp-dropdown-btns {
      padding: 7px 6px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
.ant-calendar-picker:hover .ant-calendar-picker-clear {
  opacity: 1;
  pointer-events: auto;
}
</style>