// main.js引入
import MintUI from 'mint-ui';
Vue.use(MintUI)
// DatetimePicker
<template>
<div>
<span @click="openPicker()">点击</span>
<DatetimePicker
ref="picker"
v-model="pickerVisible"
type="date"
year-format="{value} 年"
month-format="{value} 月"
date-format="{value} 日"
@confirm="handleConfirm"
></DatetimePicker>
</div>
</template>
<script>
import { DatetimePicker } from "mint-ui";
export default {
name: "App",
components: {
DatetimePicker
},
data() {
return {
pickerVisible: ""
};
},
methods: {
openPicker() {
this.$refs.picker.open();
this.isShow = !this.isShow;
},
// 格式化获取的时间
formatDate(date) {
const y = date.getFullYear()
let m = date.getMonth() + 1
m = m < 10 ? '0' + m : m
let d = date.getDate()
d = d < 10 ? ('0' + d) : d
return y + ' ' + m + ' ' + d
},
//点击确定按钮之后
handleConfirm() {
// 输出格式化后的时间
console.log(this.formatDate(this.$refs.picker.value))
this.isShow = !this.isShow;
},
}
};
</script>
<style>
@import "mint-ui/lib/style.css";
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
mint-ui 时间选择插件
最新推荐文章于 2021-06-25 03:59:06 发布