<view class="seat"> <view class="row" wx:for="{{rows}}" wx:for-index="i" wx:key="index"> <block wx:for="{{3}}" wx:for-index="j" wx:for-item="k" wx:key="index"> <view wx:if="{{seats[i*3+j] != null}}" class="seat-item {{seats[i*3+j].active ? 'active' : ''}}" bindtap="seatActive" data-index="{{i*3+j}}"> {{seats[i*3+j].seatName}} <iew> <ock> <iew> <iew> <view class="seat_con"> <button class="confirm" bindtap="bookSeat">预定<tton> <iew> 添加一个年月日和起始时间和终止时间的选择功能，并给出wxss和js

实现：

首先，在wxml文件中添加年月日和时间的选择器组件：

<view class="date-time">
  <picker mode="date" value="{{date}}" start="{{startDate}}" end="{{endDate}}" bindchange="bindDateChange">
    <view class="picker">
      {{date}}
    </view>
  </picker>
  <picker mode="time" value="{{startTime}}" start="00:00" end="23:59" bindchange="bindTimeChange">
    <view class="picker">
      {{startTime}}
    </view>
  </picker>
  <picker mode="time" value="{{endTime}}" start="{{startTime}}" end="23:59" bindchange="bindTimeChange">
    <view class="picker">
      {{endTime}}
    </view>
  </picker>
</view>

其中，`startDate` 和 `endDate` 是选择器中可选的起始日期和终止日期，需要在js中定义。`date`、`startTime` 和 `endTime` 是对应的数据绑定。

然后，在js文件中定义 `startDate` 和 `endDate`：

data: {
  startDate: new Date().toISOString().slice(0, 10),
  endDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)).toISOString().slice(0, 10),
  date: '',
  startTime: '',
  endTime: ''
},

其中，`startDate` 是当前日期，`endDate` 是当前日期往后一年，使用 `toISOString()` 函数将日期转为字符串。`date`、`startTime` 和 `endTime` 初始值为空字符串。

接着，在js文件中定义 `bindDateChange` 和 `bindTimeChange` 函数来响应选择器的变化：

bindDateChange: function(e) {
  this.setData({
    date: e.detail.value
  })
},
bindTimeChange: function(e) {
  var type = e.currentTarget.dataset.type;
  if (type === 'start') {
    this.setData({
      startTime: e.detail.value
    })
  } else {
    this.setData({
      endTime: e.detail.value
    })
  }
},

其中，`bindDateChange` 函数将选择的日期更新到 `date` 中，`bindTimeChange` 函数根据选择器类型将选择的起始时间或终止时间更新到对应的变量中。

最后，在wxss文件中定义样式：

.date-time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20rpx 0;
}

.picker {
  font-size: 28rpx;
  color: #333;
  text-align: center;
  line-height: 80rpx;
  padding: 0 20rpx;
}

.picker::-webkit-picker-text {
  display: none;
}

其中，`.date-time` 定义了时间选择器的布局方式，`.picker` 定义了选择器的样式，`.picker::-webkit-picker-text` 隐藏了选择器的输入框。