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。

点击页面的时间，弹窗显示时间选择框，初始值和页面默认时间一致，如果已经选过日期，再次打开有日期回显。

上代码：

 <template>
 <div class="date">
     <div class="showTime"><p @click="selectData">{{this.date | formatDate}}</p></div>  //日期格式化

     <!-- @touchmove.prevent 阻止默认事件，在选择时间时阻止页面也跟着滚动-->
     <div  @touchmove.prevent>
         <mt-datetime-picker
             lockScroll="true"
             ref="datePicker"
             v-model="dateVal"
             type="date"               //时间选择器的类型
             year-format="{value} 年"  //时间选择器的格式
             month-format="{value} 月"
             date-format="{value} 日"
             @confirm="handleConfirm()"
         ></mt-datetime-picker>
     </div>
 </div>
 </template>
 <script>
 import { DatetimePicker } from 'mint-ui'
 import { formatDate } from '@/assets/js/date.js'

 export default {
     filters: {
         formatDate(time){
             var date = new Date(time);
             return formatDate(date)
         }
     },
     name: 'Date',
     props: { date: String },  //接受父组件中请求json得到的日期值
     data(){
         return{
             dateVal: '',
             selectedValue: this.date
         }
     },
     methods:{
     //打开时间选择器
         selectData() {
         //如果已经选过日期，则再次打开时间选择器时，日期回显
             if(this.selectedValue){
                 this.dateVal = this.selectedValue
             }else{
                 this.dateVal = this.date
             }
             this.$refs['datePicker'].open()
           },
           handleConfirm(    //时间选择器点击确定触发confirm方法
               this.selectedValue = this.dateVal
               this.$emit("listenToChild",this.selectedValue) //子组件向父组件传值，选择的时间传到父组件，父组件去请求json中这个时间的文章列表显示在页面上
           }
     }
 }
 </script>        

时间格式化 @/assets/js/date.js：

 export function formatDate(secs, type=0){         //type是可选参数，因为json中时间的格式是year-month-date,不能识别XX年XX月XX日
     var t = new Date(secs)
     var year = t.getFullYear()
     var month = t.getMonth() + 1
     if(month < 10){ month = '0' + month }
     var date = t.getDate()
     if(date < 10){ date = '0' + date }
     var hour = t.getHours()
     if(hour < 10){ hour = '0' + hour }
     var minute = t.getMinutes()
     if(minute < 10){ minute = '0' + minute }
     var second = t.getSeconds()
     if(second < 10){ second = '0' + second }
         if(type==0){
             return year + '年' + month + '月' + date + '日'
         }else{
             return year + '-'+month+'-'+date
         }}