thoth-frontend-test/src/components/picker/SelDatePicker.vue

<template>
  <a-range-picker
    v-model="momentDate"
    :size="'large'"
    :locale="locale"
    :show-time="{
      hideDisabledOptions: true,
      defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
    }"
    format="YYYY-MM-DD"
    @ok="confirmDate"
    @change="changeRange"
  >
    <template slot="dateRender" slot-scope="current">
      <div :id="current.format('YYYY.MM.DD')" class="ant-calendar-date">
        <div
          class="more-select"
          :class="[
            nowDates.find(item=>item === current.format('YYYY.MM.DD'))?'is-rang-picker-active':'',
          ]"
          @click.stop="setSelect(current)"
        >
          <span><i v-if="nowDates.find(item=>item === current.format('YYYY.MM.DD'))" class="el-icon-check" /></span>
        </div>
        <template v-if="moment().format('YYYY.MM.DD') !== current.format('YYYY.MM.DD')">{{ current.date() }}</template>
        <template v-else><div class="rang-today">今天</div></template>
        <div v-if="holiday.find(item=>item === current.format('YYYY.MM.DD'))" class="is-rang-picker-holiday">休</div>
      </div>
    </template>
  </a-range-picker>
</template>
<script>
const _ = require('lodash')
import moment from 'moment'
import 'moment/locale/zh-hk'
moment.locale('zh-hk')
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
import { getHolidayDayInfo } from '@/api/projectViewDetails'
export default {
  props: {
    startEnd: {
      type: Array,
      default: () => [],
      required: false
    },
    detailDayList: {
      type: Array,
      default: () => [],
      required: false
    }
  },
  data() {
    return {
      moment,
      locale,
      nowDates: [],
      momentDate: [],
      holiday: []
    }
  },
  watch: {
    startEnd: {
      handler(newName, oldName) {
        newName.length > 0 ? this.momentDate = [moment(newName[0]), moment(newName[1])] : this.momentDate = []
      },
      immediate: true,
      deep: true
    },
    detailDayList: {
      handler(newV, oldV) {
        this.nowDates = newV
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    const startTime = moment().startOf('year').format('YYYY.MM.DD')
    const endTime = moment().endOf('year').format('YYYY.MM.DD')
    this.getHolidayDayInfo(startTime, endTime)
  },
  methods: {
    async getHolidayDayInfo(startTime, endTime) { // 获取节假日时间
      const res = await getHolidayDayInfo({ startTime: startTime, endTime: endTime })
      if (res.code === 200) {
        this.holiday = res.data
      }
    },
    changeRange(dates) { // 获取开始结束日期
      this.nowDates = []
      const [start, end] = dates
      this.nowDates = this.setHoliday('holiday', start, end)
    },
    setHoliday(type, start, end) {
      const NewArr = []
      let nextDate = _.cloneDeep(start)
      while (nextDate && nextDate.isBefore(end)) {
        if (type === 'holiday') {
          const isEx = this.holiday.find(item => item === nextDate.format('YYYY.MM.DD'))
          if (!isEx) {
            NewArr.push(nextDate.format('YYYY.MM.DD'))
          }
        } else {
          if (nextDate.weekday() < 6 && nextDate.weekday() > 0) { // 默认周六，末不在已选数组中
            NewArr.push(nextDate.format('YYYY.MM.DD'))
          }
        }
        nextDate = nextDate.add(1, 'day')
      }
      return NewArr
    },
    setSelect(current) { // 选择详细日期
      const isExist = this.nowDates.find(item => item === current.format('YYYY.MM.DD'))
      if (isExist) {
        this.nowDates = this.nowDates.filter(item => item !== isExist)
      } else {
        this.nowDates.push(current.format('YYYY.MM.DD'))
      }
    },
    confirmDate(e) {
      const min = moment.min(this.nowDates.map(item => {
        return moment(item)
      }))
      const max = moment.max(this.nowDates.map(item => {
        return moment(item)
      }))
      this.$emit('update:startEnd', [min.format('YYYY.MM.DD'), max.format('YYYY.MM.DD')])
      this.$emit('getDetailDay', this.nowDates)
    }
  }
}
</script>
<style lang="scss">
.ant-calendar-picker-input {
  input {
    cursor: pointer;
  }
}
.ant-calendar-time-picker-btn {
  display: none !important;
}
.ant-calendar-picker-container {
  z-index: 9999;
}
.ant-calendar-cell {
  height: 40px;
  .ant-calendar-date {
    position: relative;
  }
  .is-rang-picker-holiday {
    color: #409EFF;
    position: absolute;
    bottom: -15px;
    font-size: 10px;
    transform: translate(-50%,0);
    left: 5px;
    transform: scale(0.8);
  }
  .rang-today {
    word-break: keep-all;
    font-size: 10px;
    color: #409EFF;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
}
.ant-calendar-today .ant-calendar-date {
  border: none
}
.ant-calendar-range .ant-calendar-in-range-cell::before{
  top: 2px;
  bottom: 2px;
}
.ant-calendar-selected-start-date,.ant-calendar-selected-end-date{
  position: relative;
}
.ant-calendar-selected-start-date::before,.ant-calendar-selected-end-date::before{
  position: absolute;
    top: 2px;
    right: 0;
    bottom: 2px;
    left: 0;
    display: block;
    background: #e6f7ff;
    border: 0;
    border-radius: 0;
    content: '';
}
.more-select {
  display: none;
}
// .ant-calendar-range .ant-calendar-selected-start-date .ant-calendar-date, .ant-calendar-range .ant-calendar-selected-end-date .ant-calendar-date{
//   position: relative;
//   background-color: #e6f7ff;
//   color: rgba(0, 0, 0, 0.65);
// }
.ant-calendar-in-range-cell,.ant-calendar-selected-start-date,.ant-calendar-selected-end-date{
  .ant-calendar-date {
    position: relative;
    background-color: #e6f7ff;
    color: rgba(0, 0, 0, 0.65);
    .more-select {
      display: block;
      position: absolute;
      top: -5px;
      right: -5px;
      height: 10px;
      width: 10px;
      border: 1px solid #BFBFBF;
      border-radius: 2px;
    }
  }
}
.is-rang-picker-active {
  span {
    display: block;
    height: 100%;
    width: 100%;
    background-color: #409EFF;
    font-size: 10px;
    position: relative;
    color: #FFFFFF;
  }
  i {
    position: absolute;
    left: -2px;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>