Vue+Vant ui实现日期时间选择

Vant DatetimePicker 时间选择

• 1、安装Vant ui
  npm i vant -S
• 2、在 main.js 中引入 Vant ui

	// 引入vant
	import Vant from 'vant'
	import 'vant/lib/index.css'
	
	Vue.use(Vant)

• 3、具体使用Vant DatetimePicker组件详解

<div class="d_date">
	<van-cell
    title="日期"
    is-link
    :value="timeValue"
     @click="showPopup" />
     <van-popup v-model="show" position="bottom">
	 	<van-datetime-picker
         v-model="currentDate"
         type="datetime"
         :loading="isLoadingShow"
         :min-date="minDate"
         :max-date="maxDate"
         :formatter="formatter"
         @cancel="show = false"
         @confirm="confirmPicker"
          />
	 </van-popup>
</div>

<script>
export default {
  data() {
    return {
      timeValue: '',
      show: false,
      isLoadingShow: true,
      currentDate: new Date(),
      minDate: new Date(),
      maxDate: new Date(2020, 12, 31),
    };
  },
  created() {
    this.getTime(); // 加载页面显示默认时间
  },
  methods: {
	// 显示弹窗
    showPopup () {
      this.show = true
      this.isLoadingShow = true
      setTimeout(() => {
        this.isLoadingShow = false
      }, 500)
    },
    // 确认选择之后的时间
    confirmPicker (val) {
      let year = val.getFullYear()
      let month = val.getMonth() + 1
      let day = val.getDate()
      let hour = val.getHours()
      let minute = val.getMinutes()
      // let second = val.getSeconds()
      if (month >= 1 && month <= 9) { month = `0${month}` }
      if (day >= 1 && day <= 9) { day = `0${day}` }
      if (hour >= 0 && hour <= 9) { hour = `0${hour}` }
      if (minute >= 0 && minute <= 9) { minute = `0${minute}` }
      // if (second >= 0 && second <= 9) { second = `0${second}` }
      this.timeValue = `${year}-${month}-${day} ${hour}:${minute}:00`
      console.log(this.timeValue)
      this.show = false
    },
    // 默认显示当前时间
    getTime () {
      let date = new Date()
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      let d = date.getDate()
      let h = date.getHours()
      let min = date.getMinutes()
      // let s = date.getSeconds()
      if (m >= 1 && m <= 9) { m = `0${m}` }
      if (d >= 1 && d <= 9) { d = `0${d}` }
      if (h >= 0 && h <= 9) { h = `0${h}` }
      if (min >= 0 && min <= 9) { min = `0${min}` }
      // if (s >= 0 && s <= 9) { min = `0${s}` }
      let time = `${y}-${m}-${d} ${h}:${min}:00`
      this.timeValue = time
  },
    // 日期选项格式化函数
    formatter (type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      } else if (type === 'hour') {
        return `${value}时`
      } else if (type === 'minute') {
        return `${value}分`
      } else if (type === 'second') {
        return `${value}秒`
      }
      return value
    },
	}
}
</script>