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