改造vant日期选择

支持全年全月选择

<template>
  <div class="time">
    <div @click="selectDate" class="dateText">
      <i class="iconfont">&#xe684;</i>
      <span> {{ thisDate }}</span>
    </div>

    <van-popup
      v-model="modelVisible"
      position="bottom"
      :style="{ height: '50%' }"
      @click-overlay="selectDate"
    >
      <van-picker
        @picker-toolbar-height="20"
        :show-toolbar="true"
        ref="van_picker"
        :columns="columns"
        @confirm="onConfirm"
        @cancel="selectDate"
        @change="changeDate"
      >
        <template #columns-top>
          <div class="time-line">
            <div class="y"></div>
            <div class="m" @click="allYear">
              <span class="sl">全年</span>
            </div>
            <div class="d" @click="allMonth">
              <span class="sl">全月</span>
            </div>
          </div>
        </template>
      </van-picker>
    </van-popup>
  </div>
</template>
<script>
import moment from "moment";

export default {
  props: {
    wholeYear: {
      default: true,
      type: Boolean
    }
  },
  data() {
    return {
      thisDate: moment(new Date()).format("YYYY-MM-DD"),
      modelVisible: false,
      columns: null,
      year: null,
      month: null,
      day: null,
      currentTime: null
    };
  },
  computed: {
    yearPickerData() {
      let minYear = moment(new Date()).format("YYYY") - 5;
      let yearArr = [];
      for (let i = 0; i < 10; i++) {
        yearArr.push((minYear + i).toString());
      }
      return yearArr;
    },
    monthPickerData() {
      let month = Array.from({ length: 12 }, (v, k) => (+k + 1).toString());
      for (let i = 0; i < month.length; i++) {
        if (+month[i] < 10) {
          month[i] = "0" + month[i];
        }
      }
      if (this.wholeYear) {
        month.unshift("全年");
        return month;
      } else {
        return month;
      }
    },
    dayPickerData() {
      let day = Array.from(
        { length: this.getDuration(this.year, this.month) },
        (v, k) => (+k + 1).toString()
      );
      for (let i = 0; i < day.length; i++) {
        if (+day[i] < 10) {
          day[i] = "0" + day[i];
        }
      }
      if (this.wholeYear) {
        day.unshift("全月");
        return day;
      } else {
        return day;
      }
    }
  },
  watch: {
    month(nv, ov) {
      // console.log(nv)
      this.init();
    }
  },
  methods: {
    init() {
      let that = this;
      let year = that.yearPickerData;
      let month = that.monthPickerData;
      let day = that.dayPickerData;
      let yearIndex, monthIndex, dayIndex;
      let index = sessionStorage.getItem("selectArray") || "";
      index = index.split(",");
      if (index.length !== 0) {
        yearIndex = index[0];
        monthIndex = index[1];
        dayIndex = index[2];
        that.columns = [
          {
            values: year,
            className: "column1",
            defaultIndex: +yearIndex
          },
          {
            values: month,
            className: "column2",
            defaultIndex: +monthIndex
          },
          {
            values: day,
            className: "column3",
            defaultIndex: +dayIndex
          }
        ];
        that.$nextTick(() => {
          that.$refs.van_picker.setColumnIndex([2], +dayIndex);
        });
      } else {
        yearIndex = that.yearPickerData.indexOf(
          moment(new Date()).format("YYYY")
        );
        monthIndex = that.monthPickerData.indexOf(
          moment(new Date()).format("MM")
        );
        dayIndex = that.dayPickerData.indexOf(moment(new Date()).format("DD"));
        that.columns = [
          {
            values: year,
            className: "column1",
            defaultIndex: yearIndex
          },
          {
            values: month,
            className: "column2",
            defaultIndex: monthIndex
          },
          {
            values: day,
            className: "column3",
            defaultIndex: dayIndex
          }
        ];
        that.$nextTick(() => {
          // 获取当前的索引
          // console.log(that.$refs.van_picker.getColumnIndex([2]))
          that.$refs.van_picker.setColumnIndex([2], dayIndex);
          // this.$refs.van_picker.$children.children.defaultIndex = 20
        });
      }
    },
    // 弹出日期选择
    selectDate() {
      this.modelVisible = !this.modelVisible;
    },
    // 选项改变时候的值
    changeDate(picker, value, index) {
      // console.log(`当前值：${value}, 当前索引：${index}`)
      let result = value.toString().split(",");
      // console.log('当前被改变的日期数组', result)
      this.year = result[0];
      this.month = result[1];
      this.day = result[2];

      // 取序号
      let yearIndex = this.columns[0].values.findIndex(item => {
        return item === result[0];
      });
      let monthIndex = this.columns[1].values.findIndex(item => {
        return item === result[1];
      });
      let dayIndex = this.columns[2].values.findIndex(item => {
        return item === result[2];
      });
      sessionStorage.setItem("selectArray", [yearIndex, monthIndex, dayIndex]);
      this.currentTime = value.join("");
    },
    // 选取的日期
    onConfirm(values, index) {
      // console.log('当前选择的日期数组', values)
      sessionStorage.setItem("selectArray", index);
      this.selectDate();
      this.thisDate = values.join("-");
      if (this.thisDate.indexOf("-全年-全月")) {
        this.thisDate = this.thisDate.split("-全年-全月")[0];
      }
      if (this.thisDate.indexOf("-全月")) {
        this.thisDate = this.thisDate.split("-全月")[0];
      }
      this.columns[0].defaultIndex = index[0];
      this.columns[1].defaultIndex = index[1];
      this.columns[2].defaultIndex = index[2];
      // 给父组件传递选中的值
      if (values[1] !== "全年") {
        this.$emit("datePickerData", values.join(""));
      } else {
        this.$emit("datePickerData", values[0]);
      }
    },
    allYear() {
      this.$nextTick(() => {
        this.$refs.van_picker.setColumnIndex([1], 0);
        this.$refs.van_picker.setColumnIndex([2], 0);
      });
    },
    allMonth() {
      this.$refs.van_picker.setColumnIndex([2], 0);
    },
    getDuration(year, month) {
      let d = new Date(year, month, 0);
      return d.getDate();
    }
  },
  mounted() {
    if (!moment) {
      console.log("找不到moment对象，请检查是否引用或者安装依赖包");
      return;
    }
    let year = this.yearPickerData;
    let yearIndex = this.yearPickerData.indexOf(this.thisDate.slice(0, 4));
    this.year = this.thisDate.slice(0, 4);
    let month = this.monthPickerData;
    let monthIndex = this.monthPickerData.indexOf(this.thisDate.slice(5, 7));
    let day = this.dayPickerData;
    let dayIndex = this.dayPickerData.indexOf(this.thisDate.slice(8, 10));
    this.columns = [
      {
        values: year,
        className: "column1",
        defaultIndex: yearIndex
      },
      {
        values: month,
        className: "column2",
        defaultIndex: monthIndex
      },
      {
        values: day,
        className: "column3",
        defaultIndex: dayIndex
      }
    ];
  }
};
</script>
<style lang="stylus" scoped>
.time >>> .van-picker-column__item
  height 34px

.dateText
  color #0BB78E
  font-size 14px

  .iconfont
    margin-left .2rem
    margin-right .1rem

  .iconfont, span
    vertical-align middle

.time-line
  display flex
  text-align center
  font-size 16px
  padding-top .15rem
  padding-bottom .15rem

  .y
    flex 1

  .m
    flex 1

    .sl
      padding .15rem .35rem
      background #f5f5f5
      border-radius 5px

  .d
    flex 1

    .sl
      padding .15rem .35rem
      background #f5f5f5
      border-radius 5px
</style>

 

页面调用

 <date-picker @datePickerData="datePickerData"></date-picker>

    datePickerData(date) {
      if (date.indexOf('全月')) {
        date = date.split('全月')[0]
      }
      console.log(date)
    }