uni-app小程序简单的日期选择器

<template>
  <div class="time" v-if="visible">
    <div class="mask" @click="close" />
    <div class="box">
      <div class="header">
        <div class="determine" @click="close">取消</div>
        <div class="determine" @click="confirm" :style="{color: themes.theme1 || '#FF4E09',}">确定</div>
      </div>

      <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
        class="picker-view">
        <picker-view-column>
          <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
        </picker-view-column>
      </picker-view>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        years: [],
        year: null,
        months: [],
        month: null,
        days: [],
        day: null,
        hours: [],
        hour: null,
        minutes: [],
        minute: null,
        value: [],
        indicatorStyle: `height: 50px;`,
        timeValue: ''
      }
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      themes: {
        type: Object,
        default() {
          return {};
        },
      },
      interviewTime: {
        type: String,
        default() {
          return '';
        },
      }
    },
    mounted() {
      this.init();
    },
    watch: {
      visible: {
        handler(newValue, oldValue) {
          if (newValue) {
            if (this.interviewTime) {
              this.init(this.interviewTime);
            }
          }
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      init(interviewTime) {
        const date = interviewTime ? new Date(interviewTime) : new Date();
        const years = []
        const year = date.getFullYear()
        const months = []
        const month = date.getMonth() + 1
        const days = []
        const day = date.getDate()
        const hours = []
        const hour = date.getHours()
        const minutes = []
        const minute = date.getMinutes()

        let isDay = 30;
        if (month == 2) {
          isDay = 28;
        } else if ([1,3,5,7,8,10,12].includes(month)) {
          isDay = 31;
        } else {
          isDay = 30;
        }

        for (let i = date.getFullYear(); i <= date.getFullYear()+1; i++) {
          years.push(i)
        }
        for (let i = 1; i <= 12; i++) {
          months.push(i)
        }
        for (let i = 1; i <= isDay; i++) {
          days.push(i)
        }
        for (let i = 1; i <= 24; i++) {
          if (i < 10) {
            hours.push('0' + i)
          } else {
            hours.push(i)
          }
        }
        for (let i = 1; i <= 60; i++) {
          if (i < 10) {
            minutes.push('0' + i)
          } else {
            minutes.push(i)
          }
        }

        this.years = years
        this.year = year
        this.months = months
        this.month = month
        this.days = days
        this.day = day
        this.hours = hours
        this.hour = hour
        this.minutes = minutes
        this.minute = minute
        this.value = [0, month-1, day-1, hour-1, minute-1]
      },
      bindChange: function (e) {
        const val = e.detail.value
        let isDay = 30, days = [];
        if (val[1]+1 == 2) {
          isDay = 28;
        } else if ([1,3,5,7,8,10,12].includes(val[1]+1)) {
          isDay = 31;
        } else {
          isDay = 30;
        }

        for (let i = 1; i <= isDay; i++) {
          days.push(i)
        }
        this.days = days;
        this.year = this.years[val[0]]
        this.month = this.months[val[1]]
        this.day = this.days[val[2]]
        this.hour = this.hours[val[3]]
        this.minute = this.minutes[val[4]]
      },
      close(){
        this.$emit('update:visible', false);
      },
      confirm() {
        this.timeValue = `${this.year}-${this.month}-${this.day} ${this.hour}:${this.minute}:00`;
        this.$emit('confirm', this.timeValue);
        this.$emit('update:visible', false);
      },
    },
  }
</script>
<style lang="scss" scoped>
  .time {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 99999;
    .mask {
      position: absolute;
      top: 0;
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100vh;
    }
    .box {
      position: absolute;
      width: 100%;
      bottom: 0;
      background-color: #fff;
      border-radius: 20rpx 20rpx 0 0;
      overflow: hidden;
      height: 600rpx;
      .header {
        height: 88rpx;
        padding: 0 30rpx;
        border-bottom: 1rpx solid #e5e5e5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .determine {
          color: #333333;
          font-size: 32rpx;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
        }
      }
      .picker-view {
        width: 100%;
        height: 400rpx;
      }
      .item {
        height: 100rpx;
        line-height: 100rpx;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 32rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
    }
  }
</style>