vant时间组件,vant日历组件
这篇文章主要为大家详细介绍了栈时间控件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了栈时间控件的使用方法，供大家参考，具体内容如下
代码：
模板
div class=首款
！-头部公共搜索框-
tabbar title=添加团队活动/tabbar
div class=con
范电池组
van-field v-model= name clear able label=活动名称占位符=请选择活动名称 /
van-field v-model=开始时间可清除标签=开始时间占位符=请输入开始时间@focus=start /
van-field v-model=结束时间可清除标签=结束时间占位符=请输入结束时间@focus=end /
/货车单元组
范电池组
范菲尔德
v-model=消息
行数=2
自动调整大小
标签=活动详情
type=textarea
maxlength=50
占位符=请输入
显示字数限制
/
/货车单元组
/div
van-button type= primary size= large @ click= add 确认添加/货车按钮
！-开始时间控件-
van-popup v-model=显示位置=底部
货车日期时间选择器
v-model=当前日期
type=datetime
：最小日期=minDate
：最大日期=最大日期
@confirm=confirm
@cancel=cancel
:formatter=formatter
/
/van-popup
！-结束时间控件-
van-popup v-model= show 1 位置= bottom
货车日期时间选择器
v-model=当前日期1
type=datetime
：最小日期=minDate
：最大日期=最大日期
@confirm=confirm1
@cancel=cancel1
:formatter=formatter
/
/van-popup
/div
/模板
脚本
从导入标签栏././components/navbar ；
导出默认值{
data() {
返回{
名称： ,//活动名称
消息： ,//活动详情
show: false，//开始时间弹窗
show1: false，//结束时间弹窗
minHour: 10，
maxHour: 20，
minDate:新日期(),
最大日期：新日期(2020,11,31),
当前日期：新日期(),//开始标准时间
当前日期1:新日期(),//结束标准时间
开始时间： ,//开始时间
开始时间1: ,//开始时间时间戳
结束时间： ,//结束时间
结束时间1: //结束时间时间戳
};
},
组件：{
标签栏
},
已安装(){},
方法：{
//选择开始时间
start() {
this.show=true
},
//选择结束时间
end() {
this.show1=true
},
//点击确定
确认(){
this.show=false
this.starttime=
this.currentDate.getFullYear()
年
(号(这个。当前日期。getmonth())1)
月
this.currentDate.getDate()
日
this.currentDate.getHours()
:
这个。当前日期。get minutes()；
this.starttime1=新日期(this.currentDate).getTime()/1000；
},
//点击取消
取消(){
this.show=false
},
确认1() {
this.show1=false
this.endtime=
this.currentDate1.getFullYear()
年
(号(这个。当前日期1。getmonth())1)
月
this.currentDate1.getDate()
日
this.currentDate1.getHours()
:
这个。当前日期1。get minutes()；
this.endtime1=新日期(this.currentDate1).getTime()/1000；
},
取消1() {
this.show1=false
},
//处理控件显示的时间格式
格式化程序（类型，值){
//格式化选择器日期
if (type===year) {
返回" ${ value }年`;
} else if (type===month) {
返回" ${ value }月`;
} else if (type===day) {
返回" ${ value }日`;
} else if (type===hour) {
返回" ${ value }时`;
} else if (type===minute) {
返回" ${ value }分`;
}
返回值；
},
//点击添加按钮
add() {
如果（
！this.name.trim()
！this.starttime.trim()
！this.starttime.trim()
！this.message.trim()
) {
这个$吐司(’请输入完整的活动信息);
}否则{
this.axios。post(/API/agent _ team/add team activity ，{
活动名称：this.name
活动内容：this.message，
start_time: this.starttime1，
end_time: this.endtime1
})。然后(数据={
这个$吐司(’添加活动成功);
setTimeout(()={
这个1000美元路由器。go(-1)；
}, 1000);
});
}
}
}
};
/脚本
style lang=less 范围。首款
填充顶部：44px。货车按钮-大号
宽度：92%;
左边距：4%;
最高利润率：25%;
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。