其实微信小程序的weui给了实现日期时间的插件，具体如何使用，请继续阅读
一、在input目录中新建pickerdate.wxml，并添加如下代码
<view class="page" xmlns:wx="http://www.w3.org/1999/xhtml">
<view class="page__hd">
<view class="page__title">小程序weui 日期时间</view>
<view class="page__desc">www.vxzsk.com V型知识库 原创</view>
</view>
<view class="page__bd">
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">日期</view>
</view>
<view class="weui-cell__bd">
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="weui-input">{{date}}</view>
</picker>
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">时间</view>
</view>
<view class="weui-cell__bd">
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="weui-input">{{time}}</view>
</picker>
</view>
</view>
</view>
</view>
</view>如上述代码第10-19行，22-32行分别编写了日期和时间的元素。
二、在根目录app.json配置文件中配置pickerdate文件路径，保存后会自动生成对应的js等文件
"pages/input/pickerdate",
三、打开pickerdate.js文件，给日期、时间控件赋值(默认值)
在data对象中添加
/**
* 页面的初始数据
*/
data: {
date: "2016-09-01",
time: "12:01",
},如上述代码，给日期赋的默认值为2016-09-01，给时间控件赋的默认值为12:01
点击日期控件的js方法
bindDateChange: function (e) {
this.setData({
date: e.detail.value
})
}点击时间控件的js方法
bindTimeChange: function (e) {
this.setData({
time: e.detail.value
})
}四、预览效果
注意：pickerdate.wxml中的日期控件有日期限制，代码如下
start="2015-09-01" end="2017-09-01"
读者根据需求可去掉或者更改
此文章本站原创，地址 https://www.vxzsk.com/1887.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程