小程序weui日期时间控件实现

2018年09月10日 09:13 | 124次浏览 作者原创 版权保护

其实微信小程序的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   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程