uniapp使用时间插件MxDatePicker，进行时间的检索查询

uniapp使用MxDatePicker时间插件，根据时间段，进行检索查询，还可以重置时间

插件是在uniapp插件市场进行下载的，直接搜索mx-datepicker即可

<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>
		<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 { mapState, mapMutations } from 'vuex';
	import MxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue';
	export default {
		components: {
			MxDatePicker,
		},
		data() {
			return {
				showPickerDate:false,
				value: ['2019/01/08', '2019/01/16'],
				type: 'range',
				startDate: '',
				endDate: '',
				selectDate:'请选择时间',
				resetShow:false,
			}
		},
		computed: mapState(['hasLogin', 'userInfo']),
		onLoad() {},
		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.resetShow = true;
				}
			},
			reset() {
				this.resetShow = false;
				this.selectDate = '请选择时间';
				this.startDate = '';
				this.endDate = '';
			},
			cancel() {},
			
		}
	}
</script>

<style scoped style="scss">
	.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;
	}
	.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>

效果图