uniapp开发微信小程序之时间选择器

小程序使用的UI组件库是uview，刚开始就是使用的是uview中日历组件，但这个组件有一个缺点，无法选择当前日期之前的日期，百度了一下，说设置 minDate 和 maxDate ，再设置 monthNum 就可以达到效果。但是设置之后第一次打开是正常的，第二次打开就不正常了，要么会闪一下，然后可选日期才可以选历史日期，要么就只能选未来日期。后面就直接去 hbuilder 插件市场下了一个插件，蛮好用的，分享一下：

方法一：uview组件中的日历

<u-calendar
			:show="show"
			mode="range" 
			@confirm="confirm" 
			@close="close" 
			rowHeight='120' 
			:minDate="minDate" 
			:maxDate="maxDate" 
			:defaultDate="defaultDates"
			:monthNum="12"
			:round="20"
			allowSameDay
		></u-calendar>

虽然选择历史日期有点坑，但是如果没有这个需求，用它选择日期还是蛮舒服的，选择历史日期就算了，还是自己封装或者下载插件吧。

方法二：下载插件

首先 hbuilder 插件市场去下载插件，下载插件的位置会自动在这里小程序地区选择，如图

页面中引用插件

代码：

<template>
	<view class="body">
		<view class="search">
			<view class="date" @click="getDate">
				<view class="text">
					<text class="date_text" v-if="!start">开始日期</text>
					<text v-if="start">{{start}}</text>
					<text class="zhi">至</text>
					<text class="date_text" v-if="!end">结束日期</text>
					<text v-if="end">{{end}}</text>
				</view>
				<img src="@/static/image/add/icon-date.png">
			</view>
			<view class="but" @click="submit()">
				<text>查询</text>
			</view>
		</view>
	</view>
	<date-range 
			:mode="viewMode" 
			:showMutibleDate="showMutibleDate" 
			:startDate="startDate" 
			:endDate="endDate" @onSelected="dateSelected"></date-range>
	</view>
</template>

<script>
	import moment from "moment"
	import dateRange from '@/components/zxp-datepickerRange/zxp-datepickerRange.vue'
	export default {
		components: {
					dateRange
				},
		data() {
			return {
				endDate:moment().format('YYYY/MM/DD'), // 默认结束时间 YYYY/MM/DD
				startDate:moment().format('YYYY/MM/DD'), // 默认开始时间 YYYY/MM/DD
				showMutibleDate: false,
				viewMode: 'date',
				dateValue: '',
				timeValue: ''
			};
		},
		mounted() {
		},
		methods: {
			dateSelected(e) {
				if (e) {
					let start = e.start
					let end = e.end
					this.startDate = start,
					this.endDate = end
					this.start = moment(start).format('YYYY/MM/DD');
					this.end = moment(end).format('YYYY/MM/DD');
				}
				this.showMutibleDate = false
			},
			// 打开时间选择器
			getDate(){
				this.viewMode = 'date'
				this.showMutibleDate = true
			},
			// 查询
			submit(){
				console.log('查询结果')
			}
		},
	}
</script>
<

效果图：

插件里我调了一些样式和判断小程序地区选择，如z-index、弹出框的高度、开始日期和结束日期比较大小的校验。这个可根据自己的需求进行一些小改动。

插件地址：