vant的日期控件(时间选择器)的使用

一

做移动端开发需要经常设置时间选择,因此做总结如下

具体页面样式


image.png

直接上代码

<template>
  <div class="wrap content">
    <van-nav-bar title="操作日志" fixed left-arrow @click-left="onClickLeft" />
    <div class="mt-44"></div>
    <div class="main">
      <van-field v-model="logtype" label="日志类型" :placeholder="'请选择'" input-align="right" readonly right-icon="arrow" @click="showLogType" />
      <van-field v-model="bgDate" label="开始时间" :placeholder="'请选择'" input-align="right" readonly right-icon="arrow" @click="showBeginDate" />
      <van-field v-model="endDate" label="结束时间" :placeholder="'请选择'" input-align="right" readonly right-icon="arrow" @click="showEndDate" />
    </div>
    <button @click="goLogDetail" :disabled="disabledFlag" :class="{'button_style': disabledFlag}">查询</button>
    <!--picker-->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker show-toolbar :columns="columns" :default-index="2" @cancel="onCancel" @confirm="onConfirm" />
    </van-popup>
    <!--日期选择弹框-->
    <van-popup v-model="showPickerDate" position="bottom">
      <van-datetime-picker v-model="currentDate" type="date" @cancel="onCancelDate" @confirm="onConfirmDate" :min-date="minDate" :max-date="maxDate" :formatter="formatter" />
    </van-popup>
    <van-popup v-model="showPickerDate1" position="bottom">
      <van-datetime-picker v-model="currentDate1" type="date" @cancel="onCancelDate1" @confirm="onConfirmDate1" :min-date="minDate1" :max-date="maxDate1" :formatter="formatter" />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'logQuery',
  data () {
    return {
      columns: [{
        text: '登录操作',
        type: 'A'
      }, {
        text: '账务交易',
        type: 'B'
      }, {
        text: '明细查询',
        type: 'C'
      }, {
        text: '其他操作',
        type: 'D'
      }],
      showPicker: false,
      minDate: new Date(2019, 0, 1),
      maxDate: new Date(),
      minDate1: new Date(2019, 0, 1),
      maxDate1: new Date(),
      currentDate: new Date(),
      currentDate1: new Date(),
      showPickerDate: false,
      showPickerDate1: false,
      logtype: '',
      bgDate: '', // 查询时间
      endDate: ''
    }
  },
  watch: {  // 使用时间选择器,需要配合watch监听选择时间值的变化,进而设置最小值和最大值
    bgDate: function (val) {
      if (val === '') {
        return
      }
      let bgDate1 = new Date(val)
      bgDate1.setMonth(bgDate1.getMonth() + 3)  
      let date = bgDate1.getFullYear() + '-' + (bgDate1.getMonth() + 1) + '-' + bgDate1.getDate()
      this.minDate1 = new Date(val)
      this.maxDate1 = new Date(date)
    },
    endDate: function (val) {
      if (val === '') {
        return
      }
      let bgDate2 = new Date(val)
      bgDate2.setMonth(bgDate2.getMonth() - 3)
      let date = bgDate2.getFullYear() + '-' + (bgDate2.getMonth() + 1) + '-' + bgDate2.getDate()
      this.minDate = new Date(date)
      this.maxDate = new Date(val)
    }
  },
  computed: {
    disabledFlag () { //点击按钮的计算属性
      return !this.bgDate || !this.endDate
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    // 日期组件自定义格式
    formatter (type, value) {
      if (type === 'year') {
        this.value1 = value   // 可以拿到当前点击的数值
        return `${value}年`
      } else if (type === 'month') {
        this.value2 = value
        return `${value}月`
      }
      this.value3 = value
      return `${value}日`
    },
    onCancelDate () {
      this.showPickerDate = false
    },
    onConfirmDate () {
      console.log('date111--',this.value1)  // 数值来自日期组件自定义格式的方法回调
      console.log('date222--',this.value2)
      console.log('date333--',this.value3)
      this.bgDate = `${this.value1}-${this.value2}-${this.value3}`  // 字符串拼接 结果入2020-07-03
      this.onCancelDate()
    },
    onCancelDate1 () {
      this.showPickerDate1 = false
    },
    onConfirmDate1 () {
      this.endDate = `${this.value1}-${this.value2}-${this.value3}`
      this.onCancelDate1()
    },
    showLogType () {
      this.showPicker = true
    },
    // 取消选择账号
    onCancel () {
      this.showPicker = false
    },
    // 确认选择日志类型
    onConfirm (value, index) {
      this.logtype = value.text
      this.logflag = value.type
      this.onCancel()
    },
    // 显示查询日期
    showBeginDate () {
      this.showPickerDate = true
    },
    showEndDate () {
      this.showPickerDate1 = true
    },
    
  }
}
</script>

