Mint-UI 的 DatetimePicker 日期時間插件的安裝與使用

簡介：Mint-UI是餓了麼出品的基於vue的移動端組件庫（element-ui是桌面端）

官網：http://mint-ui.github.io/docs/#/zh-cn2

項目環境：vue-cli + webpack

1. 首先安裝mint-ui，這裏用npm的方式安裝

　　npm install mint-ui --save

2. 引入Mint-Ui：能夠完整引入或按需引入

完整引入：main.js中寫入以下（樣式文件須要單獨引入）

　　import MintUI from 'mint-ui'

　　import 'mint-ui/lib/style.css'

　　Vue.use(MintUI)

3. 在組件中使用時間組件Datetimepicker

先看最終效果圖：

頁面默認顯示的時間是2011-10-26 ，是由於請求的後端接口裏最近一天發表文章的日期是2011-10-26。

點擊頁面的時間，彈窗顯示時間選擇框，初始值和頁面默認時間一致，若是已經選過日期，再次打開有日期回顯。

 

上代碼：

 1 <template>
 2 <div class="date">
 3     <div class="showTime"><p @click="selectData">{{this.date | formatDate}}</p></div>  //日期格式化
 4     
 5     <!-- @touchmove.prevent 阻止默認事件，在選擇時間時阻止頁面也跟着滾動-->
 6     <div  @touchmove.prevent>
 7         <mt-datetime-picker 
 8             lockScroll="true" 
 9             ref="datePicker"
10             v-model="dateVal" 
11             type="date"               //時間選擇器的類型
12             year-format="{value} 年"  //時間選擇器的格式
13             month-format="{value} 月"
14             date-format="{value} 日"
15             @confirm="handleConfirm()"
16         ></mt-datetime-picker>
17     </div>
18 </div>
19 </template>
20 <script>
21 import { DatetimePicker } from 'mint-ui'
22 import { formatDate } from '@/assets/js/date.js'
23 
24 export default {
25     filters: {
26         formatDate(time){
27             var date = new Date(time);
28             return formatDate(date)
29         }
30     },
31     name: 'Date',
32     props: { date: String },  //接受父組件中請求json獲得的日期值
33     data(){
34         return{
35             dateVal: '', 
36             selectedValue: this.date
37         }
38     },
39     methods:{
40     //打開時間選擇器
41         selectData() { 
42         //若是已經選過日期，則再次打開時間選擇器時，日期回顯
43             if(this.selectedValue){
44                 this.dateVal = this.selectedValue
45             }else{
46                 this.dateVal = this.date
47             }
48             this.$refs['datePicker'].open()
49           },
50           handleConfirm(    //時間選擇器點擊肯定觸發confirm方法 
51               this.selectedValue = this.dateVal
52               this.$emit("listenToChild",this.selectedValue) //子組件向父組件傳值，選擇的時間傳到父組件，父組件去請求json中這個時間的文章列表顯示在頁面上
53           }
54     }
55 }
56 </script>        

時間格式化 @/assets/js/date.js：

 1 export function formatDate(secs, type=0){         //type是可選參數，由於json中時間的格式是year-month-date,不能識別XX年XX月XX日
 2     var t = new Date(secs)
 3     var year = t.getFullYear()
 4     var month = t.getMonth() + 1
 5     if(month < 10){ month = '0' + month }
 6     var date = t.getDate()
 7     if(date < 10){ date = '0' + date }
 8     var hour = t.getHours()
 9     if(hour < 10){ hour = '0' + hour }
10     var minute = t.getMinutes()
11     if(minute < 10){ minute = '0' + minute }
12     var second = t.getSeconds()
13     if(second < 10){ second = '0' + second }
14         if(type==0){
15             return year + '年' + month + '月' + date + '日'
16         }else{
17             return year + '-'+month+'-'+date
18         }}