博客

提示

：不知道怎么配置环境的请先看第一篇的介绍：

点击这里

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

最后，

源码地址