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

2.mian.js中按需引入

import { DatetimePicker } from 'mint-ui';

Vue.component(DatetimePicker.name, DatetimePicker);

date.vue頁(yè)面上這樣寫

<!--按鈕selectTime-->
    <div class="from-row">
        <img class="list-type" src="../../assets/listType-pic.png" />
        <div class="from-left">結(jié)束日期</div>
        <div class="from-right last" @click="selectTime">
          <!--過(guò)濾器格式化時(shí)間-->
          {{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目錄里面寫過(guò)濾的tools.js

export function formatDate(secs, type = 0) { // type是可選參數(shù)
  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:'' ,//選擇確認(rèn)后的時(shí)間
         setTime: new Date(), //起始的時(shí)間
       }
   }避除，
// 過(guò)濾時(shí)間格式
 filters: {
    formatDate (time) {
      var date = new Date(time)
      return formatDate(date, 1)
    }
  },
   //點(diǎn)開(kāi)時(shí)間選擇的彈窗
   selectTime () {
      // 保存上次選擇的時(shí)間
      if (this.setTime) {
        this.timeVal = new Date(this.setTime);
      } else {
        this.timeVal = new Date(new Date());
      }
     // 打開(kāi)彈窗
      this.$refs['datePicker'].open();
    },
  //確認(rèn)按鈕選擇
   handleConfirm () {
      this.setTime = this.timeVal;
    }
}

最后的格式是2020/07/24