关于移动端、小程序 手写时间选择器年月日时分,记录一下

文章讲述了在商城订单项目中,遇到的问题是订单时间选择器只能选择现在及未来时间,不能选择已过时间。原代码逻辑混乱,作者分享了如何通过修改时间选择器组件解决这个问题,以及对代码进行了简化,考虑了闰年的处理。
摘要由CSDN通过智能技术生成

项目场景:商城订单

相关背景:
甲方粑粑不知道去哪买来的商城项目,测试说订单时间要改成只能选择现在以及未来,禁止选择已过时间,

在这里插入图片描述

问题描述

问题:

原先的代码确实垃圾,就贴上了一个年月日时分,啥逻辑也没得,害~

@Override
	public void run() {
		bytes = mmInStream.read(buffer);
		mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();
	}

原因分析:

提示:这里填写问题的分析:

例如:Handler 发送消息有两种方式,分别是 Handler.obtainMessage()Handler.sendMessage(),其中 obtainMessage 方式当数据量过大时,由于 MessageQuene 大小也有限,所以当 message 处理不及时时,会造成先传的数据被覆盖,进而导致数据丢失。


解决方案:

贴上代码记录一下:
html

<view class="picker-view-body">
							<picker-view indicator-style="height: 50px;line-height:50px;" :value="dateValue"
								@change="bindDateValueChange" class="picker-view">
								<picker-view-column>
									<view class="item" v-for="(item,index) in years" :key="index">{{item}}</view>
								</picker-view-column>
								<picker-view-column>
									<view class="item" v-for="(item,index) in months" :key="index">{{item}}</view>
								</picker-view-column>
								<picker-view-column>
									<view class="item" v-for="(item,index) in days" :key="index">{{item}}</view>
								</picker-view-column>
								<picker-view-column>
									<view class="item" v-for="(item,index) in hours" :key="index">{{item}}</view>
								</picker-view-column>
								<picker-view-column>
									<view class="item" v-for="(item,index) in mins" :key="index">{{item}}</view>
								</picker-view-column>
							</picker-view>
</view>

export default {
	data: function() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			let hours = []
			let hour = date.getHours()
			const mins = []
			const min = date.getMinutes()
			
			const zv = {
				year: [],
				month: [],
				day: [],
			} //总数组
			
			
			for (let i = 1940; i <= date.getFullYear(); i++) {
				years.shift(i)
				zv.year.push(i)
			}
			
			for (let i = month; i <= 12; i++) {
				months.push(i)
				// zv.month.push(i)
			}
 
			for (let i = day; i <= 31; i++) {
				days.push(i)
				zv.day.push(i)
			}
			if(30<=min){
				hour =hour+1
			}
			for (let i = hour; i <= 23; i++) {
				hours.push(i)
			}
			// for (let i = 0; i <= 59; i++) {
			// 	mins.push(i)
			// }
			return {
				offlinePayStatus: 2,
				from: this.$deviceType,
				deduction: true,
				enableIntegral: true,
				enableIntegralNum: 0,
				isWeixin: _isWeixin,
				pinkId: 0,
				active: _isWeixin ? 'weixin' : 'yue',
				showCoupon: false,
				showAddress: false,
				addressInfo: {},
				couponId: 0,
				orderGroupInfo: {
					priceGroup: {},
				},
				usableCoupon: {},
				addressLoaded: false,
				useIntegral: false,
				orderPrice: {
					payPrice: '计算中',
				},
				mark: '',
				systemStore: {},
				shipping_type: 0,
				contacts: '',
				contactsTel: '',
				storeSelfMention: 0,
				cartid: '',
				isIntegral: false,

				markContent: "",

				storeList: [],
				storeNameList: [],
				storeItems: {},
				storeObj: {},
				addressName: "",
				addressDate: "",
				addressPerInfo: "",
				takeTime: '',

				payType: ["yue", "weixin"],
				system_store: {},
				orderInfo: {},
				pay: false,
				years,
				year,
				months,
				month,
				days,
				day,
				hours,
				hour,
				mins:[0,30],
				min,
				changemon:0,
				changeday:0,
				changehour:0,
				changemin:0,
				visible: false,
				zv,
				dateValue: [9999, 0, 0, 0, 0],
				pickerObj: {
					name: "",
					phone: ""
				},
				isFaile: false,
				page: 1,
				limit: 10,
			}
		},
		methods:{
		bindDateValueChange(e) {
				
				const val = e.detail.value
				console.log(val, '-------------');
				console.log(this.changemon,'-----changemon')
				console.log( val[1])
				let d = new Date()
				// 动态生成每个月对应的天数
				let day = d.getDate()
				let month = d.getMonth() + 1
				if(this.changemon != val[1]){
					console.log('进月份了')
					this.changemon = val[1]
					// this.dateValue = [9999, this.changemon, 0, 0, 0]
					this.dateValue=[9999, val[1], 0, 0, 0]
					this.month = this.months[val[1]]
					let moni;
					// // 筛选时处于同一个月份的时候,过滤已过天数、
					this.days = []
					let max = 0
					if (this.month === 2 && this.year % 4 === 0) {
						max= 29
					} else if (this.month === 2) {
						max = 28
					} else if (this.month === 4 || this.month === 6 || this.month === 9 || this.month === 11) {
						 max = 30
					} else {
						max= 31
					}
					if(this.month == month){
						 moni = day
					} else {
						// 筛选时不是当前月份,天数恢复正常
						moni = 1
					}
					for (moni; moni <= max; moni++) {
						this.days.push(moni)
					}
					
					// 月份重新选择后,日期重置
					this.day = this.days[0]
					
					let hour = d.getHours()
					if(this.day == day && this.month == month){
						this.hours = []
						for (let i = hour; i <= 23; i++) {
							this.hours.push(i)
						}
					} else {
						this.hours = []
						for (let i = 1; i <= 23; i++) {
							this.hours.push(i)
						}
					}
					this.hour = this.hours[0]
					this.min = this.mins[0]
				}
				if(this.changeday != val[2]){
					console.log('进天数')
					this.changeday = val[2]
					this.dateValue=[9999, val[1], val[2], 0, 0]
					this.day = this.days[val[2]]
					
					
					
					// // 对应的时间数
					let hour = d.getHours()
					console.log(day,'----------day')
					if(this.day == day && this.month == month){
						this.hours = []
						for (let i = hour; i <= 23; i++) {
							this.hours.push(i)
						}
					} else {
						this.hours = []
						for (let i = 1; i <= 23; i++) {
							this.hours.push(i)
						}
					}
					
					
					this.hour = this.hours[0]
					this.min = this.mins[0]
				}
				
				if(this.changehour != val[3]){
					console.log('进时')
					this.changehour = val[3]
					this.dateValue=[9999, val[1], val[2], val[3], 0]
					this.hour = this.hours[val[3]]
					this.min = this.mins[0]
				}
				
				if(this.changemin != val[4]) {
					console.log('进分')
					this.changemin = val[4]
					this.dateValue=[9999, val[1], val[2], val[3],val[4]]
					this.min = this.mins[val[4]]
				}
				
				
				
				// this.day = this.days[val[2]]
				// this.hour = this.hours[val[3]]
				
				console.log(this.month,'--------this.months')
				console.log(this.day,'--------this.day')
				console.log(this.hour,'--------this.hour')
				console.log(this.min,'--------this.min')
	
			},
	}

this.dateValue=[9999, val[1], val[2], val[3],val[4]]
不知道为什么贴上这代码后,选择就能正常,不写就会一选择就回滚到初始位置

别人的代码看起来更简洁一些,下次再优化吧
时间选择器筛选,区分闰年


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值