Mint UI组件库DatetimePicker的用法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/mhlghy/article/details/80269774

Mint ui 是什么？

简单来说，它就是基于 Vue.js 的移动端组件库
在实际项目开发过程中，我们往往需要借助一些组件来提高我们的开发效率，如pc端的Element、iView，移动端的Mint UI等。
下面看一下Mint UI 的DatetimePicker用法

<template>
    <!--日期选择器-->
    <mt-datetime-picker
      type="date"
      ref="picker"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm="handleConfirm"
      :startDate="startDate"
      >
    </mt-datetime-picker>

    <!--时间选择器-->
     <!-- <mt-datetime-picker
  type="time"
  ref="picker"
  @confirm="handleConfirm">
</mt-datetime-picker> -->

    <!--日期时间选择器-->
<!-- <mt-datetime-picker
    ref="picker"
    type="datetime"
    @confirm="handleConfirm">
  </mt-datetime-picker> -->
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { DatetimePicker } from 'mint-ui'
import moment from 'moment'// 格式化时间
import Vue from 'vue'
Vue.component(DatetimePicker.name, DatetimePicker)
export default {
  data () {
    return {
      dateTime: '',
      startDate: new Date()
    }
  },
  methods: {
    openPicker () {
      this.$refs.picker.open()
    },
    handleConfirm (data) {
      let date = moment(data).format('YYYY.MM.DD')
      this.dateTime = date
    }
  }
}
</script>

moment：用于格式化时间