mint-ui之datetime-picker使用

一基本使用
<template>
  <mt-datetime-picker
    ref="picker"
    type="time"
    v-model="pickerValue">
  </mt-datetime-picker>
</template>

备注:
1.ref,type,v-model 属性必须设置
2.v-model="pickerVisible" 需要在js里面声明pickerVisible
3. type里的值

• datetime: 日期时间选择器，可选择年、月、日、时、分，value 值为一个 Date 对象
• date: 日期选择器，可选择年、月、日，value 值为一个 Date 对象
• time: 时间选择器，可选择时、分，value 值为一个格式为 HH:mm 的字符串

4.格式化回来的时间

建议使用momentjs 网址:http://momentjs.com/docs/#/displaying/

npm install moment
在vue里面import moment from 'moment';
handleConfirm(data) {
     this.searchTime = moment(data).format('YYYY-MM');
}


二,做开始时间结束时间使用时:

<el-row :gutter="0">
   <el-col :span="12">
      <el-button class="searchBtn searchTime" @click='openStartTime()'>
        <i class="fl el-icon-time"></i>
        <span>{{searchStartTime}}</span>
        <i class="fr el-icon-arrow-down"></i>
      </el-button>
  </el-col>
 <el-col :span="12">
    <el-button class="searchBtn searchTime" @click='openEndTime()'>
      <i class="fl el-icon-time"></i>
       <span>{{searchEndTime}}</span>
       <i class="fr el-icon-arrow-down"></i>
    </el-button>
 </el-col>
</el-row>
<!--时间插件 -->
<template>
 <mt-datetime-picker ref="startTime" v-model="startTimeVisible" type="date" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" @confirm="handleStartTimeConfirm">
 </mt-datetime-picker>
 <mt-datetime-picker ref="endTime" v-model="endTimeVisible" type="date" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" @confirm="handleEndTimeConfirm">
 </mt-datetime-picker>
</template>
<script>
import { DatetimePicker } from 'mint-ui';
import moment from 'moment';
export default {
　　data() {
　　　　return {
　　　　　　startTimeVisible: '',
       searchStartTime: '请选择时间',
       endTimeVisible: '',
       searchEndTime: '请选择时间',
　　　　}
　　},
   methods: {
　　　　//打开开始时间
    openStartTime() {
      this.$refs.startTime.open();
    },
    //打开结束时间
   openEndTime() {
      this.$refs.endTime.open();
    },
  }
}
</script>

备注ref所指就是method方法所指openStartTime