uniapp picker 选择年月日时分秒
时间: 2023-07-21 19:24:45 浏览: 67
你可以使用uni-app的picker组件来实现选择年月日时分秒。具体的代码示例如下:
```html
<template>
<view class="container">
<view class="picker">
<picker
mode="datetime"
:start="startDate"
:end="endDate"
@change="onPickerChange"
>
<view class="picker-text">
{{ currentDateTime }}
</view>
</picker>
</view>
</view>
</template>
<script>
export default {
data() {
return {
startDate: new Date("2020-01-01"),
endDate: new Date("2022-12-31"),
currentDateTime: "",
};
},
methods: {
onPickerChange(event) {
this.currentDateTime = event.detail.value;
},
},
};
</script>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.picker {
width: 80%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.picker-text {
font-size: 20px;
color: #333;
}
</style>
```
在上述代码中,我们使用了picker组件,并将mode属性设置为"datetime",表示选择日期和时间。同时,我们设置了起始日期和结束日期,以便用户在这个范围内选择。当用户选择完毕后,会触发change事件,我们在onPickerChange方法中更新显示的文本即可。