uni-app 官方内置表单picker缺少同时可选择日期时间的类型

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app 官方内置表单picker缺少同时可选择日期时间的类型

需求

官方示例：

<_picker mode="date" :value="dateValue"  :start="startDate" :end="endDate" @change="bindDateChange"><_view class="uni-input">{{dateValue}}</_view></_picker>

需求：目前官方内置picker在时间选择上mode类型只有“date”和"time"，能不能多增加一个同时可选择日期时间类型的“dateTime”呢?

理由：

  1. 尽管有第三方插件可以满足，但是本人觉得官方有必要添加这个时间类型，因为开发人员重点看的是官方文档，若看了半天官方文档才发现没有这功能，是不是让开发人员对官方文档失去一点信心？

  2. 开发者更多想使用官方内置的内容或是官方插件，“因为官方，所以开发者信任”，也不需要花时间去查找第三方插件，看第三方插件文档，还要对比众多插件的利与弊，才去下载使用，这是一个很浪费时间极为不好的体验。

  3. 同时选择日期时间，如：“2020-05-15 10:30:00” 这必定是一个硬性的需求，最显著的例子：需要根据某个时间点区间精确查询(或统计)数据列表时，就必须用到。

后记：本人正着手开发的APP项目中需用到一个日期时间选择控件，去学习了官方picker，发现竟然没有此控件，因为之前用的其它UI都有同时选择日期时间的控件，心里一产生对比，心情就有点不爽了，体验很糟糕，才提了此问题。


### 表格

| 信息项      | 内容          |
|-------------|---------------|
| 开发环境    | 未提及        |
| 版本号      | 未提及        |
| 项目创建方式| 未提及        |

Harmonyos Next教程
4 回复

期待官方早日支持。


是的，我也很需要，等待中

人找资源（外包），前端，熟悉uni、vue，联系wx：Florida_kang

在uni-app中，官方内置的picker组件确实没有直接提供同时选择日期和时间的类型。为了满足这一需求，我们可以通过组合使用日期picker和时间picker来实现自定义的日期时间选择器。以下是一个简单的代码示例，展示了如何实现这一功能：

<template>
  <view>
    <view>
      <picker mode="date" :value="date" @change="bindDateChange">
        <view class="picker">{{date}}</view>
      </picker>
    </view>
    <view v-if="showTimePicker">
      <picker mode="time" :value="time" @change="bindTimeChange">
        <view class="picker">{{time}}</view>
      </picker>
    </view>
    <button @click="toggleTimePicker">选择时间</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      date: '2023-10-01', // 默认日期
      time: '12:00',      // 默认时间
      showTimePicker: false // 控制时间picker的显示
    };
  },
  methods: {
    bindDateChange(e) {
      this.date = e.detail.value;
      // 重置时间picker为默认时间，当用户更改日期后可能需要重新选择时间
      this.time = '12:00';
      this.showTimePicker = false; // 隐藏时间picker
    },
    bindTimeChange(e) {
      this.time = e.detail.value;
    },
    toggleTimePicker() {
      this.showTimePicker = !this.showTimePicker;
    }
  }
};
</script>

<style>
.picker {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border: 1px solid #ddd;
  background-color: #fff;
  margin-bottom: 10px;
}
button {
  margin-top: 10px;
}
</style>

在这个示例中，我们使用了两个picker组件，一个用于选择日期，另一个用于选择时间。通过showTimePicker变量来控制时间picker的显示与隐藏。当用户选择日期后，时间picker默认不显示，但可以通过点击“选择时间”按钮来显示。同时，当日期改变时，时间会被重置为默认值（这里设置为12:00），以避免日期更改后时间信息的不一致。

这种方法虽然需要用户进行两步操作（先选日期再选时间），但在uni-app官方未提供直接支持日期时间同时选择的picker之前，这是一个可行且相对简单的解决方案。

回到顶部