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裏的值
pickerVisible

• datetime: 日期時間選擇器，可選擇年、月、日、時、分，value 值爲一個 Date 對象
• date: 日期選擇器，可選擇年、月、日，value 值爲一個 Date 對象
• time: 時間選擇器，可選擇時、分，value 值爲一個格式爲 HH:mm 的字符串

4.格式化回來的時間

建議使用momentjs 網址:http://momentjs.com/docs/#/displaying/

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


二,作開始時間結束時間使用時:npm install moment

<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