uni-app 时间组件插件需求 可选择年月日时分秒

针对你提到的 uni-app 时间组件插件需求，可选择年月日时分秒，这里提供一个基于 uni-app 和 Vue 的时间选择器组件示例。我们将使用 uni-ui 库中的 uni-datetime-picker 组件来实现这一功能。如果你还没有安装 uni-ui，可以通过以下命令安装：

npm install @dcloudio/uni-ui

然后在你的项目中引入并使用 uni-datetime-picker 组件。以下是一个完整的示例代码：

1. 在 pages/index/index.vue 文件中：

<template>
  <view class="container">
    <uni-datetime-picker
      v-model="date"
      type="datetime"
      @change="onDateChange"
    />
    <view>选中的时间: {{ formattedDate }}</view>
  </view>
</template>

<script>
import { ref, computed } from 'vue';
import UniDatetimePicker from '@dcloudio/uni-ui/lib/uni-datetime-picker/uni-datetime-picker.vue';

export default {
  components: {
    UniDatetimePicker
  },
  setup() {
    const date = ref(new Date());

    const formattedDate = computed(() => {
      const year = date.value.getFullYear();
      const month = String(date.value.getMonth() + 1).padStart(2, '0');
      const day = String(date.value.getDate()).padStart(2, '0');
      const hours = String(date.value.getHours()).padStart(2, '0');
      const minutes = String(date.value.getMinutes()).padStart(2, '0');
      const seconds = String(date.value.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    });

    const onDateChange = (e) => {
      date.value = e.detail.value;
    };

    return {
      date,
      formattedDate,
      onDateChange
    };
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
</style>

2. 解释：

• 模板部分：使用 uni-datetime-picker 组件，并绑定 v-model 到 date 变量，同时监听 change 事件。
• 脚本部分：
  • 使用 Vue 3 的 ref 和 computed 来管理时间和格式化时间。
  • date 变量存储选中的时间。
  • formattedDate 是一个计算属性，用于格式化时间显示。
  • onDateChange 方法处理时间变化事件。
• 样式部分：简单的容器样式。

这个示例展示了如何使用 uni-app 和 uni-ui 库中的 uni-datetime-picker 组件来实现一个可选择年月日时分秒的时间选择器。你可以根据实际需求进一步定制和扩展这个组件。