介绍
本篇文章给大家分享的是有关在vant中使用时间选择器实现结束时间和开始时间,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
& lt; template>
& lt; div类=發inesMigrate"祝辞
& lt; div类=癱onditionDiv"祝辞
& lt; div类=皊ingleCondition":@click=皊howPopupDateChooseStart"比;
& lt; div类=癲ateValueDiv",v=癮llDateStart"的在{{dateFormatterStart}} & lt;/div>
& lt; div类=癲ateValueDiv"v=? allDateStart":在{{dateFormatterStart}} & lt;/div>
& lt;/div>
& lt; div类=皊ingleCondition":@click=皊howPopupDateChoose"比;
& lt; div类=癲ateValueDiv",v=癮llDate"的在{{dateformat}} & lt;/div>
& lt; div类=癲ateValueDiv"v=? allDate":在{{dateformat}} & lt;/div>
& lt;/div>
& lt;/div>
& lt; !——选开始时间——比;
& lt; van-popup
v模型=皊howDateChooseStart"
位置=癰ottom"
:close-on-click-overlay=癴alse"
:
:覆盖→
& lt; div类=皃opupDate":比;
& lt; img alt=啊皊rc=https://www.yisu.com/zixun/assets/icon/downArrow.png closeDatePopStart“@click=:/>
选择最近一周
资产/图标/downArrow。png closeDatePop“@click=:/>
选择最新一天
<加载:isShow=" loadingState "/>
组件/共同/loading.vue’;//引入公共的加载组件
从“进口Vue Vue ';
从“vant”进口{弹出};
从“vant”进口{DatetimePicker};
Vue.use (DatetimePicker);
Vue.use(弹出);
出口默认{
名称:“行”,
安装(){//获取数据
this.loadingState=false;
this.initRequest ();
},
数据(){
返回{//资产/img/migrate2.png) +)没有重演中心”,
backgroundSize:“包含”
},//日期组件弹出层展示与否的标志——开始时间
showDateChooseStart:假的,//日期组件弹出层展示与否的标志
showDateChoose:假的,//资产/img/migratePopBackDate.png) +)没有重演”,
backgroundSize:“包含”
},//标准化未经处理的时间格式
dateChoose:新日期(),
dateChooseStart:新日期(),//处理过格式的日期数据
dateformat:“日期”,
allDate:没错,
dateFormatterStart:“日期”,
allDateStart:没错,
minDateStart:新日期(2019、8、1),//开始时间最小2019/9/01
maxDateStart:新日期()//开始时间最大当前时间
minDate:新日期()//最小时间必须》开始的最大时间maxDateStart
maxDate:新日期()//开始时间最大当前时间//控制加载中状态的标志
loadingState:真
};
},
方法:{//初始的请求方法
异步initRequest () {
this.chooseDateToday ();
this.chooseDateStart ();
},//展示日期弹出层——开始时间
showPopupDateChooseStart () {
这一点。showDateChooseStart=true;
},//展示日期弹出层——结束时间
showPopupDateChoose () {//设置结束时间的最小值
这一点。minDate=this.dateChooseStart;
这一点。showDateChoose=true;
},//关闭日期弹出层- - -开始时间
closeDatePopStart () {
这一点。showDateChooseStart=false;
this.dateFormatterStart=this.dateTransfor (this.dateChooseStart yyyy-MM-dd);//设置结束时间的最小值
这一点。minDate=this.dateChooseStart;
this.allDateStart=false;//this.loadingState=true;
},//关闭日期弹出层——结束时间
closeDatePop () {
这一点。showDateChoose=false;
this.dateFormatter=this.dateTransfor (this.dateChoose yyyy-MM-dd);//设置开始时间的最大值
这一点。maxDateStart=this.dateChoose;
this.allDate=false;//this.loadingState=true;
},//日期格式转换函数
dateTransfor(日期,格式){
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()//毫秒
};
如果(/(y +)/test(格式)){
格式=format.replace (RegExp。1美元,(date.getFullYear () + " ")。substr(长度)4 - RegExp。1.美元);
}
(让k的o) {
如果新的正则表达式(“(“+ k +”)”)。test(格式)){
格式=format.replace (RegExp。1美元,1.美元(RegExp。长度==1)& # 63;(o [k]):((“00”+ o [k])。substr ((" + o [k]) . length)));
}
}
返回格式;
},//选择时间函数,七天前
chooseDateStart () {
让昨天=new日期();
yesToday.setDate (yesToday.getDate () 7);
this.dateChooseStart=昨天;
this.dateFormatterStart=this.dateTransfor (this.dateChooseStart yyyy-MM-dd);
},//选择时间函数——今日
chooseDateToday () {
这一点。dateChoose=new日期();
this.dateFormatter=this.dateTransfor (this.dateChoose yyyy-MM-dd);
},//选择时间函数i=0今日
chooseDate (i) {
让昨天=new日期();
yesToday.setDate (yesToday.getDate () - i);
返回this.dateTransfor(昨天,“yyyy-MM-dd”);
},
},
组件:{
加载
}
};>