vant 日期选择器（年选、月选、周选、日选）

vant 日期选择器（年选、月选、周选、日选）

        <van-field
            v-model="formatDate"
            is-link
            readonly
            arrow-direction="down"
            label="统计时间"
            placeholder="请选择统计时间"
            @click="dateSelect"
          />
          <van-action-sheet v-model="dateShow">
            <!-- 日/月选择器 -->
            <van-datetime-picker
              v-model="currentDate"
              :type="type"
              :title="dateTitle"
              :min-date="minDate"
              :max-date="maxDate"
              @confirm="confirm"
              @cancel="cancel"
            />
          </van-action-sheet>
          <!-- 周选择器 -->
          <van-action-sheet v-model="weekShow">
            <van-picker
              title="选择周数"
              show-toolbar
              :columns="columns"
              @cancel="cancel"
              @confirm="onConfirm"
            />
          </van-action-sheet>
          <!-- 年选择器 -->
          <van-action-sheet v-model="yearShow">
            <van-picker
              title="选择年"
              show-toolbar
              :columns="yearColumns"
              :default-index="yearSelect"
              @confirm="yearConfirm"
              @cancel="cancel"
            />
          </van-action-sheet>

import { postData } from "../api";
import { Toast } from "vant";
import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");
// 获取一年的周次列表
const weelys = (y) => {
  const oneDay = moment(y + "-01-01");
  let oneWeely = null;
  if (oneDay.format("wo") == "1") {
    oneWeely = oneDay.startOf("week").format("YYYY-MM-DD");
  } else {
    // console.log("weeks");
    oneDay.add(1, "weeks");
    oneWeely = oneDay.startOf("week").format("YYYY-MM-DD");
  }
  const arr = [];
  let weelyStr = "1周";
  do {
    const d = {};
    let time = moment(oneWeely);
    d.value = time.format("YYYY-MM-DD");
    d.text = time.format("第wo");
    // +
    // "(" +
    // time.startOf("week").format("MM/DD") +
    // "-" +
    // time.endOf("week").format("MM/DD") +
    // ")";
    arr.push(d);
    oneDay.add(1, "weeks");
    oneWeely = oneDay.startOf("week").format("YYYY-MM-DD");
    weelyStr = oneDay.format("wo");
  } while (weelyStr != "1周" && oneWeely.indexOf(y) > -1);
  return arr;
};

export default {
  data() {
    return {
      type: "date",
      minDate: new Date(2000, 1, 1),
      maxDate: new Date(2060, 12, 31),
      currentDate: new Date(),

      loadShow: true,
      nullDataShow: false,
      message: "数据加载中...",

      objShow: false,
      rangShow: false,
      dateShow: false,
      formatDate: null,
      weekShow: false,
      yearShow: false,
      yearSelect: null,
      dateTitle: "",
      columns: [
        {
          values: [],
          className: "column1",
        },
        {
          values: [],
          className: "column2",
        },
      ],
      yearColumns: [2000, 2001, 2002],
      form: {
        objectType: null,
        collectcycle: null,
        reportDate: null,
      },

      objName: null,
      rangName: null,

      active: 0,
      tableData: [],
      reportList: [],
      reportList1: [],
      reportList2: [],
      URL: null,
    };
  },
  created() {
    this.setData();
    this.yearData();
  },

  methods: {
    // 监听统计范围
    dateSelect() {
      if (this.rangName == "日报" || this.rangName == "月报") {
        this.dateShow = true;
      } else if (this.rangName == "周报") {
        this.weekShow = true;
      } else if (this.rangName == "年报") {
        this.yearShow = true;
      } else {
        Toast.fail("请先选择统计范围");
      }
    },
    //周选择
    onConfirm(value) {
      const weeks = value[1].text.slice(1, -1);
      // console.log(weeks);
      if (weeks.length < 2) {
        this.form.reportDate = value[0] + "0" + weeks;
      } else {
        this.form.reportDate = value[0] + weeks;
      }
      this.formatDate = value[0] + "年" + value[1].text;

      this.weekShow = false;
    },
    //年选择器
    yearConfirm(value) {
      this.formatDate = value + "年";
      this.form.reportDate = value.toString();
      this.yearShow = false;
    },
    //日、月选择器
    confirm(value) {
      if (this.type == "date") {
        this.formatDate = value.format("yyyy年MM月dd日");
        this.form.reportDate = value.format("yyyyMMdd");
      } else if (this.type == "year-month") {
        this.formatDate = value.format("yyyy年MM月");
        this.form.reportDate = value.format("yyyyMM");
      }
      this.dateShow = false;
    },
    cancel() {
      this.dateShow = false;
      this.weekShow = false;
      this.yearShow = false;
    },


   


    //周选择器
    setData() {
      const defaultData = moment(this.defaults);
      let year = moment().format("YYYY");
      this.columns[0].values = [];
      for (let i = year - 10; i < year - 0 + 10; i++) {
        this.columns[0].values.unshift(i);
      }
      for (let i = 0; i < this.columns[0].values.length; i++) {
        if (this.columns[0].values[i] == year) {
          this.columns[0].defaultIndex = i;
          this.columns[0].valueKey = i;
          break;
        }
      }
      // console.log(this.columns);
      this.columns[1].values = weelys(year);
      for (let i = 0; i < this.columns[1].values.length; i++) {
        if (
          moment(this.columns[1].values[i].value).format("wo") ==
          defaultData.format("wo")
        ) {
          this.columns[1].defaultIndex = i;
          this.columns[1].valueKey = i;
          break;
        }
      }
    },
    //年数据 
    yearData() {
      for (let i = 2000; i < 2060; i++) {
        this.yearColumns.push(i);
      }
      //显示当前年份
      const year = new Date().format("yyyy");
      this.yearSelect = this.yearColumns.indexOf(Number(year));
    },
  },
};```
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210718124141238.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoYW5nZV94aWFv,size_16,color_FFFFFF,t_70#pic_center)