在vant中使用时间选择器实现结束时间和开始时间

发布时间：2020-11-05 14:59:58

来源：亿速云

阅读：130

作者：Leah

本篇文章给大家分享的是有关在vant中使用时间选择器实现结束时间和开始时间，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

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

}

};

/*覆盖原有弹出层样式*/

.van-popup {

position: absolute;

background: transparent;

/*bottom: 3.01rem;*/

}

/*覆盖日期组件原有样式*/

.van-picker{

position: relative;

background-color: #fff;

user-select: none;

width: 100%;

}

/*筛选条件们的div样式*/

.conditionDiv{

display: flex;

justify-content: center;

width: 100%;

height: 3.7%;

margin-top: 4%;

}

/*单个筛选条件的样式*/

.singleCondition{

width: 27%;

margin-left: 2%;

margin-right: 2%;

/*border: 1px solid #451da4;*/

height: 100%;

/*padding-right: 5%;*/

color: #fff;

display: flex;

justify-content: center;

align-items: center;

/*flex-direction: column;*/

font-size: 0.72rem;

}

/*日期组件的div，由于其背景用icon而非整个背景图，因此样式上不同*/

.singleDateDiv{

width: 23%;

margin-left: 2%;

margin-right: 2%;

/*border: 1px solid #451da4;*/

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%;

}

/*日期弹出层中选择今天div样式*/

.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;

}

/*覆盖原有的选择器样式*/

.van-picker-column{

font-size: 0.9rem;

}

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

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

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

首先送上官网传送门：www.youzanyun.com/zanui/vant#…，具体的api可自行查阅使用。

第一步，安装：cnpm i vant -S

第二步，引入组件：

关于怎么引入Vant组件，有全局引入(非常不推荐)和按需引入两种方式

这里演示按需引入的方式，因为官网说的稍微有些复杂，对于一些刚接触的小伙伴，可能会造成一些误解(PS：我在刚开始接触的时候这里就蹲了两个坑，简直欲哭无泪呀~)。直接说怎么用吧：

为了方便我们按需引入组件，这里还需要安装一个插件cnpm i babel-plugin-import -D

安装好该插件好，还需要在.babelrc文件中plugins那里进行一个简单的配置，这里附上完整的plugins部分内容。这里我们在plugins数组中插入了import那个数组，其他内容是原来就有的。

"plugins": [

"transform-vue-jsx",

"transform-runtime",

["import", {

"libraryName": "vant",

"libraryDirectory": "es",

"style": true

}]

]

完成好配置后，在main.js中按需引入你需要的组件。例如这里引入Vant的button组件：

import { Button } from 'vant'; // 在mian.js中通过import导入组件，多个组件直接在{，，，}加入即可

Vue.use(Button); //让vue加载该组件如果还需要用其他组件，可以这样写Vue.use(Button).use().user();

默认按钮 // 在template中使用组件

这里提一点，如果是类似Toast这种组件，只需要在main.js中引入就好：

import { Toast } from 'vant';

// 然后在你需要的页面直接这样使用就好

// 只要引入后，vant就会自动把Toast组件挂在vue的原型上Vue.prototype.$Toast = Toast;

this.$Toast('message');

可以看到，这里button组件以及正常导入使用了。Vant中还有更多适合实际开发的功能更丰富的组件，小伙伴们自行查阅官方文档使用吧。

附官网API文档传送门：www.youzanyun.com/zanui/vant#…

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

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

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

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()"

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

v-model="currentDate"

type="datetime"

@confirm="confirm"

@change="change"

/>

// 这是对应的方法

methods: {

confirm(val) {

console.log(val) // 打印出了时间

},

change(e) {

console.log(e.getValues()) // 打印出了选中的时间，是个数组

}

}

以上就是在vant中使用时间选择器实现结束时间和开始时间，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。