mpvue + Vant Weapp 开发小程序之 van-datetime-picker 和 van-popup

提示：不知道怎么配置环境的请先看第一篇的介绍：点击这里

---

1.引入

"usingComponents": {
    "van-popup": "/path/vant-weapp/popup/index",
    "van-datetime-picker": "/path/vant-weapp/datetime-picker/index"
  }

2.使用

1. van-popup默认从中间弹出，position属性可以改变显示位置:可选值为top, bottom, right, left，另外show属性表示是否显示。
2. van-datetime-picker一般配合van-popup使用：

    <van-popup :show="isShowDatetime" position="bottom">
      <van-datetime-picker
        type="date"
        :value="currentDate"
        @confirm="onDateConfirm"
        @cancel="onDateCancel"
        :min-date="minDate"
        :max-date="maxDate"/>
    van-popup>

顾名思义，:min-date和:max-date表示可选时间的上下限，type="date"必须要有（其他可选值：默认值datetime-日期+时间，time-时间，year-month-年月），@confirm和@cancel表示选择日期后点击确定或者取消事件，:value="currentDate"为时间戳，即当前展示的时间。
逻辑代码部分：

  import util from '@/utils'
  export default {
    data () {
      return {
        dateVal: '',
        isShowDatetime: false,
        minDate: new Date((new Date().getFullYear() - 1), 10, 1).getTime(),
        maxDate: new Date((new Date().getFullYear() + 2), 10, 1).getTime(),
        currentDate: new Date().getTime()
      }
    },
    methods: {
      onDateConfirm (e) {
        let time = util.formatDateStr(new Date(e.mp.detail))
        this.dateVal = time
        this.isShowDatetime = false
        this.$emit('onConfirm', {value: this.dateVal, time: e.mp.detail})
      },
      onDateCancel () {
        this.isShowDatetime = false
      },
      showDate () {
        this.isShowDatetime = !this.isShowDatetime
      }
    }
  }

// util.js
const that = {}
that.formatDateStr = function (date) {
  // eslint-disable-next-line one-var
  let MM = '', DD = ''
  if (date.getMonth() > 8) { MM = (date.getMonth() + 1).toString() } else { MM = '0' + (date.getMonth() + 1).toString() }
  if (date.getDate() > 9) { DD = date.getDate().toString() } else { DD = '0' + date.getDate().toString() }
  return date.getFullYear() + '-' + MM + '-' + DD
}
export default that

3. 注意几点：

• 这里面传入的时间不是new Date()而是new Date().getTime()
• 点击确定和取消都要调用this.isShowDatetime = false来隐藏掉日期选择器
• 月份是从 0 开始，而不是 1

---

最后，源码地址