<template>
|
|
<view class="">
|
<u-popup :show="isShowPopup" :closeable="true" @close="isShowPopup = false">
|
<view class="popup">
|
<view class="popup-title f-30 fw">
|
时间筛选
|
</view>
|
<view class="popup-content flex j-c-s-a a-i-c f-28">
|
<view class="select-box" @click="startTimePicker = true">
|
<text v-if="!startTime" class="c-99">开始时间</text>
|
<text v-if="startTime">{{startTime}}</text>
|
</view>
|
<view class="c-99">
|
——
|
</view>
|
<view class="select-box" @click="endTimePicker = true">
|
<text v-if="!endTime" class="c-99">结束时间</text>
|
<text v-if="endTime">{{endTime}}</text>
|
</view>
|
</view>
|
<view class="popup-btn flex j-c-s-b a-i-c">
|
<button class="popup-btn-item f-30 c-main" @click="restDate">重置</button>
|
<button class="popup-btn-item bgc-main c-ff f-30" @click="comfirmFilterDate">确定</button>
|
</view>
|
</view>
|
</u-popup>
|
<u-datetime-picker :show="startTimePicker" v-model="currentTime" mode="date"
|
@confirm="comfirmStartDate" @cancel="startTimePicker = false"></u-datetime-picker>
|
<u-datetime-picker :show="endTimePicker" v-model="currentTime" mode="date"
|
@confirm="comfirmEndDate" @cancel="endTimePicker = false"></u-datetime-picker>
|
</view>
|
|
</template>
|
|
<script>
|
export default {
|
name:"dateRangeModal",
|
data(){
|
return {
|
isShowPopup: false,
|
startTime:"",
|
endTime:"",
|
startTimePicker:false,
|
endTimePicker:false,
|
currentTime: Number(new Date()),
|
}
|
},
|
methods:{
|
open(){
|
this.isShowPopup = true;
|
},
|
close(){
|
this.isShowPopup = false;
|
},
|
comfirmStartDate(e){
|
this.startTime = this.$u.timeFormat(e.value, 'yyyy-mm-dd');
|
this.startTimePicker = false;
|
},
|
comfirmEndDate(e){
|
this.endTime = this.$u.timeFormat(e.value, 'yyyy-mm-dd');
|
this.endTimePicker = false;
|
},
|
comfirmFilterDate(){
|
if(!this.startTime) return;
|
if(!this.endTime) return;
|
this.selectDate = [this.startTime,this.endTime]
|
this.$emit("comfirm",[this.startTime,this.endTime])
|
this.isShowPopup = false;
|
},
|
restDate() {
|
this.startTime = "";
|
this.endTime ="";
|
this.$emit("rest");
|
},
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.popup-title {
|
padding: 30rpx;
|
text-align: center;
|
}
|
|
.popup-content {
|
padding: 30rpx 20rpx 20rpx;
|
|
.select-box {
|
width: 280rpx;
|
height: 78rpx;
|
border-radius: 35rpx;
|
background-color: #F5F5F5;
|
text-align: center;
|
line-height: 78rpx;
|
}
|
}
|
|
.popup-btn {
|
padding: 30rpx;
|
|
.popup-btn-item {
|
width: 310rpx;
|
height: 78rpx;
|
line-height: 78rpx;
|
border-radius: 10rpx;
|
border: none;
|
margin: 0;
|
}
|
|
.popup-btn-item:first-child {
|
border: 1px solid currentColor;
|
background-color: rgb(236, 244, 255);
|
}
|
|
.popup-btn-item::after {
|
border: none;
|
}
|
}
|
|
</style>
|
