微信小程序picker组件如何实现同时显示年月日时分秒

要在微信小程序的picker组件中同时显示年月日时分秒，可以使用picker-view组件来完成。picker-view组件可以自由定义滚轮的数量和每个滚轮的选项，因此可以用来实现显示年月日时分秒的需求。

具体实现步骤如下：

1. 在wxml文件中添加picker-view组件，并定义每个滚轮的内容和样式。

<view class="picker">
  <picker-view class="picker-view" value="{{dateIndex}}" bindchange="bindDateChange">
    <picker-view-column>
      <view class="picker-item" wx:for="{{years}}" wx:key="">{{item}}年</view>
    </picker-view-column>
    <picker-view-column>
      <view class="picker-item" wx:for="{{months}}" wx:key="">{{item}}月</view>
    </picker-view-column>
    <picker-view-column>
      <view class="picker-item" wx:for="{{days}}" wx:key="">{{item}}日</view>
    </picker-view-column>
    <picker-view-column>
      <view class="picker-item" wx:for="{{hours}}" wx:key="">{{item}}时</view>
    </picker-view-column>
    <picker-view-column>
      <view class="picker-item" wx:for="{{minutes}}" wx:key="">{{item}}分</view>
    </picker-view-column>
    <picker-view-column>
      <view class="picker-item" wx:for="{{seconds}}" wx:key="">{{item}}秒</view>
    </picker-view-column>
  </picker-view>
</view>

2. 在js文件中定义每个滚轮的选项以及初始化日期和时间。

Page({
  data: {
    years: [],
    months: [],
    days: [],
    hours: [],
    minutes: [],
    seconds: [],
    date: '',
    dateIndex: [0, 0, 0, 0, 0, 0]
  },
  onLoad: function () {
    var years = [], months = [], days = [], hours = [], minutes = [], seconds = [];
    for (var i = 1990; i <= 2100; i++) {
      years.push(i);
    }
    for (var i = 1; i <= 12; i++) {
      months.push(i);
    }
    for (var i = 1; i <= 31; i++) {
      days.push(i);
    }
    for (var i = 0; i <= 23; i++) {
      hours.push(i);
    }
    for (var i = 0; i <= 59; i++) {
      minutes.push(i);
      seconds.push(i);
    }
    this.setData({
      years: years,
      months: months,
      days: days,
      hours: hours,
      minutes: minutes,
      seconds: seconds
    });
  },
  bindDateChange: function(e) {
    var val = e.detail.value;
    var dateIndex = this.data.dateIndex;
    dateIndex[0] = val[0];
    dateIndex[1] = val[1];
    dateIndex[2] = val[2];
    dateIndex[3] = val[3];
    dateIndex[4] = val[4];
    dateIndex[5] = val[5];
    this.setData({
      dateIndex: dateIndex
    });
  }
})

3. 在样式文件中定义picker-view的样式。

.picker {
  height: 200rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.picker-view {
  width: 100%;
  height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.picker-item {
  line-height: 50rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333;
  height: 50rpx;
}

这样就可以在微信小程序中实现同时显示年月日时分秒的picker组件了。