【uniapp】开始时间，结束时间 picker 年月日时分 封装

1.背景

 最近在做请假出差功能，本来一个很简单的需求，但是领导要求 开始时间只能选择 8点和14点，结束时间只能选择12点和17:30，实现有点坎坷，记录一下。

2.实现方法

1.封装组件 timeSelect.vue

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

<script>
import moment from "@/static/js/moment.js";
var timeHHArr = [];
var dateTimeObj = (() => {
  const dateArr = [];
  for (let i = 0; i < 50; i++) {
    // 默认50天
    const itemDate = moment().add(i, "day");
    dateArr.push({
      name: `${itemDate.format("YYYY年MM月DD日")}`,
      value: itemDate.format("YYYY-MM-DD"),
    });
  }
  return {
    dateArr,//年月日arr
    timeHHArr,//小时arr
  };
})();

export default {
  components: {},
  props: {
    travelDate: {
      type: String,
      default: "",
    },
    dateTimeIndex: {
      type: Array,
      default: function () {
        return [0, 0];
      },
    },
  },
 
  data() {
    return {
      moment: moment,
      dateTimeArray: [dateTimeObj.dateArr, dateTimeObj.timeHHArr], 
    };
  },
  onLoad() {
  
  },
  mounted() {
  },
  methods: {
	sing(data) {
		dateTimeObj.timeHHArr = data;
		this.dateTimeArray= [dateTimeObj.dateArr, data];
		// 强制更新
		this.$forceUpdate();
	},
    dateTimeChange: function (e) {
	
      const d = dateTimeObj.dateArr[e.detail.value[0]].value;
      const h = dateTimeObj.timeHHArr[e.detail.value[1]].value;
      this.$emit("timeSelect", `${d} ${h}`, e.detail.value);
    },
  },
};
</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>

2.引入路径

2.这里我引入了moment.js,可以直接去官网下载，但是运行过程中，“./locale/”会报错，这里我直接屏蔽了

3.在需要使用组件的页面中引用

import timeSelect from "@/components/timepage/timeSelect.vue";

           <uni-list-item showArrow>
            <template v-slot:header>
              <view class="slot-box">
                <text class="rule">*</text>开始时间：
              </view>
            </template>
            <template v-slot:body>
              <view class="uni-list-cell-db" @click="handleClick('startChild')">
                <timeSelect
                  @timeSelect="timeSelectStart"
                  :dateTimeIndex="startDateTimeIndex"
                  :travelDate="start_time"
                  ref="startChild"
                ></timeSelect>
              </view>
            </template>
          </uni-list-item>
          <uni-list-item showArrow>
            <template v-slot:header>
              <view class="slot-box">
                <text class="rule">*</text>结束时间：
              </view>
            </template>
            <template v-slot:body>
              <view class="uni-list-cell-db" @click="handleClick('endChild')">
                <timeSelect
                  @timeSelect="timeSelectEnd"
                  :dateTimeIndex="endDateTimeIndex"
                  :travelDate="end_time"
                  ref="endChild"
                ></timeSelect>
              </view>
            </template>
          </uni-list-item>

       
 data() {
      return {

         //开始时间段
        startTimeArr: [{name:"08:00",value:"08:00"},{name:"14:00",value:"14:00"}], 
        //开始时间段
        endTimeArr: [{name:"12:00",value:"12:00"},{name:"17:30",value:"17:30"}], 
        startDateTimeIndex: [0, 0], //开始时间默认选择
        endDateTimeIndex: [0, 0], //结束时间默认选择
        start_time:'',
        end_time:''
}}

方法调用 

 // 开始时间
timeSelectStart(val, val2) {
   console.log(val, "开始时间");
   this.start_time  = val;
 },

 // 结束时间
timeSelectEnd(val, val2) {
    console.log(val, "结束时间");
    this.end_time= val;  
},
handleClick(val) {
     if (val == "startChild") {
       this.$refs.startChild.sing(this.startTimeArr);
     } else {
       this.$refs.endChild.sing(this.endTimeArr);
     }
},

3.效果展示

20231222_173727