微信小程序实现点击左右按钮切换时间与DatetimePicker 时间选择组件相结合
作者：互联网
小程序实现左右按钮切换时间和DatetimePicker 时间选择组件相结合使用
主要功能的实现思路就是将我们的正常时间转成时间戳，在时间戳的基础上加一天(减一天)，然后再转换成正常的时间
WXML
<view>
<view>
//前一天
<view bindtap="leftbtn"><image src="/pages/img/image/jiankuohao-zuo.png"></image></view>
<view bindtap="showPopup">{{date}}</view>
//后一天
<view bindtap="rightbtn"><image src="/pages/img/image/jiankuohao.png"></image></view>
</view>
//底部弹出层
<van-popup show="{{ show }}"
position="bottom"
custom-style="height: 40%;"
bind:close="onClose">
//DatetimePicker 时间选择组件
<van-datetime-picker
title="选择年月日"
type="datetime"
value="{{ currentDate }}"
min-date="{{ minDate }}"
max-date="{{ maxDate }}"
bind:input="onInput"
bind:confirm="sure" //确定按钮
/>
</van-popup>
<view class="bottom_content" >
<view>
<view class="morning">上午</view>
<view class="big_box">
<!-- <van-empty description="暂无数据" wx:if="{{empty}}" /> -->
<view wx:for="{{morninglist}}" wx:key="id" class="list_item" bindtap="morningitem" data-item="{{item}}" data-id="{{item.user_id}}">
<view>{{item.truename}}</view>
<view class="list_content">
<view wx:if="{{item.sex=='1'}}">男</view>
<view wx:elif="{{item.sex=='2'}}">女</view>
<view>{{item.age}}</view>
</view>
</view>
</view>
</view>
<!-- ====================================================================== -->
<view>
<view class="afternoon">下午</view>
<view class="big_box">
<!-- <van-empty description="暂无数据" wx:if="{{empty}}" /> -->
<view wx:for="{{afternoonlist}}" wx:key="id" class="list_item" bindtap="afternoonitem" data-item="{{item}}" data-id="{{item.user_id}}">
<view>{{item.truename}}</view>
<view class="list_content">
<view wx:if="{{item.sex=='1'}}">男</view>
<view wx:elif="{{item.sex=='2'}}">女</view>
<view>{{item.age}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
JS
import util from "../../Data/time.js";//引入小程序封装好的时间组件
Page({
data:{
minDate: new Date((new Date().getFullYear() - 1), 10, 1).getTime(),
maxDate: new Date((new Date().getFullYear() + 2), 10, 1).getTime(),
show: false,//弹出层默认为false
morninglist:[], //上午
afternoonlist:[], //下午
date:util.formatDateStr(new Date()),//页面默认显示当天的时间
eventdate:"",
}
// 点击显示弹出层
showPopup() {
this.setData({ show: true });
},
//点击隐藏弹出层
onClose() {
this.setData({ show: false });
},
// =================================点击获取前一天时间=========================
leftbtn(e){
console.log(e);
var repTime = (this.data.date).replace(/-/g, '-');//截取掉默认正常时间的'-'
console.log(repTime);
var timeTamp = Date.parse(this.data.date) / 1000*1000; //将默认的正常时间转换成时间戳
console.log(timeTamp);
//在时间戳的基础上减一天的事件戳然后在转换为正常时间
let time = util.formatDateStr(new Date(timeTamp - 24 * 60 * 60*1000))
console.log(time);
this.setData({
date:time,
})
this.data.date=time;
if(this.data.date){ //判断如果选择的时间和返回过来的时间相等的话就显示数据
this.setData({
date:time,
})
this.data.date=time;
docapplist({date:this.data.date}).then(res=>{ //传递时间参数获取数据的接口分上下午
console.log(res);
console.log(res.data.afternoon)
if(res.code==1){
if(res.data.length==0){ //如果数据的长度为零上午和下午的数据皆为空
this.setData({
morninglist:[],
afternoonlist:[],
})
this.data.morninglist=[];
this.data.afternoonlist=[];
}else if(res.data.afternoon==undefined){ //如果下午的数据为undefined则afternoonlist为[]，上午的数据等于获取到的数据
this.setData({
morninglist:res.data.morning,
afternoonlist:[],
})
this.data.morninglist=res.data.morning;
this.data.afternoonlist=[];
}else if(res.data.morning==undefined){ //如果上午的数据为undefined则morninglist为[]，下午的数据等于获取到的数据
this.setData({
morninglist:[],
afternoonlist:res.data.afternoon,
})
this.data.morninglist=[];
this.data.afternoonlist=res.data.afternoon;
}
else{
this.setData({ //如果以上条件都不成立则说明上下午皆有数据
morninglist:res.data.morning,
afternoonlist:res.data.afternoon,
})
this.data.morninglist=res.data.morning;
this.data.afternoonlist=res.data.afternoon;
}
}else if(res.code==0){
wx.showToast({
title: 'res.msg',
})
}
}).catch(err=>{
console.log(err);
})
}
},
// =================================点击获取后一天时间=========================
leftbtn(e){
console.log(e);
var repTime = (this.data.date).replace(/-/g, '-');//截取掉默认正常时间的'-'
console.log(repTime);
var timeTamp = Date.parse(this.data.date) / 1000*1000; //将默认的正常时间转换成时间戳
console.log(timeTamp);
//在时间戳的基础上加一天的事件戳然后在转换为正常时间
let time = util.formatDateStr(new Date(timeTamp + 24 * 60 * 60*1000))
console.log(time);
this.setData({
date:time,
})
this.data.date=time;
if(this.data.date){ //判断如果选择的时间和返回过来的时间相等的话就显示数据
this.setData({
date:time,
})
this.data.date=time;
docapplist({date:this.data.date}).then(res=>{ //传递时间参数获取数据的接口分上下午
console.log(res);
console.log(res.data.afternoon)
if(res.code==1){
if(res.data.length==0){ //如果数据的长度为零上午和下午的数据皆为空
this.setData({
morninglist:[],
afternoonlist:[],
})
this.data.morninglist=[];
this.data.afternoonlist=[];
}else if(res.data.afternoon==undefined){ //如果下午的数据为undefined则afternoonlist为[]，上午的数据等于获取到的数据
this.setData({
morninglist:res.data.morning,
afternoonlist:[],
})
this.data.morninglist=res.data.morning;
this.data.afternoonlist=[];
}else if(res.data.morning==undefined){ //如果上午的数据为undefined则morninglist为[]，下午的数据等于获取到的数据
this.setData({
morninglist:[],
afternoonlist:res.data.afternoon,
})
this.data.morninglist=[];
this.data.afternoonlist=res.data.afternoon;
}
else{
this.setData({ //如果以上条件都不成立则说明上下午皆有数据
morninglist:res.data.morning,
afternoonlist:res.data.afternoon,
})
this.data.morninglist=res.data.morning;
this.data.afternoonlist=res.data.afternoon;
}
}else if(res.code==0){
wx.showToast({
title: 'res.msg',
})
}
}).catch(err=>{
console.log(err);
})
}
},
// 弹出框确定按钮
sure(value){
// console.log(123)
console.log(value.detail)
let time = util.formatDateStr(new Date(value.detail)) //将点击时间组件获取到的时间转换成正常时间
console.log(time);
this.setData({
date:time,
})
this.data.date=time;
if(this.data.date){ //判断如果选择的时间和返回过来的时间相等的话就显示数据
docapplist({date:this.data.date}).then(res=>{
console.log(res);
if(res.code==1){
if(res.data.length==0){//如果数据的长度为零上午和下午的数据皆为空
this.setData({
morninglist:[],
afternoonlist:[],
})
this.data.morninglist=[];
this.data.afternoonlist=[];
}else{ //否则以上条件都不成立则说明上下午皆有数据
this.setData({
morninglist:res.data.morning,
afternoonlist:res.data.afternoon,
})
this.data.morninglist=res.data.morning;
this.data.afternoonlist=res.data.afternoon;
}
}
}).catch(err=>{
console.log(err);
})
}
this.setData({ show: false });
},
})
每天分享一点点。
标签：morninglist,console,afternoonlist,程序实现,微信,res,date,DatetimePicker,data 来源： https://blog.csdn.net/weixin_46031235/article/details/112982291