uni-app picker组件缺少 hh:ss:mm 时分秒选择功能

uni-app picker组件缺少 hh:ss:mm 时分秒选择功能

4 回复

用 time-picker，可以选择时分秒 1.import timePicker from ‘@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue’
2. components:{
timePicker
}
3.
<time-picker type="time" :border="false" :hide-second="hideSecond" v-model="time" class="time-picker-style">
<view class="uni-input">{{time}}</view>
</time-picker>

更多关于uni-app picker组件缺少 hh:ss:mm 时分秒选择功能的实战教程也可以访问 https://www.itying.com/category-93-b0.html


感谢！！！因为 我之前看picker组件文档说不支持 hh:mm:ss, 然后又去看 uni-datetime-picker 文档说必须2.0以下版本 才支持单独显示 hh:mm:ss 格式，所以一头雾水，蒙了。谁知道 uni-datetime-picker 组件拉下来 里面包含了 time-picker

回复 2***@qq.com: 不客气，解决了就好

针对您提到的uni-app中picker组件缺少hh:ss:mm时分秒选择功能的问题，我们可以通过自定义一个选择器组件来实现这一需求。以下是一个简单的实现示例，使用Vue.js和uni-app框架：

<template>
  <view class="container">
    <view class="time-picker">
      <picker mode="multiSelector" :range="range" :value="value" @change="bindPickerChange">
        <view class="picker">{{timeString}}</view>
      </picker>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      range: [
        // Hours (0-23)
        Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0')),
        // Minutes (0-59)
        Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0')),
        // Seconds (0-59)
        Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'))
      ],
      value: [0, 0, 0] // Initial value [hours, minutes, seconds]
    };
  },
  computed: {
    timeString() {
      const [hours, minutes, seconds] = this.value;
      return `${hours}:${minutes}:${seconds}`;
    }
  },
  methods: {
    bindPickerChange(e) {
      this.value = e.detail.value;
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
.time-picker {
  margin-top: 20px;
}
.picker {
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
}
</style>

在这个示例中，我们使用了picker组件的multiSelector模式来创建一个多列选择器，每一列分别代表小时、分钟和秒。range数组包含了0-23的小时、0-59的分钟和0-59的秒，每个元素都被格式化为两位数（例如，00, 01, …, 23）。

value数组初始化为[0, 0, 0]，代表初始选中的时间（00:00:00）。

timeString计算属性根据当前选中的值（value）生成一个格式化的时间字符串。

bindPickerChange方法会在用户改变选择器选项时被调用，更新value数组以反映当前选中的时间。

这个自定义组件提供了一个简单而有效的方式来选择时间，包括小时、分钟和秒，弥补了uni-app原生picker组件在这方面的不足。

回到顶部