使用vue编写一个日期时间选择弹窗
时间: 2023-03-31 21:03:30 浏览: 76
可以使用 Vue.js 内置的组件库 vue-bootstrap 中的 Datepicker 组件来实现日期时间选择弹窗。首先需要在项目中安装 vue-bootstrap,然后在组件中引入 Datepicker 组件,并在 template 中使用该组件。可以使用 v-model 指令来绑定选择的日期时间值,并通过事件绑定来实现弹窗的显示和隐藏。
示例代码:
```html
<template>
<div>
<b-button v-on:click="showPicker = true" class="m-2">
{{ selectedDate }}
</b-button>
<b-modal v-model="showPicker" title="Select a date">
<b-form-datepicker v-model="selectedDate" @input="showPicker = false"></b-form-datepicker>
</b-modal>
</div>
</template>
<script>
import { BModal, BFormDatepicker } from 'vue-bootstrap'
export default {
components: {
BModal,
BFormDatepicker
},
data() {
return {
selectedDate: new Date(),
showPicker: false
}
}
}
</script>
```
这里使用了 vue-bootstrap 中的 BModal 组件实现弹窗,BFormDatepicker 组件实现日期时间选择。