微信小程序picker多列选择器：年月日时分秒组件

 

定义组件dateTime.vue

<template>
    <view>
      <picker
        :range="test"
        range-key="label"
        mode="multiSelector"
        @columnchange="bindcolumnchange"
        :value="selectvalue"
        @change="bindchange"
        @cancel="onPickerCancel"
      >
        {{ selectedDate }} {{ selectedTime }}
      </picker>
    </view>
  </template>
  
  <script>
  export default {
    props: {
      // 父组件传递的初始日期时间
      dateTime: {
        type: String,
        required: true
      },
      // 可修改的年份范围
      startYear: {
        type: Number,
        default: 2000
      },
      endYear: {
        type: Number,
        default: 2030
      }
    },
    data() {
      return {
        test: [[], [], [], [], [], []], // 年、月、日、时、分、秒
        selectvalue: [0, 0, 0, 0, 0, 0], // 初始选中值
        selectedDate: '',
        selectedTime: '00:00:00'
      };
    },
    watch: {
      // 监听 dateTime 的变化，更新组件内部状态
      dateTime(newVal) {
        this.initPicker(newVal);
      }
    },
    methods: {
      formatNumber(n) {
        return n.toString().padStart(2, '0');
      },
      formatDate(date) {
        const [year, month, day] = [date.getFullYear(), date.getMonth() + 1, date.getDate()].map(this.formatNumber);
        return `${year}-${month}-${day}`;
      },
      mGetDate(year, month) {
        return new Date(year, month, 0).getDate();
      },
      generateArray(length, unit, start = 0) {
        return Array.from({ length }, (v, i) => ({
          label: `${start + i}${unit}`, // 使用 label 作为显示内容
          value: start + i // 使用 value 存储实际值
        }));
      },
      updateDays(year, month) {
        const days = this.generateArray(this.mGetDate(year, month), '日', 1);
        this.$set(this.test, 2, days);
      },
      bindcolumnchange(e) {
        const { column, value } = e.detail;
        this.selectvalue[column] = value;
  
        if (column === 0 || column === 1) {
          const year = this.test[0][this.selectvalue[0]].value; // 获取实际值
          const month = this.test[1][this.selectvalue[1]].value; // 获取实际值
          this.updateDays(year, month);
        }
      },
      bindchange(e) {
        console.log(this.test);

        const [year, month, day, hour, minute, second] = this.selectvalue.map((index, i) => {
          const item = this.test[i][index];
          return item?.value ?? 0; // 获取实际值
        });
  
        this.selectedDate = this.formatDate(new Date(year, month - 1, day));
        this.selectedTime = `${this.formatNumber(hour)}:${this.formatNumber(minute)}:${this.formatNumber(second)}`;
  
        // 向父组件传递选择结果
        this.$emit('update', `${this.selectedDate} ${this.selectedTime}`);
      },
      onPickerCancel() {
        // 当用户取消选择时，重置为当前时间
        this.updateCurrentTime();
      },
      updateCurrentTime() {
        const now = new Date();
        const yearIndex = now.getFullYear() - this.startYear; // 计算当前年份在年份数组中的索引
        this.selectvalue = [yearIndex, now.getMonth(), now.getDate() - 1, now.getHours(), now.getMinutes(), now.getSeconds()];
  
        // 更新天数（防止月份或年份变化导致天数不匹配）
        const year = this.test[0][this.selectvalue[0]].value; // 获取实际值
        const month = this.test[1][this.selectvalue[1]].value; // 获取实际值
        this.updateDays(year, month);
  
        // 更新显示的日期和时间
        this.selectedDate = this.formatDate(now);
        this.selectedTime = `${this.formatNumber(now.getHours())}:${this.formatNumber(now.getMinutes())}:${this.formatNumber(now.getSeconds())}`;
  
        // 向父组件传递当前时间
        this.$emit('update', `${this.selectedDate} ${this.selectedTime}`);
      },
      initPicker(dateString) {
        // 解析日期时间字符串
        const [datePart, timePart] = dateString.split(' ');
        const [year, month, day] = datePart.split('-').map(Number);
        const [hour, minute, second] = timePart.split(':').map(Number);
  
        // 默认展示传入的日期和时间
        this.selectedDate = datePart;
        this.selectedTime = timePart;
  
        // 初始化选中值
        const yearIndex = year - this.startYear; // 计算当前年份在年份数组中的索引
        this.selectvalue = [yearIndex, month - 1, day - 1, hour, minute, second];
  
        // 生成年份范围
        const years = this.generateArray(this.endYear - this.startYear + 1, '年', this.startYear);
        const months = this.generateArray(12, '月', 1);
        const days = this.generateArray(this.mGetDate(year, month), '日', 1);
        const hours = this.generateArray(24, '点');
        const minutes = this.generateArray(60, '分');
        const seconds = this.generateArray(60, '秒');
  
        this.test = [years, months, days, hours, minutes, seconds];
      }
    },
    mounted() {
      // 初始化组件
      this.initPicker(this.dateTime);
    }
  };
  </script>

 父组件引用组件
 

<template>
<view>
   <picker-date :startYear="2000" :endYear="2030"             
    :dateTime="date"
    @update="accidentTimeChange">
   </picker-date>
</view>
</template>
<script>
import pickerDate from "@/components/pickerDate.vue"
</script>

export default {
  data() {
    return {
     date:'',//年月日时分秒
  }
  components: {
    pickerDate,
  },
  methods: {
    accidentTimeChange(e) {
      console.log('获取年月日时分秒', e)
      this.tade = e
    },
  }
  }
}
</script>