我就废话不多说了，大家还是直接看代码吧~

<template> <div class="linesMigrate"> <div class="conditionDiv"> <div class="singleCondition" :style="conditonStyle2" @click="showPopupDateChooseStart"> <div class="dateValueDiv" v-if="allDateStart">{{dateFormatterStart}}</div> <div class="dateValueDiv" v-if="!allDateStart" :style="{ fontSize:'0.72rem' }">{{dateFormatterStart}}</div> </div> <div class="singleCondition" :style="conditonStyle2" @click="showPopupDateChoose"> <div class="dateValueDiv" v-if="allDate">{{dateFormatter}}</div> <div class="dateValueDiv" v-if="!allDate" :style="{ fontSize:'0.72rem' }">{{dateFormatter}}</div> </div> </div> <!-- 选开始时间 --> <van-popup v-model="showDateChooseStart" position="bottom" :close-on-click-overlay="false" :style="{ height: '22rem',position: 'absolute',bottom:'3rem' }" :overlay-style="{ position: 'absolute', bottom: '3rem', top: 'auto', background: 'rgba(0, 0, 0, 0.298039215686275)' }"> <div class="popupDate" :style="bgDateImgStyle"> <img alt="..." src="../../assets/icon/downArrow.png" @click="closeDatePopStart" :style="{ marginBottom: '16%',width:'10%',marginTop:'7.7%',opacity:0 }" /> <van-datetime-picker :show-toolbar="false" v-model="dateChooseStart" type="date" :min-date="minDateStart" :max-date="maxDateStart" /> <div class="chooseTodayDiv" @click="chooseDateStart">选择最近一周</div> </div> </van-popup> <!-- 选结束时间 最近一天 --> <van-popup v-model="showDateChoose" position="bottom" :close-on-click-overlay="false" :style="{ height: '22rem',position: 'absolute',bottom:'3rem' }" :overlay-style="{ position: 'absolute', bottom: '3rem', top: 'auto', background: 'rgba(0, 0, 0, 0.298039215686275)' }"> <div class="popupDate" :style="bgDateImgStyle"> <img alt="..." src="../../assets/icon/downArrow.png" @click="closeDatePop" :style="{ marginBottom: '16%',width:'10%',marginTop:'7.7%',opacity:0 }" /> <van-datetime-picker :show-toolbar="false" v-model="dateChoose" type="date" :min-date="minDate" :max-date="maxDate" /> <div class="chooseTodayDiv" @click="chooseDateToday">选择最新一天</div> </div> </van-popup> <Loading :isShow="loadingState" /> </div></template> <script> import Loading from '../../components/common/loading.vue';// 引入公共的loading组件 import Vue from 'vue'; import { Popup } from 'vant'; import { DatetimePicker } from 'vant'; Vue.use(DatetimePicker); Vue.use(Popup); export default { name: 'lines', mounted() { // 获取数据 this.loadingState=false; this.initRequest(); }, data() { return { // 时间选择背景样式数据 conditonStyle2: { background: "url(" + require("../../assets/img/migrate2.png") + ") no-repeat center", backgroundSize: "contain" }, // 日期组件弹出层展示与否的标志 --开始时间 showDateChooseStart:false, // 日期组件弹出层展示与否的标志 showDateChoose:false, // 弹出层背景图片 bgDateImgStyle: { background: "url(" + require("../../assets/img/migratePopBackDate.png") + ") no-repeat", backgroundSize: "contain" }, // 标准化未经处理的时间格式 dateChoose: new Date(), dateChooseStart: new Date(), // 处理过格式的日期数据 dateFormatter:"日期", allDate:true, dateFormatterStart:"日期", allDateStart:true, minDateStart: new Date(2019,8,1), // 开始时间最小2019/9/01 maxDateStart: new Date(), // 开始时间最大 当前时间 minDate: new Date(), //最小时间必须 》开始的最大时间maxDateStart maxDate: new Date(), // 开始时间最大 当前时间 // 控制加载中状态的标志 loadingState:true }; }, methods: { // 初始的请求方法 async initRequest(){ this.chooseDateToday(); this.chooseDateStart(); }, // 展示日期弹出层--开始时间 showPopupDateChooseStart() { this.showDateChooseStart = true; }, // 展示日期弹出层 --结束时间 showPopupDateChoose() { // 设置结束时间的最小值 this.minDate = this.dateChooseStart; this.showDateChoose = true; }, // 关闭日期弹出层 ---开始时间 closeDatePopStart(){ this.showDateChooseStart = false; this.dateFormatterStart=this.dateTransfor(this.dateChooseStart,"yyyy-MM-dd"); // 设置结束时间的最小值 this.minDate = this.dateChooseStart; this.allDateStart=false; // this.loadingState=true; }, // 关闭日期弹出层 --结束时间 closeDatePop(){ this.showDateChoose = false; this.dateFormatter=this.dateTransfor(this.dateChoose,"yyyy-MM-dd"); // 设置开始时间的最大值 this.maxDateStart = this.dateChoose; this.allDate=false; // this.loadingState=true; }, // 日期格式转换函数 dateTransfor(date,format){ var o = { "M+" : date.getMonth()+1, //月份 "d+" : date.getDate(), //日 "h+" : date.getHours(), //小时 "m+" : date.getMinutes(), //分 "s+" : date.getSeconds(), //秒 "q+" : Math.floor((date.getMonth()+3)/3), //季度 "S" : date.getMilliseconds() //毫秒 }; if(/(y+)/.test(format)) { format=format.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length)); } for(let k in o) { if(new RegExp("("+ k +")").test(format)){ format = format.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); } } return format; }, // 选择时间函数 -- 七天前 chooseDateStart(){ let yesToday=new Date(); yesToday.setDate(yesToday.getDate()-7); this.dateChooseStart=yesToday; this.dateFormatterStart=this.dateTransfor(this.dateChooseStart,"yyyy-MM-dd"); }, // 选择时间函数 -- 今日 chooseDateToday(){ this.dateChoose= new Date(); this.dateFormatter=this.dateTransfor(this.dateChoose,"yyyy-MM-dd"); }, // 选择时间函数 i=0今日 chooseDate(i){ let yesToday=new Date(); yesToday.setDate(yesToday.getDate()-i); return this.dateTransfor(yesToday,"yyyy-MM-dd"); }, }, components: { Loading } };</script><style scoped> .van-popup { position: absolute; background: transparent; } .van-picker{ position: relative; background-color: #fff; user-select: none; width: 100%; } .conditionDiv{ display: flex; justify-content: center; width: 100%; height: 3.7%; margin-top: 4%; } .singleCondition{ width: 27%; margin-left: 2%; margin-right: 2%; height: 100%; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 0.72rem; } .singleDateDiv{ width: 23%; margin-left: 2%; margin-right: 2%; height: 100%; color: #fff; padding-right: 5%; display: flex; justify-content: flex-start; } .dateValueDiv{ display: flex; justify-content: center; flex-direction: column; font-size: 0.72rem; width: 82%; } .chooseTodayDiv{ box-sizing: border-box; z-index: 2; display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; color: red; height: 3rem; width: 90%; background: #fff; border-top: 1px solid lightgrey; font-size: 0.875rem; } .popupDate { border-radius: 2px; background: #fff; height: 100%; width: 90%; margin: 0 auto; } </style><style> .van-picker-column{ font-size: 0.9rem; }</style>

