在
weui中，可以使用
picker组件来实现时分秒时间
选择。具体步骤如下：
1. 引入
weui的css和js文件。
```html
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/
weui/2.0.1/
weui.min.css"/>
<script src="https://res.wx.qq.com/open/libs/
weuijs/1.2.1/
weui.min.js"></script>
```
2. 在页面中添加一个input元素作为触发
选择器的按钮，并为其添加data-
picker属性。
```html
<input class="
weui-input" type="text" placeholder="请
选择时间" readonly data-
picker="#time-
picker">
```
3. 在页面中添加一个隐藏的div元素作为
选择器，并为其设置id。
```html
<div id="time-
picker" class="
weui-
picker weui-hide">
<div class="
weui-
picker__hd">
<a href="javascript:;" class="
weui-
picker__action">取消</a>
<a href="javascript:;" class="
weui-
picker__action">确定</a>
</div>
<div class="
weui-
picker__bd">
<div class="
weui-
picker__group">
<div class="
weui-
picker__item">时</div>
<div class="
weui-
picker__item">分</div>
<div class="
weui-
picker__item">秒</div>
</div>
<div class="
weui-
picker__group">
<div class="
weui-
picker__item">01</div>
<div class="
weui-
picker__item">02</div>
<!-- ... -->
<div class="
weui-
picker__item">23</div>
</div>
<div class="
weui-
picker__group">
<div class="
weui-
picker__item">00</div>
<div class="
weui-
picker__item">01</div>
<!-- ... -->
<div class="
weui-
picker__item">59</div>
</div>
<div class="
weui-
picker__group">
<div class="
weui-
picker__item">00</div>
<div class="
weui-
picker__item">01</div>
<!-- ... -->
<div class="
weui-
picker__item">59</div>
</div>
</div>
</div>
```
4. 在页面中添加以下js代码，初始化
选择器。
```js
weui.
datePicker({
id: '#time-
picker',
onChange: function (result) {
console.log(result);
},
onConfirm: function (result) {
console.log(result);
}
});
```
这样就可以在页面中实现一个简单的时分秒时间
选择器。
扫一扫
2089
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
