vant-calendar

改造日曆元件，需求圖

@select選擇日期觸發，@confirm確認按鈕觸發

<template>
  <div>
    <!-- 時間篩選 -->
    <van-calendar
      ref="calendar"
      v-model="dateShow"
      type="range"
      @confirm="onConfirm"
      @select="onSelect"
      color="#FF7F00"
      :min-date="new Date(2015, 0, 0)"
      :max-date="new Date()"
    >
      <template #footer>
        <div class="condition-footer">
          <van-button color="#FF9100" plain @click="onCancel">取消</van-button>
          <van-button color="#FF9100" @click="onConfirm" :disabled="disabled"
            >確定</van-button
          >
        </div>
      </template>
    </van-calendar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      startDate: "",
      endDate: ""
    };
  },
  created() {
  },
  methods: {
    // 日期轉換0000-00-0格式
    formatDate(e) {
      var y = e.getFullYear();
      var m = e.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = e.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    },
    // 點選日期：時間區間
    onSelect() {
      let date = this.$refs.calendar.currentDate;
      this.disabled = date[1] != null ? false : true;
    },
    // 重置按鈕：時間區間
    onCancel() {
      this.$refs.calendar.reset(); //重置日曆已選擇的時間，預設到今天
      this.startDate = "";
      this.endDate = "";
      this.disabled = true;
    },
    // 確認按鈕：時間區間
    onConfirm() {
      let date = this.$refs.calendar.currentDate;
      this.startDate = this.formatDate(date[0]);
      this.endDate = this.formatDate(date[1])
    }
  }
};
</script>
<style lang="less" scoped>
.condition-footer {
  position: fixed;
  bottom: 0;
  padding: 0.2rem 0;
  display: flex;
  background: #ffffff;
  button {
    width: 16.7rem;
    height: 4rem;
    margin-right: 0.9rem;
  }
}
/deep/ .van-calendar__day--middle::after {
  background-color: #fff7e6;
}
</style>