weui picker 时分秒时间选择
时间: 2023-11-10 15:58:36 浏览: 56
在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);
}
});
```
这样就可以在页面中实现一个简单的时分秒时间选择器。