vant 周时间选择器

<template>
  <van-picker
    show-toolbar
    :columns="columns"
    @cancel="cancel"
    @confirm="onConfirm"
    @change="onChange"
  />
</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;
};



export default {
  props: {
    defaults: {
      type: [Object, String, Date],
      default: () => {
        return moment();
      }
    }
  },
  data() {
    return {
      columns: [
        {
          values: [],
          className: "column1"
        },
        {
          values: [],
          className: "column2"
        }
      ]
    };
  },
  created() {
    this.setData();
  },
  methods: {
    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;
        }
      }
    },
    onConfirm(value, index) {
      this.$emit("onConfirm", value);
    },
    onChange(picker, values) {
      picker.setColumnValues(1, weelys(values[0]));
      this.$emit("onChange", values);
    },
    cancel() {
      this.$emit("cancel");
    }
  }
};
</script>



<style>
</style>


以上是作为一个子组件单独的vue
下面是父组件引入后的弹框
相关变量要自己写

      <van-popup v-model="showpicker6"
                 position="bottom"
                 custom-style="height: 20%;">
        <changWeely :defaults="defaults"
                    @onConfirm="onConfirm2"
                    @onCancel="onCancel" />
      </van-popup>

    defaults: new Date(),

    // 周的弹框
    onConfirm2 (date) {
      console.log(date);

      let value = date[1].value

      console.log(value);


      this.statrtime = `${value} 00:00:00`
      this.endtime = this.moment(value).add(6, 'days').format('YYYY-MM-DD 23:59:59')

      this.getHistoryData()
      this.showpicker6 = false;
    },

来一个长长的分割线--------------上面是vue2版本的 下面是新写的vue3版本的-----------------------------------------------

vue3版本

<template>
  <!-- 周选择 -->
  <div class="dataWeeks">
    <van-picker
      v-model="allData.selectedValues"
      :columns="allData.columns"
      @cancel="cancel"
      @confirm="onConfirm2"
      class="weekSelects"
    />
  </div>
</template>

<script setup name="dataWeeks">
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
import { reactive, onMounted } from 'vue';

const emit = defineEmits(['onConfirm2', 'cancel', 'onChange']);
const props = defineProps({
  defaults: [String, Object, Date],
});
// 获取一年的周次列表
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 {
    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 =
      fix(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 = fix(oneDay.format('wo'));
  } while (weelyStr != '1周' && oneWeely.indexOf(y) > -1);
  return arr;
};

const fix = (val) => {
  val = parseInt(val) + '周';
  return val;
};

const allData = reactive({
  selectedValues: [],
  columns: [
    {
      values: [],
      className: 'column1',
    },
    {
      values: [],
      className: 'column2',
    },
  ],
});
const setData = () => {
  const defaultData = moment(moment());
  let year = moment().format('YYYY');
  allData.columns[0] = [];
  for (let i = year - 10; i < year - 0 + 10; i++) {
    allData.columns[0].unshift(i);
  }
  for (let i = 0; i < allData.columns[0].length; i++) {
    if (allData.columns[0][i] == year) {
      allData.columns[0].defaultIndex = i;
      allData.columns[0].valueKey = i;
      break;
    }
  }
  allData.columns[1] = weelys(year);
  for (let i = 0; i < allData.columns[1].length; i++) {
    if (moment(allData.columns[1][i].value).format('wo') == defaultData.format('wo')) {
      allData.columns[1].defaultIndex = i;
      allData.columns[1].valueKey = i;
      break;
    }
  }

  allData.columns[0] = allData.columns[0].map((item) => {
    return {
      text: String(item),
      value: String(item),
    };
  });
};
const onConfirm2 = (value, index) => {
  // 这个就是选择确定 然后把value这个取到的值 通过confirm方法传递给父组件
  emit('Confirm', value);
};
const cancel = () => {
  emit('cancel');
};

onMounted(() => {
  setData();
  // 默认选中当前年的第一个周
  allData.selectedValues.push(moment().format('YYYY'));
  allData.selectedValues.push(weelys(moment().format('YYYY'))[0].value);
});
</script>
<style lang="less">
.dataWeeks {
  .weekSelects {
     .van-picker-column__item {
      .van-ellipsis {
        height: 44px;
        line-height: 44px;
      }
    }
  }
}
</style>```