wepy小程序时间选择控件,首次进入默认选择七天前至今天比如说(2020-3-14至2020-3-20).无论怎样选择变化时间间隔只能相差七天,并且后者选择器的结束日期为最新日期(同时提供了时间和时间戳方便给后端传输数据)。
wxml
<template lang="wxml">
<!-- 时间控件 开始 -->
<view>
<view class="picker_group">
<picker mode="date" value="{{beforeDateString}}" start="1970-01-01" end="{{beforeDateString}}" bindchange="bindDateChangeBefore">
<view class="picker">
{{beforeDateString}}
</view>
</picker>
至
<picker mode="date" value="{{nowDateString}}" start="1970-01-01" end="{{initialTime}}" bindchange="bindDateChangeNow" @tap="initialTime">
<view class="picker">
{{nowDateString}}
</view>
</picker>
</view>
</view>
</template>
<!-- 时间控件 结束 -->
css
.picker_group {
height: 85rpx;
line-height: 85rpx;
justify-content: center;
display: flex;
align-items: center;
font-size: 30rpx;
color: #888;
border-bottom: 1rpx solid #efefef;
}
.picker_group picker {
color: #64bff1;
height: 55rpx;
line-height: 55rpx;
margin: 0 2%;
padding: 0 2%;
border: 1rpx solid #64bff1;
border-radius: 30rpx;
}
js
export default class mainDetail extends wepy.page {
config = {
navigationBarTitleText: '时间控件'
}
data = {
beforeDateString: '',//默认起始时间
nowDateString: '',//默认结束时间
nowTimestamp:'',//结束时间时间戳
beforeTimestamp:'', //开始时间时间戳
initialTime:'',//仅供时间控件结束时间为最新时间
}
onLoad(query) {
//默认时间
var nowDate = Date.parse(new Date()) ;
var nowDate = nowDate / 1000
this.nowTimestamp=nowDate//后时间戳
this.beforeTimestamp=nowDate-24 * 60 * 60 * 6//前时间戳
// 调用封装好的时间转换方法
//后时间戳转换
var nowDateString=this.timestampToTime(this.nowTimestamp);
this.nowDateString=nowDateString
console.log(this.nowDateString)
//前时间戳转换
var beforeDateString=this.timestampToTime(this.beforeTimestamp);
this.beforeDateString=beforeDateString
console.log(this.beforeDateString)
}
//封装的时间戳转日期2020-02-20
timestampToTime(timestamp) {
var date = new Date(timestamp * 1000);//时间戳为10位需*1000,时间戳为13位的话不需乘1000
var Y = date.getFullYear() + '-';
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
var strDate = Y+M+D;
return strDate;
}
methods = {
// 时间段选择
bindDateChangeBefore(e) {
let that = this
that.beforeDateString=e.detail.value
var data=new Date(that.beforeDateString)
var beforeData=data.getTime()/1000;
that.beforeTimestamp=beforeData
console.log("1-----" + beforeData)//选择日期的时间戳
console.log("1-----" + that.beforeDateString)//选择的日期
var noweData=data.getTime()/1000+24 * 60 * 60 * 6;//选择后另一个自动变化的时间戳 + 7天
var nowTime=this.timestampToTime(noweData);
that.nowDateString=nowTime
that.nowTimestamp=noweData
console.log("2------" + noweData)
console.log("2------" + that.nowDateString)
this.getEarningsInfo()
},
bindDateChangeNow(e) {
let that = this
that.nowDateString=e.detail.value
var data=new Date(that.nowDateString)
var noweData=data.getTime()/1000;
that.nowTimestamp=noweData
console.log("1-----" + noweData)//选择日期的时间戳
console.log("1-----" + that.nowDateString)//选择的日期
var beforeData=data.getTime()/1000-24 * 60 * 60 * 6;//选择后另一个自动变化的时间戳 -7天
var beforeTime=this.timestampToTime(beforeData);
that.beforeDateString=beforeTime
that.beforeTimestamp=beforeData
console.log("2------" + beforeData)
console.log("2------" + that.beforeDateString)
this.getEarningsInfo()
},
// 点击选择后者时间时限制只能选到今日
initialTime(){
let that = this
var nowDate = Date.parse(new Date()) ;
var nowDate = nowDate / 1000
this.nowTimestamp=nowDate//后时间戳
// 调用封装好的时间转换方法
//后时间戳转换
var nowDateString=that.timestampToTime(that.nowTimestamp);
that.initialTime=nowDateString
console.log(that.initialTime)
}
}