vue mint-ui时间选择器

1.先安装 npm install --save mint-ui

2.mian.js中按需引入

import { DatetimePicker } from 'mint-ui';

Vue.component(DatetimePicker.name, DatetimePicker);

date.vue页面上这样写

    

        
        
结束日期
        

          
          {{this.setTime | formatDate}}
          
        
      

      

        
      

在src下建lib目录里面写过滤的tools.js

export function formatDate(secs, type = 0) { // type是可选参数
  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
  }
}

date.vue里js这样写，

import { formatDate } from '@/lib/tools.js'
export default {
   data(){
      return{
         timeVal:'' ,//选择确认后的时间
         setTime: new Date(), //起始的时间
       }
   }，
// 过滤时间格式
 filters: {
    formatDate (time) {
      var date = new Date(time)
      return formatDate(date, 1)
    }
  },
   //点开时间选择的弹窗
   selectTime () {
      // 保存上次选择的时间
      if (this.setTime) {
        this.timeVal = new Date(this.setTime);
      } else {
        this.timeVal = new Date(new Date());
      }
     // 打开弹窗
      this.$refs['datePicker'].open();
    },
  //确认按钮选择
   handleConfirm () {
      this.setTime = this.timeVal;
    }
}

最后的格式是2020/07/24