<style lang="scss" scoped>
 
</style>

// 对监听bgDate的理解
 bgDate: function (val) {
      if (val === '') {
        return
      }

      let bgDate1 = new Date(val)      // 假如val为选择的2020-07-03

      console.log('bg11---',bgDate1)     // bg11--- Fri Jul 03 2020 08:00:00 GMT+0800 (中国标准时间) 七月三日
      console.log('bm---',bgDate1.getMonth())      // bm--- 6 表示七月

      // 这里加3,是因为开发需求要求选择开始日期后,结束日期只能为四个月之间,不能超过四个月外,比如选择了2020-07-03,则结束日期的最大值为10月对应的日期
      bgDate1.setMonth(bgDate1.getMonth() + 3)  //设置具体的月份,这里是将月份设置在未来三个月后
     
      console.log('bg---',bgDate1)    // bg--- Sat Oct 03 2020 08:00:00 GMT+0800 (中国标准时间)  十月三日
      console.log('bm---',bgDate1.getMonth())    // bm--- 9 表示十月

      // 这里的bgDate1 是设置后的月份的日期
      let date = bgDate1.getFullYear() + '-' + (bgDate1.getMonth() + 1) + '-' + bgDate1.getDate()  
     
      this.minDate1 = new Date(val)     // 当前时间为最小值
      this.maxDate1 = new Date(date)    // 用设置后的月份取得的date对象设定最大值
    },

// 选择开始日期后,就决定了结束时间的最小值为开始的日期,最大值为设定后三个月的日期(+3)
// 同理,假如选择结束日期,则开始日期的最小值为设定前三个月的日期(-3),最大值为开始的日期

这样方便理解

<1>选择开始时间为2020-07-03,则结束时间的最大值为


image.png

选择开始时间为2020-07-03,则结束时间的最小值为


image.png

<2>选择结束时间为2020-07-03,则开始时间的最大值为


image.png

选择结束时间为2020-07-03,则开始时间的最小值为


image.png

关于日期月份的两个方法

setMonth() 方法用于设置月份。

dateObject.setMonth(month,day)
month   必需。一个表示月份的数值，该值介于 0（一月） ~ 11（十二月） 之间。
day         可选。一个表示月的某一天的数值，该值介于 1 ~ 31 之间（以本地时间计）。
//具体使用百度一下

getMonth() 方法可返回表示月份的数字。

dateObject.getMonth()
返回值
dateObject 的月份字段，使用本地时间。返回值是 0（一月） 到 11（十二月） 之间的一个整数。

二

按时间最长支持查询一年内的数据
页面如下


image.png

结构

<div class="filter-title">
        <div class="left-box">按时间</div>
        <div class="right-box add_title">
          <div class="new_left" @click="showBeginDate">
            <div>{{bgDate}}</div>
            <div class="right-arrow"></div>
          </div>
          <span></span>
          <div class="new_left" @click="showEndDate">
            <div>{{endDate}}</div>
            <div class="right-arrow"></div>
          </div>
        </div>
      </div>

