Uniapp-小程序简单的时间选择组件-年月日时分

<template>
  <view class="uni-datetime-picker">
    <picker mode="date" value="{{date}}" start="1900-01-01" end="2100-12-31" 
             @change="bindDateChange">
      <view class="uni-datetime-picker-content">
        {{date}}
      </view>
    </picker>
    <picker mode="time" value="{{time}}" start="00:00" end="23:59" 
             @change="bindTimeChange">
      <view class="uni-datetime-picker-content">
        {{time}}
      </view>
    </picker>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        date: '2000-01-01',
        time: '08:00'
      };
    },
    methods: {
      bindDateChange(e) {
        this.date = e.target.value;
      },
      bindTimeChange(e) {
        this.time = e.target.value;
      }
    }
  };
</script>
 
<style>
  .uni-datetime-picker {
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
  .uni-datetime-picker-content {
    width: 45%;
    text-align: center;
  }
</style>

这个代码实例提供了一个组合了日期选择和时间选择的简单示例。它使用了UniApp框架的<picker>组件，并通过绑定change事件来更新选中的日期和时间。这个例子简单明了，并且可以作为开发者实现相关功能的参考。