vue mint-ui时间选择器

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

2.mian.js中按需引入

import { DatetimePicker } from 'mint-ui';

Vue.component(DatetimePicker.name, DatetimePicker);

date.vue页面上这样写

<!--按钮selectTime-->
    <div class="from-row">
        <img class="list-type" src="../../assets/listType-pic.png" />
        <div class="from-left">结束日期</div>
        <div class="from-right last" @click="selectTime">
          <!--过滤器格式化时间-->
          {{this.setTime | formatDate}}
          <img src="../../assets/right_arrow.png" />
        </div>
      </div>
<!--弹窗-->
      <div class="picker-box" @touchmove.prevent>
        <mt-datetime-picker
          lockScroll="true"
          ref="datePicker"
          v-model="timeVal"
          type="date"
          year-format="{value} 年"
          month-format="{value} 月"
          date-format="{value} 日"
          @confirm="handleConfirm()"
          :startDate="setTime"
        ></mt-datetime-picker>
      </div>

在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