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


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
  1. 注意几点:
  • 这里面传入的时间不是new Date()而是new Date().getTime()
  • 点击确定和取消都要调用this.isShowDatetime = false来隐藏掉日期选择器
  • 月份是从 0 开始,而不是 1

最后,源码地址

Logo

前往低代码交流专区

更多推荐