mint-ui 时间选择插件

// 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>