uniapp 完成一个 小程序的时间选择器 精确到年月日时分
时间: 2023-08-08 13:07:18 浏览: 102
精确到分的时间选择器
3星 · 编辑精心推荐
可以使用uni-app内置的picker组件来实现时间选择器,精确到年月日时分。以下是一个简单的示例代码:
```
<template>
<view class="container">
<picker mode="datetime" @change="onPickerChange">
<view class="picker">
{{ currentTime }}
</view>
</picker>
</view>
</template>
<script>
export default {
data() {
return {
currentTime: '',
};
},
methods: {
onPickerChange(e) {
this.currentTime = e.detail.value;
},
},
};
</script>
<style scoped>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.picker {
font-size: 16px;
color: #333;
padding: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
```
在上面的代码中,我们使用了picker组件,并设置mode属性为datetime,表示选择器的模式为日期时间选择器。通过@change事件监听用户的选择,将选择的时间显示在页面上。
需要注意的是,picker组件的mode属性在不同的平台上可能会有细微的差别,需要根据实际情况进行调整。
阅读全文