uni-app开发--利用日期选择器选择时间区间

效果图：

页面

<view class="order-date u-flex u-row-center">
   <view class="date start-date" @click="openCalendar('beginDate')">{{orderDate.beginDate}}</view>
   <view class="u-m-20">-</view>
   <view class="date end-date" @click="openCalendar('endDate')">{{orderDate.endDate}}</view>
</view>
//采用的u-picker
<u-picker 
   mode="time" 
   v-model="datePicker.show" 
   :default-time="datePicker.defaultDate" 
   @confirm="getDate" 
   :show-time-tag="false" 
   :confirm-text="lang.confirm" 
   :cancel-text="lang.cancel" 
   safe-area-inset-bottom>
</u-picker>

逻辑

//打开日历
openCalendar(type) {
  this.datePicker.defaultDate = this.orderDate[type];
  this.datePicker.show = true;
  this.datePicker.type = type;
},
//点击选中的时间
getDate(date) {
  let timestamp = date.timestamp * 1000;
  this.orderDate[this.datePicker.type] = this.$u.timeFormat(timestamp);
  if(this.datePicker.type == 'beginDate'){
       if(dateUtil.strToDate(this.orderDate.endDate).getTime() < timestamp){
	    this.orderDate.endDate = this.$u.timeFormat(timestamp);
				}
  }else if(this.datePicker.type == 'endDate') {
       if(dateUtil.strToDate(this.orderDate.beginDate).getTime() > timestamp){
	   this.orderDate.beginDate = this.$u.timeFormat(timestamp);
				}
			}
		}
//dateUtil 是下载的日期管理的工具