微信小程序使用picker-view自定义时间选择器

timePick.vue

<template>
  <view class=" ">
    <view class="picker_view">
      <picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" indicator-class="picker-inner">
        <picker-view-column>
          <view class="item" v-for="(item, index) in years" :key="index"
            :style="{ fontWeight: item === year ? 'bold' : 'normal' }">{{ item
            }}年</view>
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item, index) in months" :key="index"
            :style="{ fontWeight: item === month ? 'bold' : 'normal' }">{{ item }}月</view>
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item, index) in days" :key="index"
            :style="{ fontWeight: item === day ? 'bold' : 'normal' }">{{ item }}日</view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</template>

<script>
// {{year}}-{{month}}-{{day}} {{hour}}:{{minute}}
export default {
  name: 'testCom',
  // 开始年份
  props: {
    beginYear: {
      type: [String, Number],
      default() {
        return '2019'
      }
    },
    //结束年份
    endYear: {
      type: [String, Number],
      default() {
        return '2050'
      }
    },

  },
  data() {
    return {
      userSelectDate: '',
      years: [],
      year: 0,
      months: [],
      month: 0,
      days: [],
      day: 0,
      hour: 0,
      hours: [],
      minutes: [],
      minute: 0,
      nowYear: 0,
      value: [0, 0, 0],
      visible: true,
      indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 80))}px; background: rgba(0,0,0,0.03);font-size:16px;font-weight:700 !important;border-radius:4px;`,
      selectArr: [],
      showPicker: true,
      selectRes: ''
    };
  },
  created() {
    // console.log(this.nowYear, this.month, this.day, 'nowYear')
    this.initPicker()
  },

  mounted() {
    this.$nextTick(() => {
      this.value = [this.nowYear, this.month - 1, this.day - 1]
    })
  },

  methods: {
    // 初始化picker
    initPicker() {
      const date = new Date()
      this.year = date.getFullYear()
      this.month = date.getMonth() + 1
      this.day = date.getDate()
      const dayCount = new Date(this.year, this.month, 0).getDate()
      const hour = date.getHours()
      const minutes = []
      const minute = date.getMinutes()
      // // 当前年计算  
      this.nowYear = date.getFullYear() - this.beginYear

      for (let i = this.beginYear; i <= this.endYear; i++) {
        this.years.push(i)
      }
      for (let i = 1; i <= 12; i++) {
        this.months.push(i)
      }
      for (let i = 1; i <= dayCount; i++) {
        this.days.push(i)
      }
      for (let i = 1; i <= 24; i++) {
        this.hours.push(i)
      }
      for (let i = 1; i <= 60; i++) {
        this.minutes.push(i)
      }
    },

    // 显示picker
    change() {
      this.showPicker = true;
      // 防止第一次点击无返回值
      this.selectRes = `${this.year + '-' + this.month + '-' + this.day + ' ' + this.hour + ':' + this.minute}`;
    },
    bindChange: function (e) {
      const val = e.detail.value

      // 页面显示数值
      this.year = this.years[val[0]]
      console.log(this.year, 'this.year')
      this.month = this.months[val[1]]
      // 获取当前月份的天数
      let dayCount = new Date(this.year, this.month, 0).getDate()
      let dayArray = []
      for (let i = 1; i <= dayCount; i++) {
        dayArray.push(i)
      }
      this.days = Object.assign([], dayArray)
      this.day = this.days[val[2]]
      // 返回时间
      this.selectRes = `${this.year + '-' + this.month + '-' + this.day}`;
      this.$emit('change', this.selectRes)
    }
  }
}
</script>

<style lang="scss">
.picker-inner {
  font-weight: 700 !important;
  font-size: 16px !important;
}

.box {
  position: relative;
  z-index: 888;
}

.mask {
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;

  &.show {
    visibility: visible;
    opacity: 1;
  }
}

.picker_view {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 1);
  z-index: 666;

  picker-view {
    height: 100%;
  }

  .item {
    text-align: center;
    width: 100%;
    line-height: 88upx;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 30upx;
  }
}
</style>