uni-app开始时间与结束时间（结束时间大于开始时间）picker编写

利用uni-app官网里面picker插件代码

当点击开始时间后结束时间要大于选择后的开始时间，点击结束时间后开始时间要小于开始时间。

1、template中的代码（html）

<view class="leave_cont">
 <view class="ul">
  <view class="li">
   <text>开始时间</text>
   <view class="flex1">
    <picker mode="date" :value="start_date" :start="start_date" :end="other"  @change="bindDateChange">
     <view class="date">{{start_date}}</view>
    </picker>
   </view>
  </view>
  <view class="li">
   <text>结束时间</text>
   <view class="flex1">
    <picker mode="date" :value="start_date" :start="start_date" @change="bindDateChange2">
     <view class="date">{{other}}</view>
    </picker>
   </view>
  </view>
 </view>
</view>

2、Script中的代码

export default {
 data() {
  const currentDate = this.getDate({
   format: true
  })
  return {
   start_date: currentDate,
   end_date: currentDate,
   other:'请输入'
  }
 },
 computed: {
  
 },
 methods: {
  // 选择日期
  bindDateChange: function(e) {
   this.start_date = e.target.value
   
  },
  bindDateChange2: function(e) {
   this.end_date = e.target.value;
   this.other = this.end_date;
  },
  // 获取当前时间
  getDate(type) {
   const date = new Date();
   let year = date.getFullYear();
   let month = date.getMonth() + 1;
   let day = date.getDate();
  
   if (type === 'start') {
    year = year - 60;
   } else if (type === 'end') {
    year = year + 2;
   }
   month = month > 9 ? month : '0' + month;;
   day = day > 9 ? day : '0' + day;
   return `${year}-${month}-${day}`;
  },
 }
}

3、Style中的代码(css)

.leave_cont .ul{
 padding-left: 30rpx;
}
.leave_cont .ul .li{
 display: flex;
 align-items: center;
 border-bottom: 1px solid #efefef;
}
.leave_cont .ul .li text{
 padding: 40rpx 0;
 font-size: 34rpx;
 font-family: '黑体';
}
.leave_cont .ul .li .flex1{
 flex: 1;
 text-align: right;
 padding-right: 25rpx;
 color: #999999;
 font-size: 32rpx;
}
.date{
 height: 42rpx;
}

看一下最后的效果