补充知识：Vant库的使用，及日期组件的一些注意点

Vant库对于开发商城类项目，真的是非常nice，会让你情不自禁爱上它。Vant库支持按需加载、为移动端商城设计的风格，非常完美。但是，本人在实际开发中，也遇到了一些小问题，折腾了老半天，最终得以解决。

下面先说说在vue中使用Vant库的流程及一些注意事项，以及遇到的坑和解决办法。

首先送上官网传送门：/zanui/vant#…

最后，在说一个关于Vant日期组件使用时所遇到的一个大坑。

Vant日期组件的官网api没有给出关于事件函数的使用demo，到时小编在使用时不小心迈进了一个大坑。

就是change或者confirm事件时，怎么都获取不到回调参数，即在点击确定时回去不到返回的选中时间，总是提示undefined或者null。下面是小编错误的写法，大家不要踩坑：

<!--这是html部门--><van-datetime-picker v-model="currentDate" type="datetime" @confirm="confirm()" @change="change()" /> // 这是对应的方法methods: { confirm(val) { console.log(val) }, change(e) { console.log(e.getValues()) }}

乍一看，是按照文档上说的方式使用的呀，可是不仅confirm没有返回选中的日期时间，change事件的各种回调方式也使用不了。

但是吧，如果你要打印1，又可以打印出来，说明接口走这个方法了。

到底怎么回事呢，选中的时间怎么就出不来呢？小编差点都要怀疑是不是这个Vant组件有问题了！

说重点：后来小编终于找到了解决办法：

原来是这里出了问题，@confirm="confirm()" @change="change()"

这里多加了一对括号，正确的写法是

<!--这是html部分--><van-datetime-picker v-model="currentDate" type="datetime" @confirm="confirm" @change="change" /> // 这是对应的方法methods: { confirm(val) { console.log(val) // 打印出了时间 }, change(e) { console.log(e.getValues()) // 打印出了选中的时间，是个数组 }}

到这，问题圆满解决了！

以上这篇vant 时间选择器--开始时间和结束时间实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。