uni-app 日期时间选择器

在uni-app中，日期时间选择器是一个常用的组件，用于让用户选择日期和时间。uni-app提供了一些内置的日期时间选择组件，但你也可以通过第三方组件库或自定义组件来实现更复杂的日期时间选择功能。以下是一个简单的示例，展示了如何使用uni-app内置的<picker>组件来实现日期时间选择。

示例代码

1. 在页面的.vue文件中添加<picker>组件

<template>
  <view class="container">
    <view class="picker-view">
      <picker mode="datetime" :value="date" @change="bindDateChange">
        <view class="picker">{{dateStr}}</view>
      </picker>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      date: '', // 当前选中的日期时间值
      dateStr: '' // 格式化后的日期时间字符串，用于显示
    };
  },
  onLoad() {
    // 设置初始日期时间为当前时间
    const now = new Date();
    this.date = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
    this.dateStr = this.formatDate(this.date);
  },
  methods: {
    bindDateChange(e) {
      const val = e.detail.value;
      this.date = val;
      this.dateStr = this.formatDate(val);
    },
    formatDate(dateStr) {
      const date = new Date(dateStr);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.picker-view {
  width: 80%;
  margin: 0 auto;
}
.picker {
  text-align: center;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>

说明

• <picker>组件的mode属性设置为datetime，表示这是一个日期时间选择器。
• value属性绑定到date数据，用于存储当前选中的日期时间值。
• @change事件监听器用于处理日期时间变化，更新date和dateStr数据。
• formatDate方法用于将日期时间值格式化为字符串，方便显示。

这个示例展示了如何使用uni-app内置的<picker>组件来实现一个基本的日期时间选择器。根据实际需求，你可以进一步自定义和扩展这个组件。