效果图:
知识点:date是个String类型,所以建议后台实体类用String类型。
代码:
massage.wxml
<view class="ipt-wrap border-b flex ai-center jc-sb ">
<view class="flex ai-center">
<picker mode="date" value="{{date}}" start="1978-01-01" end="2099-12-31" bindchange="bindDateChange">
<view class="picker">
<label for="" class="font14">疾控常规收货时间</label> : {{dates}}
</view>
</picker>
</view>
</view>
<!--start="1978-01-01" end="2099-12-31"显示要开始和结束的时间-->
massage.wcss
.ipt-wrap{
min-height: 100rpx;
line-height: 100rpx;
}
.ipt-wrap label{
min-width: 120rpx;
}
.icon-youjiantou{
position: relative;
top: 1rpx;
}
.textarea{
height: 100rpx;
}
/*swtich样式-start*/
/*swtich整体大小*/
.wx-switch-input{
width:82rpx !important;
height:40rpx !important;
}
/*白色样式(false的样式)*/
.wx-switch-input::before{
width:80rpx !important;
height: 36rpx !important;
}
/*绿色样式(true的样式)*/
.wx-switch-input::after{
width: 40rpx !important;
height: 36rpx !important;
}
.ipt-wrap:last-child{
border-bottom:none;
}
massage.js
/**
* 每个小程序都需要在 app.js 中调用 App 方法注册小程序示例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。
整个小程序只有一个 App 实例,是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 示例,获取App上的数据或调用开发者注册在 App 上的函数。
*/
//Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。
const app = getApp();
Page({
/**
* data:页面的初始数据
*/
data: {
dates: '2008-08-08',//此处赋值了初始化
},
// 点击日期组件确定事件
bindDateChange: function (e) {
console.log(e.detail.value)
this.setData({
dates: e.detail.value//获取了点击时间的数据
})
},
getDates: function (e) {
this.setData({ dates: e.detail.value });
},
saveNewAddress: function () {
var that = this;
let formValue = {
values: JSON.stringify({
dates: that.data.dates,//将获取到的日期数据赋值给formValue
})
};
wx.request({
url: 'http://127.0.0.1:8080/b/massage',
header: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' },
data: {//发送给后台的数据
formValue: formValue.values,
},
method: 'get',//get为默认方法/POST
success: function (res) {
console.log("成功");
console.log(res);
var resData = res.data;
console.log(resData + '+++++++');
if (resData == "ok") {
// 这里修改成跳转的页面
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000,
success: function () {
wx.navigateTo({
url: '/pages/kongbai/kongbai'
})
}
})
} else {
wx.showToast({
title: '保存失败',
icon: 'none',
duration: 2000,
})
}
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
最后附上项目结构图片:
后台我是用java写的,工具是IDEA,如果有需要的可以留言,希望能帮到小伙伴。
参照了https://blog.csdn.net/qq_33645229/article/details/82854067此篇文章