uniapp picker-view自定义时间日期选择器

html

<picker-view
  v-if="visible"
  :mask-top-style="maskTopStyle"
  :indicator-style="indicatorStyle"
  :mask-style="maskStyle"
  :mask-bottom-style="maskBottomStyle"
  :value="value"
  @change="bindChange"
>
  <picker-view-column style="text-align: right">
    <view class="item" v-for="(item, index) in years" :key="index"
      >{{ item }}年</view
    >
  </picker-view-column>
  <picker-view-column style="text-align: center; flex: 0.5">
    <view class="item" v-for="(item, index) in months" :key="index"
      >{{ item }}月</view
    >
  </picker-view-column>
  <picker-view-column style="text-align: left">
    <view class="item" v-for="(item, index) in days" :key="index"
      >{{ item }}日</view
    >
  </picker-view-column>
</picker-view>

js

data(){
  /**
   * 解决动态设置indicator-style不生效的问题
   */
  maskTopStyle: `color:#9A99A2;`,
  maskBottomStyle: `color:#9A99A2;`,
  visible: true,
  indicatorStyle: `height: 34px;
  border-top: 2rpx solid #E6E4EA;
  border-bottom: 2rpx solid #E6E4EA;`,
  //最小年份
  minYear: "",
  //最大年份
  maxYear: "",
  //年份数组
  years: "",
  //年份数组
  year: "",
  //年份数组
  months: "",
  month: "",
  //年份数组
  days: "",
  day: "",
  defaultIndex: "",
  value: [0, 0, 0],
},
methods(){
    //最大年龄和最小年龄
    defaultPicker(max, min) {
      const date = new Date();
      const years = [];
      const year = date.getFullYear();
      const minYear = date.getFullYear() - max;
      const maxYear = date.getFullYear() - min;
      const months = [];
      const month = date.getMonth() + 1;
      const days = [];
      const day = date.getDate();

      for (let i = minYear; i <= maxYear; i++) {
        years.push(i);
      }
      console.log(minYear, years);
      for (let i = 1; i <= 12; i++) {
        months.push(i);
      }

      for (let i = 1; i <= 31; i++) {
        days.push(i);
      }
      const defaultIndex = years[1995];
      this.year = year;
      this.month = month;
      this.day = day;
      this.years = years;
      this.months = months;
      this.days = days;
      this.defaultIndex = defaultIndex;
      this.value = [0, 0, 0];
    },
    // 日期选择器change
    bindChange(e) {
      console.log(e);

      const date = new Date();
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      // this.days
      const val = e.detail.value;
      this.year = this.years[val[0]];
      switch (this.year) {
        case year:
          this.months = [];
          for (let i = 1; i <= month; i++) {
            this.months.push(i);
          }
          this.days = [];
          for (let i = 1; i <= day; i++) {
            this.days.push(i);
          }
          break;

        default:
          this.months = [];
          for (let i = 1; i <= 12; i++) {
            this.months.push(i);
          }
          this.days = [];
          for (let i = 1; i <= 31; i++) {
            this.days.push(i);
          }
      }
      this.month = this.months[val[1]];
      switch (this.month) {
        case 1:
        case 3:
        case 5:
        case 7:
        case 8:
        case 10:
        case 12:
          this.days = [];
          for (let i = 1; i <= 31; i++) {
            this.days.push(i);
          }
          break;
        case 4:
        case 6:
        case 9:
        case 11:
          this.days = [];
          for (let i = 1; i <= 30; i++) {
            this.days.push(i);
          }
          break;
        case 2:
          if (
            (this.year % 4 == 0 && this.year % 100 != 0) ||
            this.year % 400 == 0
          ) {
            this.days = [];
            for (let i = 1; i <= 29; i++) {
              this.days.push(i);
            }
          } else {
            this.days = [];
            for (let i = 1; i <= 28; i++) {
              this.days.push(i);
            }
          }
          break;
        default:
          this.days = [];
      }
      this.day = this.days[val[2]];
      // this.value = [this.year, this.month, this.day];
    },
}