uni写日期选择器（月-日 周几 时间）

<template>
  <view>
    <picker mode="multiSelector" :value="dateTimeIndex" :range="dateTimeArray" range-key="name"
      @change="dateTimeChange">
      <view class="uni-input">
        <text v-if="travelDate===''" style="color:#bbb">请选择</text>
        <!-- <text v-else>{{moment(travelDate).format('YYYY年MM月DD日 HH:mm')}}</text> -->
        <text v-else>{{travelDate}}</text>
      </view>
    </picker>
  </view>
</template>

<script>
  import moment from 'moment';
  const dateTimeObj = (() => {
    const dateArr = []
    for (let i = 0; i < 50; i++) { // 默认50天
      const itemDate = moment().add(i, 'day');
      const d = itemDate.day();
      let week = '';
      if (d === 0) {
        week = '日'
      }
      if (d === 1) {
        week = '一'
      }
      if (d === 2) {
        week = '二'
      }
      if (d === 3) {
        week = '三'
      }
      if (d === 4) {
        week = '四'
      }
      if (d === 5) {
        week = '五'
      }
      if (d === 6) {
        week = '六'
      }
      dateArr.push({
        name: `${itemDate.format('MM-DD')}  周${week}`,
        // value: itemDate.format('YYYY-MM-DD')
        value: `${itemDate.format('MM-DD')}  周${week}`
      })
    }
    const timeHHArr = [];
    for (let i = 0; i < 24; i++) {
      let str = i < 10 ? `0${i}:00` : `${i}:00`
      timeHHArr.push({
        name: str,
        value: str
      })
    }
    return {
      dateArr,
      timeHHArr
    }
  })()

  export default {
    components: {},
    data() {
      // const currentDate = this.getDate({
      //   format: true
      // })
      return {
        travelDate: "", //开始时间
        dateTimeIndex: [0, 0, 0], //开始时间默认选择
        moment: moment,
        dateTimeArray: [
          dateTimeObj.dateArr,
          dateTimeObj.timeHHArr,
        ],
      }
    },
    methods: {
      dateTimeChange: function(e) {
        const d = dateTimeObj.dateArr[e.detail.value[0]].value
        const h = dateTimeObj.timeHHArr[e.detail.value[1]].value
        console.log(d, h);
        this.travelDate = `${d}${h}`
        console.log(d, h, this.travelDate);
      },
      // 当前时间
      getDate() {
        const date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let hour = date.getHours();
        let minute = date.getMinutes();
        month = month > 9 ? month : '0' + month;
        day = day > 9 ? day : '0' + day;
        hour = hour > 9 ? hour : '0' + hour;
        minute = minute > 9 ? minute : '0' + minute;
        return `${year}-${month}-${day} ${hour}:${minute}`;
      },
    }
  }
</script>

<style lang="scss" scoped>
  .items {
    margin-bottom: 18rpx;
  }

  .items-text {
    font-size: 30rpx;
    line-height: 40rpx;
    letter-spacing: 1rpx;
    color: #333333;
    margin-bottom: 19rpx;
  }

  .select-input {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 10rpx;
    border: 1rpx solid #BDBDBD;
    padding-left: 22rpx;
    box-sizing: border-box;
  }

  .time-select {
    display: flex;
    justify-content: space-evenly;
    padding-left: 0;
    font-size: 30rpx;
  }
</style>