小程序坑（二） Vant时间选择器

againstAllOdds_

已于 2022-04-25 15:09:09 修改

阅读量6.5k

点赞数 4

文章标签：小程序微信小程序 javascript less

于 2022-04-24 15:29:42 首次发布

本文链接：https://blog.csdn.net/againstAllOdds_/article/details/124382635

版权

Vant2.0 中DatetimePicker 时间选择

deteTimePicker默认是显示十年之内时间

(一)、 min-date 和 max-date

1.如果出现空白，那就是传参没传对

2.如果报了 “RangeError: Invalid array length”，那就是最大时间和最小时间参数不对，（建议选第二种 .getTime() ）

min-date 和 max-date参数不对，都是因为没有加 getTime()

maxDate: new Date(2040, 11, 31) 如果这样显示不出来

就加上

maxDate: new Date(2040, 11, 31).getTime()；变成时间戳

（二）设置默认时间

官方文档写的v-model,我用没效果，换成 :value 就可以了

（三）@change 和@input 事件改变方法

1.@change事件拿到的值有1-2s延迟问题(开发者工具没问题，真机调试有延迟)

解决办法：我用的延时器 setTimeout，加了个load的按钮，体验不是很好，但是这是我唯一想到的方法了

附一（代码) 里有写

2.@input会有抖动问题

解决办法：换成@change,真机调试时候是有点卡

3.@change和@input 改变获取时间

配套最下面的代码，这里只写逻辑

@input="onInput"

onInput(e){
    this.timeValue = e.detail
},
confirmFn(){  //确认按钮
    let moment = require("moment")
    this.timeValue = moment(this.timeValue).format("YYYY-MM-DD")
    this.confirBtn = false
	let timer = setTimeout(() => {
		learTimeout(timer)
		if(this.pickerInputNum == 0) this.couponData.start_time = this.timeValue
		if(this.pickerInputNum == 1) this.couponData.end_time = this.timeValue
		this.pickerView_isShow = false;
		this.confirBtn = true
	},1010)
}   
//用@input 就不需要用“附代码”下方的里面的onLoad(不是这段代码)


=========================================================================================
我是一个分界线
=========================================================================================


@change="onChange"

onChange(e){
    let that = this
	let timeVal = e.detail.getValues().join().replace(/,/g,"-")
	that.timeValue = timeVal
},
confirmFn() { // 确定按钮
	this.confirBtn = false
	let timer = setTimeout(() => {
	    clearTimeout(timer)
	    if(this.pickerInputNum == 0) this.couponData.start_time = this.timeValue
	    if(this.pickerInputNum == 1) this.couponData.end_time = this.timeValue
	    this.pickerView_isShow = false;
	    this.confirBtn = true	
    },1010)
},
onLoad(){
    let moment = require("moment")
	this.timeValue = moment(this.timeValue).format("YYYY-MM-DD")
}

(四）确认和取消按钮，

改变确认和取消文字

confirm-button-text=' 是' //确定按钮文字
cancel-button-text=' 否' //取消按钮文字

隐藏顶部确认取消按钮

:show-toolbar="false"

或者

.van-picker__toolbar{
display: none !important;
}

附一（代码）



<view class="choose-time-cell" @click="pickerInput(0)">
	<input type="text"  
	    :value="couponData.start_time" 
		placeholder="请选择开始时间"
		placeholder-class="placeHolder_class"
		class="input"
	/>
</view>
<view class="choose-time-cell" @click="pickerInput(1)">
	<input type="text"  
	    :value="couponData.start_time" 
		placeholder="请选择结束时间"
		placeholder-class="placeHolder_class"
		class="input"
	/>
</view>



<van-popup position="bottom" round 
:show="pickerView_isShow" @click-overlay='pickerView_isShow = false'>
	<view class="popPicker">
		<van-datetime-picker
			type="date"  //设置类型
			confirm-button-text=' ' //确定按钮文字(不改则去掉)
			cancel-button-text=' '  //取消按钮文字(不改则去掉)
            :min-date="minDate"    //设置最小的日期
			:max-date="maxDate"    //设置最大的日期
			@change="onChange()"     //改变时间调用
			:value="currentDate"   // 设置默认展示时间，v-model我用会报错
            swipe-duration='10'
		 />

	//因需求，需要自己写确认和取消按钮，如不需要可忽略
	<view class='btns'>
		<view class="closePicker" @click="pickerView_isShow = false">取消</view>
			<van-button type="primary" @click="confirmFn" v-if="confirBtn">确定</van-button>
			<van-button loading  type="primary" loading-type="spinner" v-else></van-button>
		</view>
	</view>
</van-popup>



data() {
	       return {
				pickerView_isShow:false ,// 弹出层是否显示
				pickerInputNum:0,  //选中的index
				minDate: new Date(2010, 11, 31).getTime(),
                maxDate: new Date(2040, 11, 31).getTime(),
				currentDate: new Date().getTime(),  //初始化时间
                confirBtn:true,  //解决延迟问题
				timeValue: new Date().getTime(),  //没调用change时候默认显示
			}
		},


methods:{
    onChange(e){
		let that = this
		let timeVal = e.detail.getValues().join().replace(/,/g,"-")
		that.timeValue = timeVal
	},
	pickerInput(num){
		// console.log('点击index' , num)
		this.pickerView_isShow = true  //点击显示
		this.pickerInputNum = num
	},	

    confirmFn(val) { // 确定按钮
		this.confirBtn = false  //显示加载中按钮 ，解决延迟问题
		let timer = setTimeout(() => {
		    clearTimeout(timer)
			if(this.pickerInputNum == 0) this.couponData.start_time = this.timeValue
			if(this.pickerInputNum == 1) this.couponData.end_time = this.timeValue
			this.pickerView_isShow = false;
			this.confirBtn = true  //去掉加载中按钮
					
		},1100)  //一秒后执行上面代码
	},
},
onLoad(e) {
    let moment = require("moment")
	this.timeValue = moment(this.timeValue).format("YYYY-MM-DD")
}

用less写的css

// @all_color 可以换成 你想要的颜色
.popPicker{
		.van-picker__columns{
			margin-bottom: 142rpx;
		}
		.van-picker__toolbar{
			display: none !important;
		}
		.van-picker-column>view{
			line-height: 88rpx !important;
		}
		.pickerCol {
		  width: 80%;
		  height: 96rpx;
		  border-top: 1px solid transparent;
		  border-bottom: 1px solid transparent;
		  border-image: linear-gradient(to right,#FBFBFB,#e4e4e4,#FBFBFB) 1 1;
		  position: relative;
		  margin-left: 10%;
		}
		.btns{
			width: 100%;	
			height: 72rpx;
			font-size: 30rpx;
			display: flex;
			justify-content: center;
			position: absolute;
			left: 0;
			z-index: 999;
			bottom: 34rpx;
			
			view{
				width: 220rpx !important;
				height: 100%;
				line-height: 72rpx;
				border-radius: 15rpx;
				text-align: center;
			}
			.closePicker{
				color: @all_color;
				background-color: #e4e4e4;
				margin-right: 40rpx;
			}
			.getValue{
				background-color: @all_color;
				color: #FFFFFF;
			}
			.van-button--primary{
				background-color: @all_color;
				width: 220rpx;
				height: 100%;
				line-height: 72rpx;
				border-radius: 15rpx;
				border: none;
			}
		}
		
	}