了解小程序picker组件的其他功能，编写一个自定义时间组件（使用picker的multiSelector模式）；功能如下：显示年-月-日时:分，且以上每个时间维度都可以手动输入或者滑动旁边的三角形选择进行修改，引用组件的界面可以获取每次修改后的时间

好的，为了编写一个自定义时间组件，我们需要先了解一下picker组件的其他功能。

除了multiSelector模式外，picker组件还有date、time、selector、pick等模式。其中，date模式可以用来选择日期，time模式可以用来选择时间，selector模式可以用来选择一组固定的值，pick模式可以用来选择一组自定义的值。

在multiSelector模式下，我们可以使用`<picker-view>`组件来实现一个多列选择器，它的使用方式如下：

<view class="picker">
  <picker-view indicator-style="height: 50rpx;" style="width: 100%; height: 150rpx;" value="{{value}}" bindchange="bindMultiPickerChange">
    <picker-view-column>
      <view class="picker-item" wx:for="{{years}}" wx:for-item="year">{{year}}</view>
    </picker-view-column>
    <picker-view-column>
      <view class="picker-item" wx:for="{{months}}" wx:for-item="month">{{month}}</view>
    </picker-view-column>
    <picker-view-column>
      <view class="picker-item" wx:for="{{days}}" wx:for-item="day">{{day}}</view>
    </picker-view-column>
  </picker-view>
</view>

在这个例子中，我们使用了三个`<picker-view-column>`来分别表示年、月、日。通过给每个`<picker-view-column>`设置`wx:for`属性，我们可以使用`wx:for-item`指定每个选项的变量名，并且通过在`<view>`中插入文本或其他组件来表示每个选项的内容。

在JS文件中，我们需要定义年、月、日的选项列表，并且在bindMultiPickerChange函数中获取用户选择的结果：

Page({
  data: {
    years: [],
    months: [],
    days: [],
    value: [0, 0, 0],
  },

  onLoad: function() {
    // 初始化年份列表
    var years = [];
    for (var i = 1970; i <= 2100; i++) {
      years.push(i);
    }
    this.setData({
      years: years
    });
    // 初始化月份列表
    var months = [];
    for (var i = 1; i <= 12; i++) {
      months.push(i);
    }
    this.setData({
      months: months
    });
    // 初始化日期列表
    var days = [];
    for (var i = 1; i <= 31; i++) {
      days.push(i);
    }
    this.setData({
      days: days
    });
  },

  bindMultiPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      value: e.detail.value
    })
  },
})

这样，我们就可以使用picker组件来实现一个多列选择器，用户可以通过手动滑动或点击三角形选择器来修改每个时间维度的值。

接下来，我们来编写一个自定义时间组件，该组件可以选择年月日时分，并且可以手动输入或者滑动修改。

<view class="picker">
  <picker-view indicator-style="height: 50rpx;" style="width: 100%; height: 250rpx;" value="{{value}}" bindchange="bindMultiPickerChange">
    <picker-view-column>
      <view class="picker-item" wx:for="{{years}}" wx:for-item="year">{{year}}年</view>
    </picker-view-column>
    <picker-view-column>
      <view class="picker-item" wx:for="{{months}}" wx:for-item="month">{{month}}月</view>
    </picker-view-column>
    <picker-view-column>
      <view class="picker-item" wx:for="{{days}}" wx:for-item="day">{{day}}日</view>
    </picker-view-column>
    <picker-view-column>
      <view class="picker-item" wx:for="{{hours}}" wx:for-item="hour">{{hour}}时</view>
    </picker-view-column>
    <picker-view-column>
      <view class="picker-item" wx:for="{{minutes}}" wx:for-item="minute">{{minute}}分</view>
    </picker-view-column>
  </picker-view>
</view>

在这个例子中，我们使用了五个`<picker-view-column>`来分别表示年、月、日、时、分。通过给每个`<picker-view-column>`设置`wx:for`属性，我们可以使用`wx:for-item`指定每个选项的变量名，并且通过在`<view>`中插入文本或其他组件来表示每个选项的内容。

在JS文件中，我们需要定义年、月、日、时、分的选项列表，并且在bindMultiPickerChange函数中获取用户选择的结果：

Page({
  data: {
    years: [],
    months: [],
    days: [],
    hours: [],
    minutes: [],
    value: [0, 0, 0, 0, 0],
  },

  onLoad: function() {
    // 初始化年份列表
    var years = [];
    for (var i = 1970; i <= 2100; i++) {
      years.push(i);
    }
    this.setData({
      years: years
    });
    // 初始化月份列表
    var months = [];
    for (var i = 1; i <= 12; i++) {
      months.push(i);
    }
    this.setData({
      months: months
    });
    // 初始化日期列表
    var days = [];
    for (var i = 1; i <= 31; i++) {
      days.push(i);
    }
    this.setData({
      days: days
    });
    // 初始化小时列表
    var hours = [];
    for (var i = 0; i <= 23; i++) {
      hours.push(i);
    }
    this.setData({
      hours: hours
    });
    // 初始化分钟列表
    var minutes = [];
    for (var i = 0; i <= 59; i++) {
      minutes.push(i);
    }
    this.setData({
      minutes: minutes
    });
  },

  bindMultiPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      value: e.detail.value
    })
  },
})

这样，我们就可以使用自定义时间组件来选择年月日时分，并且可以手动输入或者滑动修改。用户可以通过引用该组件的界面来获取每次修改后的时间。