<!--日期选择弹框-->
    <van-popup v-model="showPickerDate" position="bottom">
      <van-datetime-picker v-model="currentDate" type="date" @cancel="onCancelDate" @confirm="onConfirmDate" :min-date="minDate" :max-date="maxDate" :formatter="formatter" />
    </van-popup>
    <van-popup v-model="showPickerDate1" position="bottom">
      <van-datetime-picker v-model="currentDate1" type="date" @cancel="onCancelDate1" @confirm="onConfirmDate1" :min-date="minDate1" :max-date="maxDate1" :formatter="formatter" />
    </van-popup>

逻辑

data () {
    return {
      minDate: new Date(), // 开始日期起始值
      maxDate: new Date(), // 开始日期截止值
      minDate1: new Date(), // 结束日期起始值
      maxDate1: new Date(), // 结束日期截止值
      currentDate: new Date(),
      currentDate1: new Date(),
 }
}

// 在created阶段获取到当前时间并且确定一年前的今日作为最小日期
created () {
    this.minDate = this.getPassYearFormatDate() // 当前日期推前一年
    this.minDate1 = this.getPassYearFormatDate() // 当前日期推前一年
  },

methods: {
    // 一年前的日期
    getPassYearFormatDate () {
      let nowDate = new Date()
      let date = new Date(nowDate)
      date.setDate(date.getDate() - 365)
      return new Date(date.getFullYear(), date.getMonth(), date.getDate())
    },
   // 点击确认获取到选择的时间,确定开始时间后就可以以此作为结束日期的最小值
    onConfirmDate (val) {
      this.bgDate = utils.changeDate(val, 3)
      this.minDate1 = val // 设结束日期的开始值
      this.onCancelDate()
    },
   
    onConfirmDate1 (val) {
      this.endDate = utils.changeDate(val, 3)
      this.onCancelDate1()
    },

思路
  // 1.一开始设定当前时间的一年内(减去356天)作为两个下拉框的最小值
  // 2.点击确定开始时间,限定结束时间范围为选择的开始时间至结束时间的最大值
  // 3.开始时间和结束时间的最大值都是当前的时间new Date()
}

注意这种写法


image.png

时间处理的公共方法

/**
 * 转换日期格式，结果如20200308
 * @param time  时间格式，如new Date()
 * @param type  type为1则转换成yyyymmdd格式，type为2则转换成yyyymm格式, type为3时，转换为yyyy-mm-dd
 * @returns {string}
 */
const changeDate = (time, type) => {
  let temp_time = new Number(time)
  let temp_date = new Date(temp_time)
  let temp_year1 = ""
  let temp_month1 = ""
  let temp_day1 = ""
  if (type == 1) {
    temp_year1 = temp_date.getFullYear()
    temp_month1 = (temp_date.getMonth() + 1) > 9 ? (temp_date.getMonth() + 1) : "0" + (temp_date.getMonth() + 1)
    temp_day1 = (temp_date.getDate()) > 9 ? (temp_date.getDate()) : "0" + (temp_date.getDate())
    return temp_year1.toString() + temp_month1.toString() + temp_day1.toString()
  } else if (type == 2) {
    temp_year1 = temp_date.getFullYear()
    temp_month1 = (temp_date.getMonth() + 1) > 9 ? (temp_date.getMonth() + 1) : "0" + (temp_date.getMonth() + 1)
    return temp_year1.toString() + temp_month1.toString()
  } else if (type == 3) {
    temp_year1 = temp_date.getFullYear()
    temp_month1 = (temp_date.getMonth() + 1) > 9 ? (temp_date.getMonth() + 1) : "0" + (temp_date.getMonth() + 1)
    temp_day1 = (temp_date.getDate()) > 9 ? (temp_date.getDate()) : "0" + (temp_date.getDate())
    return temp_year1.toString() + '-' + temp_month1.toString() + '-' + temp_day1.toString()
  }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,033评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,725评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,473评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,846评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,848评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,691评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,053评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,700评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,856评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,430评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,034评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2赞 343