uniapp使用时间插件，进行时间搜索查询

uniapp使用时间插件，点击开始时间和结束时间，进行搜索查询

插件市场下载的时间插件

<template>
	<view class="checkPage">
		<view class="date">
			<view class="datetime" @tap="onShowDatePicker()">
				<image src="../../static/check/date.png" mode="" style="width: 40upx;height: 40upx;margin: 0 20upx;"/>
				<text style="color: #FFFFFF;">{{ selectDate }}</text>
			</view>
			<view class="resetTime" v-show="resetShow" @tap="reset()">重置</view>
		</view>
		<view class="loading">{{ loadingText }}</view>
		<view class="cu-load load-modal" v-if="loadModal">
			<image src="/static/logo.gif"  style="width: 160upx;height: 160upx;"/>
			<view class="gray-text">加载中...</view>
		</view>
		<mx-date-picker :show="showPickerDate" :type="type" :value="value" :show-tips="true" :begin-text="'开始时间'" :end-text="'结束时间'"
		 :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
	</view>
</template>

<script>
	import MxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue'
	import { mapState, mapMutations } from 'vuex';
	export default {
		components: {
			MxDatePicker,
		},
		data() {
			return {
				showPickerDate:false,
				value: ['2019/01/08', '2019/01/16'],
				type: 'range',
				startDate: '',
				endDate: '',
				selectDate:'请选择时间',
				loadingText: '加载中...',
				linkageVisible: false,
				resetShow:false,
				loadModal:true,
				page: 1,
				listData: [],
			}
		},
		computed: mapState(['hasLogin', 'userInfo']),
		onLoad() {
			if (this.hasLogin === false) {
				uni.navigateTo({
					url: '/pages/login'
				});
			}
			this.getList();
		},
		onShow() {
			setTimeout(() => {
				this.getList();
			}, 500);
		},
		onPullDownRefresh (){
			this.getList();
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			...mapMutations(['logout']),
			onShowDatePicker(type) {
				//显示
				this.showPickerDate = true;
				this.value = this[type];
			},
			onSelected(e) {
				// console.log(e)
				//选择
				this.showPickerDate = false;
				if (e) {
					this[this.type] = e.value;
					this.startDate = e.value[0];
					this.endDate = e.value[1];
					this.selectDate = e.value[0] +' — '+e.value[1];
					this.listData = [];
					this.getList();
					this.resetShow = true;
				}
			},
			reset() {
				this.resetShow = false;
				this.selectDate = '请选择时间';
				this.startDate = '';
				this.endDate = '';
				this.getList();
			},
			getList(IsRefresh){
				console.log('hellow',IsRefresh)			
				 this.loadingText = "加载中..."
				if(IsRefresh){
					this.page=1;
				}
				uni.request({
					url: this.url + 'patrolReport/getList',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						Authorization: this.userInfo.token
					},
					data:{
						reportType: indexTab,
						startDate: this.startDate,
						endDate: this.endDate,
						userName: this.userInfo.userName,
						areaId: this.areaId,//这个可以不传
						page: this.page,
						rows: '10'
					},
					success: (res) => {
						this.page++;
						// this.listData = res.data.pageRows;
						this.listData = this.listData.concat(res.data.pageRows);
						uni.stopPullDownRefresh();
						// console.log(res.data.pageRows,"00000999")
						if(res.data.pageRows.length==0){
							this.loadingText = '暂无数据';
						}
						if (res.data.pageRows.length < 10) {
							this.loadingText = '已加载全部';
						}else{
							this.loadingText = '加载更多';
						}
						this.loadModal = false;
						// setTimeout(()=>{
						// 	this.loadingText = '';
						// },1000)
					}
				})
			},
			
		}
	}
</script>

<style scoped style="scss">
	.loading {
		text-align: center;
		line-height: 50px;
	}
	.active{
		background-color: #FFA10C !important;
		
	}
	.checkPage{
		width: 100%;
		overflow: hidden;
		/* position: relative; */
	}
	.date{
		background: #402EF1;
		padding: 10upx;
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		height: 240upx;
	}
	.card{
		margin-top: 240upx;
		overflow: hidden;
		height: calc(100% - 150px);
		.noData{
			width: 500upx;
			height: 540upx;
			margin: 0 auto;
		}
	}
	.datetime{
		width: 80%;
		border-radius: 40upx;
		height: 80upx;
		/* opacity: 0.5; */
		background: #5B57FC;
		display: flex;
		align-items: center;
		padding-left: 20upx;
		margin-bottom: 30upx;
	}
	.resetTime{
		margin: 20upx 0upx 30upx 20upx;
		color: #fff;
	}
</style>

图片如下：