微信小程序之滚动日期选择器

效果图：

知识点：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为默认方法/POSTsuccess: 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此篇文章

微信小程序之滚动日期选择器相关推荐

微信小程序农历阳历日期选择器选中日期同时获取对应农/阳历日期这个demo问题的修改
修改以下三个文件完成BUG的修复. selectdata.js文件中将农历转阳历的代码修改成: 以下是原selectdata.js中的代码搜索:calendarConverter.lunar2sol ...
微信小程序中的省市区选择器
微信小程序中的省市区选择器的实现在一些小程序中我们不伐会用到市区选择器,那它是如何实现的,下面展示一下,效果图. 首先在wxml这个文件中用到picker这个组件,picker是从底部加载的滚动选择 ...
微信小程序的年月日年月日选择器基于picker的mode = multiSelector
微信小程序的双时间选择器基于picker的mode = multiSelector 废了好大的劲写了这么一个组件,叉会腰~ 其实这段代码并不精炼,不过本人也是个刚工作一年多的小菜鸟,就先放在这里,有想 ...
微信小程序-通知滚动小提示
代码地址如下: http://www.demodashi.com/demo/14044.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序获取系统日期和时间 —— 微信小程序教程系列（17）
获取当前系统日期和时间在小程序中,新建项目时,就会有一个utils.js文件,就是获取日期和时间的,代码如下: utils.js: function formatTime(date) {var ye ...
php文字左右滚动通告,微信小程序左右滚动公告栏效果代码实例
这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 {{notice}} x data: ...
微信小程序时间戳转换日期格式
微信小程序时间戳转换为日期时间格式: 注意:javascript中使用var tem= new Date(time);在wxs中应使用getDate()方法 wxs文件 function time_ ...
IOS微信小程序页面滚动导致滚动穿透的解决办法
IOS微信小程序页面滚动导致滚动穿透的解决办法当微信小程序页面存在弹窗并且有可滚动的列表时,IOS默认的页面滚动会使弹窗滚动列表失焦,从而出现弹窗列表无法滚动的情况第一步第二步当微信小程序页面 ...
微信小程序之滚动选择器(时间日期选择器)
微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到pick ...

微信小程序之滚动日期选择器

微信小程序之滚动日期选择器相关推荐

最新文章

热门文章