收藏
回答

picker使用multiSelector类型后自定义日期时间组件,在电脑端显示不全?

<view class="time-picker">
  <picker 
    mode="multiSelector" 
    bindchange="bindTimeChange" 
    bindcolumnchange="bindColumnChange" 
    value="{{timeIndex}}" 
    range="{{timeArray}}"
  >
    <view class="picker-display">
      {{defaultTime || defaultText}}
    </view>
  </picker>
</view>
.time-picker {
  width: 100%;
}


.picker-display {
  font-size: 30rpx;
}


/* 大屏适配 */
@media (min-width: 480px) {
  .picker-display {
    font-size: 20rpx;
  }
}


@media (orientation: landscape) and (min-width: 992px),
(min-width: 1100px) {
  .picker-display {
    font-size: 16px;
  }
}
Component({
  options: {
    multipleSlots: true
  },

  properties: {
    defaultTime: {
      type: String,
      value: ''
    },
    defaultText: {
      type: String,
      value: '请选择时间'
    }
  },

  data: {
    timeArray: [],
    timeIndex: [0, 0, 0, 0, 0, 0],
  },

  lifetimes: {
    attached() {
      this.initTimeData();
      setTimeout(() => {
        const { defaultTime } = this.properties;
        if (defaultTime) {
          this.setTimeByDefault(defaultTime);
        }
      }, 100);
    }
  },

  methods: {
    initTimeData() {
      const now = new Date();
      const year = now.getFullYear() + 5;
      const years = this.createRangeArr(1900, year);
      const months = this.createRangeArr(1, 12);
      const days = this.getDaysByYearMonth(1900, 1);
      const hours = this.createRangeArr(0, 23);
      const minutes = this.createRangeArr(0, 59);
      const seconds = this.createRangeArr(0, 59);

      this.setData({
        timeArray: [years, months, days, hours, minutes, seconds]
      });
    },
    createRangeArr(start, end) {
      const arr = [];
      for (let i = start; i <= end; i++) {
        let val = i < 10 ? `0${i}` : `${i}`;
        arr.push(val);
      }
      return arr;
    },
    getDaysByYearMonth(year, month) {
      const y = +year;
      const m = +month;
      const day31 = [1, 3, 5, 7, 8, 10, 12];
      const day30 = [4, 6, 9, 11];
      let days;

      if (day31.includes(m)) {
        days = 31;
      } else if (day30.includes(m)) {
        days = 30;
      } else {
        days = (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0 ? 29 : 28;
      }
      return this.createRangeArr(1, days);
    },

    bindTimeChange(e) {
      const val = e.detail.value;
      const arr = this.data.timeArray;
      const y = arr[0][val[0]];
      const m = arr[1][val[1]];
      const d = arr[2][val[2]];
      const hh = arr[3][val[3]];
      const mm = arr[4][val[4]];
      const ss = arr[5][val[5]];

      const timeValue = `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

      this.setData({
        timeIndex: val,
        defaultTime: timeValue
      });

      this.triggerEvent('change', {
        time: timeValue
      });
    },

    bindColumnChange(e) {
      const col = e.detail.column;
      const val = e.detail.value;
      let { timeArray, timeIndex } = this.data;

      timeIndex[col] = val;

      if (col === 0 || col === 1) {
        const y = timeArray[0][timeIndex[0]];
        const m = timeArray[1][timeIndex[1]];
        const newDays = this.getDaysByYearMonth(y, m);
        timeArray[2] = newDays;
        timeIndex[2] = 0;
      }

      this.setData({ timeArray, timeIndex });
    },

    setTimeByDefault(timeStr) {
      if (!timeStr) return;
      try {
        const [date, time] = timeStr.split(' ');
        const [y, m, d] = date.split('-');
        const [hh, mm, ss] = time.split(':');

        const { timeArray } = this.data;
        const years = timeArray[0];
        const months = timeArray[1];
        const days = this.getDaysByYearMonth(y, m);
        const hours = timeArray[3];
        const minutes = timeArray[4];
        const seconds = timeArray[5];

        // 直接匹配纯数字,不需要拼接单位
        const yIndex = years.findIndex(t => t == y);
        const mIndex = months.findIndex(t => t == m);
        const dIndex = days.findIndex(t => t == d);
        const hhIndex = hours.findIndex(t => t == hh);
        const mmIndex = minutes.findIndex(t => t == mm);
        const ssIndex = seconds.findIndex(t => t == ss);

        const newIndex = [yIndex, mIndex, dIndex, hhIndex, mmIndex, ssIndex];

        this.setData({
          'timeArray[2]': days,
          timeIndex: newIndex
        });

      } catch (err) {
        console.error('时间默认值设置失败', err);
      }
    },
  }
});

微信版本:



回答关注问题邀请回答
收藏

1 个回答

  • 智能回答 智能回答 本次回答由AI生成
    04-24
    有用
    回复 1
    • Don'to
      Don'to
      04-24
      电脑端只显示 1 个字符,手机端和平板显示正常,具体为 2026 年4 月 24 日 15 点 23 分 10 秒 格式;
      04-24
      回复
登录 后发表内容