uniapp 如何实现选择时分秒功能

在uniapp中如何实现选择时分秒的功能？目前使用picker组件只能选择到日期，但业务需要精确到时分秒。尝试过修改mode为time或datetime，但效果不理想。请问有没有现成的组件或方法可以实现这个需求？最好能支持自定义时间范围，比如限制在8:00-18:00之间选择。

2 回复

使用uni-app的<picker>组件，设置mode为time即可选择时分秒。

示例代码：

<picker mode="time" @change="onTimeChange">
  <view>选择时间：{{time}}</view>
</picker>

JS部分：

data() {
  return {
    time: ''
  }
},
methods: {
  onTimeChange(e) {
    this.time = e.detail.value
  }
}

注意：iOS端默认支持时分秒，Android可能需要自定义。


在 UniApp 中实现选择时分秒功能，可以通过以下两种常用方法：

方法一：使用 uni-datetime-picker 组件（推荐）

UniApp 官方扩展组件库提供了 uni-datetime-picker，支持选择日期和时间（包括时分秒）。

  1. 安装组件（如未安装）：

  2. 代码示例：

    <template>
  <view>
    <uni-datetime-picker 
      type="datetime" 
      :value="datetime" 
      @change="onDateTimeChange"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      datetime: ''
    }
  },
  methods: {
    onDateTimeChange(e) {
      this.datetime = e; // 返回格式：'2023-10-01 14:30:45'
      console.log('选择的时间:', this.datetime);
    }
  }
}
</script>
    • 参数说明：
      • type="datetime"：启用日期和时间选择。
      • value：绑定选中的时间值。
      • @change：时间变化事件。

方法二：使用 picker 组件自定义选择器

如果需更灵活的样式或逻辑，可用 picker 组件自定义时分秒选择。

  1. 代码示例：
    <template>
  <view>
    <picker 
      mode="multiSelector" 
      :range="timeRange" 
      @change="onTimeChange"
    >
      <view>选择时间: {{ selectedTime }}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      timeRange: [
        Array.from({length: 24}, (_, i) => i.toString().padStart(2, '0')), // 时
        Array.from({length: 60}, (_, i) => i.toString().padStart(2, '0')), // 分
        Array.from({length: 60}, (_, i) => i.toString().padStart(2, '0'))  // 秒
      ],
      selectedTime: '00:00:00'
    }
  },
  methods: {
    onTimeChange(e) {
      const [h, m, s] = e.detail.value;
      this.selectedTime = `${this.timeRange[0][h]}:${this.timeRange[1][m]}:${this.timeRange[2][s]}`;
    }
  }
}
</script>
    • 说明：
      • mode="multiSelector"：启用多列选择。
      • range：定义各列数据（时、分、秒）。
      • @change：获取选中值并拼接成时间字符串。

注意事项

  1. 平台差异：uni-datetime-picker 在部分平台（如小程序）依赖原生组件，需测试兼容性。
  2. 样式调整：自定义 picker 可通过 CSS 修改外观。
  3. 初始值：根据需要设置默认时间（如当前时间）。

根据需求选择对应方法，通常推荐使用 uni-datetime-picker 以简化开发。

回到顶部