基于vant-picker 二次封装 日周月年组件

<template>
<div>
  <van-picker
    show-toolbar
    :columns="columns"
    @cancel="cancel"
    @confirm="onConfirm"
    @change="onChange"
  />
</div>
</template>

<script>
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;
};
//获取一年的月份列表
const months = (y) => {
  let arr = [{text:'1月',value:''},{text:'2月',value:''},{text:'3月',value:''},{text:'4月',value:''},{text:'5月',value:''},{text:'6月',value:''},{text:'7月',value:''},{text:'8月',value:''},{text:'9月',value:''},{text:'10月',value:''},{text:'11月',value:''},{text:'12月',value:''}]
  arr.forEach((item,index) => {
    if(index+1 < 10) {
      item.value = y+'-0'+(index+1)
    }else {
      item.value = y+'-'+(index+1)
    }
  })
  return arr
}
//获取一年的月份列表
const days = (ym) => {
  let arr = []
  let num = getMonthDates(ym.value.split('-')[0],ym.value.split('-')[1])
  for(let i = 1 ;i <= num ;i++) {
    if(i < 10) {
      arr.push({
        text: i+'日',
        value:ym.value.split('-')[0]+'-'+ym.value.split('-')[1]+'-0'+i
      })
    }else {
      arr.push({
        text: i+'日',
        value:ym.value.split('-')[0]+'-'+ym.value.split('-')[1]+'-'+i
      })
    }
  }
  return arr
}
function getMonthDates(year, month){
    var d = new Date(year, month, 0);
    return d.getDate();
}

export default {
  name:'SelectDate',
  props: {
    defaults: {
      type: [Object, String, Date],
      default: () => {
        return moment();
      }
    },
    type:{
      type:[String,Number],
      default:1,
    }
  },
  data() {
    return {
      columns: [
        {
          values: [],
          className: "column1"
        },
      ]
    };
  },
  created() {
    this.setData();
  },
  methods: {
    setData() {
      const defaultData = moment(this.defaults);
      let year = moment().format("YYYY");
      this.columns[0].values = [];
      for (let i = year - 20; i < year - 0 + 1; 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;
        }
      }
      if(this.type == 1) {
        this.columns.push({
          values: [],
          className: "column2"
        })
        this.columns[1].values = months(year)
        this.columns.push({
          values: [],
          className: "column3"
        })
        this.columns[2].values = days({value:year+'-01',text:'1月'})
      }else if(this.type == 2) {
        this.columns.push({
          values: [],
          className: "column2"
        })
        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;
          }
        }
      }else if(this.type == 3) {
        this.columns.push({
          values: [],
          className: "column2"
        })
        this.columns[1].values = months(year);
      }
    },
    onConfirm(value, index) {
      let val
      if(this.type == 1) {
        val = {
          name:value[0]+'年'+value[1].text+value[2].text,
          value:value[2].value
        }
      }else if(this.type == 2) {
        let a = value[1].text.substring(value[1].text.indexOf('(')+1,value[1].text.indexOf(')'))
        a.split('-')
        let start = value[0]+ '-' +a[0].split('/').join('-')
        let end = value[0]+ '-' +a[1].split('/').join('-')
        val = {
          name:value[0]+'年'+value[1].text.substr(0,value[1].text.indexOf('(')),
          value:start+'/'+end
        }
      }else if(this.type == 3) {
        val ={
          name:value[0]+'年'+value[1].text,
          value:value[1].value
        }
      }else if(this.type == 4) {
        val ={
          name:value[0]+'年',
          value:value[0]
        }
      }
      this.$emit("onConfirm", val);
    },
    onChange(picker, values) {
      if(this.type == 1) {
        picker.setColumnValues(1, months(values[0]));
        picker.setColumnValues(2, days(values[1]));
      }else if(this.type == 2) {
        picker.setColumnValues(1, weelys(values[0]));
      }else if(this.type == 3) {
        picker.setColumnValues(1, months(values[0]));
      }
      this.$emit("onChange", values);
    },
    cancel() {
      this.$emit("cancel");
    }
  }
};
</script>



<style>
</style>

 然后使用