vant2 周次选择器-可选的时间范围

vant2 周次选择器-可选的时间范围

版本
"moment": "^2.30.1",
"ant-design-vue": "^1.7.8",

• 使用组件：Picker 选择器

• :defaults=“defaults” 默认时间 类型：Date

• :minDate=“minDate” 可选的最小时间 类型：Date

• :maxDate=“maxDate” 可选的最大时间 类型：Date

• 通过 min-date 和 max-date 属性可以确定可选的时间范围。

• 效果展示

// 子组件 changWeely.vue

<template>
  <van-picker title="选择周次" show-toolbar :columns="columns" @cancel="cancel" @confirm="onConfirm" @change="onChange" />
</template>

<script>
import { Picker, Toast } from 'vant';
import 'vant/lib/index.css';
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();
      }
    },
    minDate: {
      type: Date,
      default: new Date()
    },
    maxDate: {
      type: Date,
      default: new Date()
    },
  },
  data() {
    return {
      columns: [
        {
          values: [],
          className: "column1"
        },
        {
          values: [],
          className: "column2"
        }
      ]
    };
  },
  components: {
    [Picker.name]: Picker,
    [Toast.name]: Toast,
  },
  created() {
    this.setData();
    this.columns[1].values = this.filterDate(this.columns[1].values)
  },
  methods: {
    setData() {
      const defaultData = moment(this.defaults);
      let year = moment().format("YYYY");
      let minYear = moment(this.minDate).format("YYYY")
      let maxYear = moment(this.maxDate).format("YYYY")
      this.columns[0].values = [];
      for (let i = minYear; i <= maxYear; 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;
        }
      }
    },
    // 设置可选范围
    filterDate(arr) {
      const res = arr.map(i => {
        if (moment(i.value).isBefore(this.minDate)) {
          i['disabled'] = true
        }
        if (moment(i.value).isAfter(this.maxDate)) {
          i['disabled'] = true
        }
        return i
      })
      // console.log('filterDate:', res)
      return res
    },
    onConfirm(value, index) {
      this.$emit("onConfirm", value);
    },
    onChange(picker, values) {
      picker.setColumnValues(1, this.filterDate(weelys(values[0])));
      this.$emit("onChange", values);
    },
    cancel() {
      this.$emit("cancel");
    }
  }
};
</script>

// 父组件 

<template>
  <div>
    <div @click="onclickWeek">请选择周：{{ statrtime }} - {{ endtime }}</div>
    <van-popup v-model="showPicker" position="bottom" custom-style="height: 20%;" round>
      <changWeely :defaults="defaults" :minDate="minDate" :maxDate="maxDate" @onConfirm="onConfirm"
        @cancel="onCancel" />
    </van-popup>
  </div>
</template>
<script>
import { Popup, Toast } from 'vant';
import 'vant/lib/index.css';
import changWeely from './components/changWeely.vue'
import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");

export default {
  data() {
    return {
      showPicker: false,
      defaults: new Date(), // 设置默认时间 - 注意月份是从0开始
      statrtime: '',
      endtime: '',
      minDate: new Date("2024/01/09"),
      maxDate: new Date("2024/08/31"),
    }
  },
  components: {
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    changWeely,
  },
  methods: {
    onclickWeek() {
      this.showPicker = true
    },
    // 周的弹框
    onConfirm(date) {
      console.log(date);

      let value = date[1].value

      console.log('time:' + value);

      this.statrtime = moment(value).format('YYYY/MM/DD')
      this.endtime = moment(value).add(6, 'days').format('YYYY/MM/DD')

      // 处理接口
      // this.getHistoryData()
      this.showPicker = false;
    },
    onCancel() {
      this.showPicker = false;
    },
  },
}
</script>

相关链接：https://vant-ui.github.io/vant/v2/#/zh-CN/picker#duo-lie-xuan-ze