uniapp 调用日期带时间的选择器 例子
时间: 2023-08-10 12:05:39 浏览: 52
以下是一个使用uni-app内置的时间选择器组件的例子:
```
<template>
<view>
<button @tap="showDateTimePicker">选择日期时间</button>
<view v-if="showPicker">
<picker mode="datetime" @change="handleChange" start="now" end="2100-12-31 23:59:59" :value="value"></picker>
</view>
</view>
</template>
<script>
export default {
data() {
return {
showPicker: false,
value: ''
}
},
methods: {
showDateTimePicker() {
this.showPicker = true;
},
handleChange(e) {
this.value = e.detail.value;
this.showPicker = false;
console.log('您选择的日期时间是:', this.value);
}
}
}
</script>
```
在上面的代码中,我们使用了`picker`组件,并将其`mode`属性设置为`datetime`,这样就可以显示日期和时间选择器。我们还使用了`start`和`end`属性来限制可选的日期时间范围,并使用`value`属性来绑定选择器的值。
当用户点击“选择日期时间”按钮时,我们将`showPicker`属性设置为`true`,以显示选择器。当用户选择日期时间并点击“确定”时,我们将选择器的值赋给`value`属性,并将`showPicker`属性设置为`false`,以隐藏选择器。最后,我们在控制台中输出用户选择的日期时间。