做网站时需要注意什么,公司企业网站推广,微商产品做网站,wms智能仓储管理系统uniapp日期区间选择器
在 uniapp 中创建一个简单的自定义日期范围的日期区间选择器#xff1a; - 限制有效日期范围开始日期为 2024-01-01#xff0c;结束日期为当日#xff1b; - 默认日期区间为当日向前计算的7日区间#xff1b; - 选择开始时间后#xff0c;判断不可大…uniapp日期区间选择器
在 uniapp 中创建一个简单的自定义日期范围的日期区间选择器 - 限制有效日期范围开始日期为 2024-01-01结束日期为当日 - 默认日期区间为当日向前计算的7日区间 - 选择开始时间后判断不可大于结束时间且重置开始时间为结束时间 - 选择结束时间后判断不可小于开始时间且重置结束时间为开始时间 示例代码
html
view classpicker-containerview classpicker-itemview classpicker-item-title开始日期 :/viewpicker modedate :valuestartDate start2024-01-01 :endtodayDate changebindStartDateChangeview{{startDate}}/view/picker/viewview classpicker-itemview classpicker-item-title结束日期 :/viewpicker modedate :valueendDate start2024-01-01 :endtodayDate changebindEndDateChangeview{{endDate}}/view/picker/view
/view CSS
.picker-container{ height: 80rpx; font-size: 26rpx; display: flex; justify-content: space-around; align-items: center; border-radius: 10rpx; background-color: #fff;}
.picker-item{ padding: 16rpx; display: flex; justify-content: space-around; align-items: center;}
.picker-item-title{ color: #999; white-space: nowrap;}
.picker-item picker{ flex: 1; color: #8B4F8E; font-weight: bold;} data设置参数数据
data() {return {todayDate:,startDate: ,endDate: ,}
}, created 或 onLoad 中调用初始化日期区间方法
this.setInitTime(); methods 处理方法
setNum(num){if(num 10){return 0 num;}else{return num;}
},
setInitTime(){let thisTime new Date();this.todayDate thisTime.getFullYear() - this.setNum(thisTime.getMonth() 1) - this.setNum(thisTime.getDate());let startTime new Date(thisTime - (24 * 60 * 60 * 1000 * 6));this.startDate startTime.getFullYear() - this.setNum(startTime.getMonth() 1) - this.setNum(startTime.getDate());this.endDate this.todayDate;this.getData();
},
bindStartDateChange(e) {if(new Date(e.detail.value) new Date(this.endDate)){// 开始时间不可大于结束时间this.startDate this.endDate;}else{this.startDate e.detail.value;}this.getData();
},
bindEndDateChange(e) {if(new Date(e.detail.value) new Date(this.startDate)){// 结束时间不可小于开始时间this.endDate this.startDate;}else{this.endDate e.detail.value;}this.getData();
},getData(){// 获取对应时间段数据console.log(this.startDate.replace(/-/g,/) - this.endDate.replace(/-/g,/))
},
