vant时间控件,vant日期选择
这篇文章主要为大家详细介绍了基于Vant UI框架实现时间段选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vant UI框架实现时间段选择器的具体代码，供大家参考，具体内容如下
组件代码如下：
模板
厢式货车搬运工
:title=title
:show-toolbar=showToolbar
：列="列"
@confirm=onConfirm
@cancel=onCancel
@change=onChange
：确认按钮文本=确认按钮文本
:cancel-button-text=取消按钮文本
:loading=loading
:readonly=readonly
:item-height=itemHeight
:visible-item-count=“可见项目计数”
:swipe-duration=swipeDuration
模板槽=默认
插槽名称=默认/插槽
/模板
模板槽=标题
插槽名称=标题/插槽
/模板
模板槽=确认
插槽名称=确认/插槽
/模板
模板槽=取消
插槽名称=取消/插槽
/模板
模板槽=选项
插槽名称=选项/插槽
/模板
模板slot=columns-top
slot name=columns-top/slot
/模板
模板槽=列-底部
插槽名称=列-底部/插槽
/模板
/货车搬运工
/模板
脚本
从“vue”导入某视频剪辑软件
从"万特"导入{字段、选取器、弹出菜单}。
Vue.use(字段)。使用（选取器)。使用（弹出);
导出默认值{
姓名： VanDatePicker ，
道具：{
值：{
类型：日期，
默认值：()=新日期()
},
日期：{
类型：日期，
默认值：()=新日期（新日期()。getFullYear()-5，0，1)
},
最大日期：{
类型：日期，
默认值：()=新日期（新日期()。getFullYear() 5，0，1)
},
showToolbar: {
类型：布尔型，
默认值：()=false
},
标题：{
类型：字符串，
默认值：()=
},
confirmButtonText: {
类型：字符串，
默认值：()=确认
},
取消按钮文本：{
类型：字符串，
默认值：()=取消
},
正在加载：{
类型：布尔型，
默认值：()=false
},
只读：{
类型：布尔型，
默认值：()=false
},
项目高度：{
类型：数字 字符串，
默认值：()=44
},
visibleItemCount: {
类型：数字 字符串，
默认值：()=6
},
swipeDuration: {
类型：数字 字符串，
默认值：()=1000
},
},
data() {
返回{
蒙瑟尔：[01 , 02 , 03 , 04 , 05 , 06 , 07 , 08 , 09 , 10 , 11 , 12],
dayArr: [01 ， 02 ， 03 ， 04 ， 05 ， 06 ， 07 ， 08 ， 09 ， 10 ， 11 ， 12 ， 13 ， 14 ， 15 ， 16 ， 17 ， 18 ， 19 ， 20 ， 21 ， 22 ， 23 ， 24 ， 25 ， 26 ， 27 ， 28 ， 29 ， 30 ]，
};
},
计算值：{
列：函数(){
让最小年=这个。mindate。获取整年()；
设maxYear=this。最大日期。获取整年()；
让年份=这个。价值。获取整年()；
让月=这个。价值。getmonth()；
假设day=this。价值。getdate()；
设年份arr=[]；
设I=0；
while (i maxYear - minYear 1) {
年度安排。un shift((maxYear-I)“”)；
我；
}
let columns=[
{
值：yearArr，
默认索引：数学。楼层(年)-最小年
},
{
值：this.monthArr，
defaultIndex: Math.floor(月)
},
{
价值观：this.dayArr，
defaultIndex: Math.floor(第一天)
},
{
值：[-]
},
{
值：yearArr，
默认索引：数学。楼层(年)-最小年
},
{
值：this.monthArr，
defaultIndex: Math.floor(月)
},
{
价值观：this.dayArr，
defaultIndex: Math.floor(第一天)
},
];
返回列
}
},
观察：{
},
方法：{
onConfirm(值，索引){
//console.log(`当前值：${value}，当前索引：$ { index } `)；
这个. emit(confirm ，value，index)；
},
onChange(选取器、值、索引){
//console.log(`当前值：${value}，当前索引：$ { index } `)；
让这个=这个
让敏月=这个。mindate。getmonth()；
让minDay=这个。mindate。getdate()；
设maxMonth=this。最大日期。getmonth()；
设maxDay=this。最大日期。getdate()；
设d=新日期（值[0],值[1],0);
setDate(0)；
setDate(4)；
函数设置日期{
//最小年份
if(value[I]-0===_ this。mindate。获取整年()){
picker.setColumnValues(i 1，_ this。蒙塔尔。slice(最小月份))；
设str minm=
如果(最小月9日){
strMinM=0 (最小月份1)
}否则{
strMinM=strMinM 1 "
}
picker.setColumnValue(i 1，value[i 1]-1minMonth？strmin:value[I 1])；
if(index===ivalue[I 1]-1分月){
picker.setColumnValues(i 2，_this.dayArr.slice(minDay-1，d . getdate()))；
picker.setColumnValue(i 2，value[i 2]minDay？明迪。tostring():value[I ^ 2])；
}否则{
if(value[I 1]-1===_ this。mindate。getmonth()){
picker.setColumnValues(i 2，_this.dayArr.slice(minDay-1，d . getdate()))；
picker.setColumnValue(i 2，value[i 2]minDay？明迪。tostring():value[I ^ 2])；
}否则{
picker.setColumnValues(i 2，_this.dayArr.slice(0，d . getdate()))；
picker.setColumnValue(i 2，value[i 2]d.getDate()？d.getDate().tostring():value[I ^ 2])；
}
}
}
//最大年份
else if(value[I]-0===_ this。最大日期。获取整年()){
picker.setColumnValues(i 1，_this.monthArr.slice(0，最大月份1))；
设strManM=
if (maxMonth9) {
strManM=0 (最大月份1)
}否则{
strManM=maxMonth 1
}
picker.setColumnValue(i 1，value[i 1]-1maxMonth？strManM:value[I 1])；
if(index===ivalue[I 1]-1最大月份){
picker.setColumnValues(i 2，_this.dayArr.slice(0，maxDay))；
picker.setColumnValue(i 2，value[i 2]maxDay？maxday。tostring():value[I ^ 2])；
}否则{
if(value[I 1]-1===_ this。最大日期。getmonth()){
picker.setColumnValues(i 2，_this.dayArr.slice(0，maxDay))；
picker.setColumnValue(i 2，value[i 2]maxDay？maxday。tostring():value[I ^ 2])；
}否则{
picker.setColumnValues(i 2，_this.dayArr.slice(0，d . getdate()))；
picker.setColumnValue(i 2，value[i 2]d.getDate()？d.getDate().tostring():value[I ^ 2])；
}
}
}
//其他年份
否则{
picker.setColumnValues(i 1，_ this。mont harr)；
picker.setColumnValue(i 1，value[I 1])；
picker.setColumnValues(i 2，_this.dayArr.slice(0，d . getdate()))；
picker.setColumnValue(i 2，value[i 2]d.getDate()？d.getDate().tostring():value[I ^ 2])；
}
}
让finally val=picker。获取值()；
设len=数学。地板(最终值。长度/2)；
//开始时间不大于结束时间
if (finallyVal.slice(0，len).join("")finally val。切片(镜头1).加入(" " {
picker.setValues([.finallyVal.slice(0，len)，-，finallyVal.slice(0，len)])；
如果(新日期(finallyVal.slice(0，len)).联接(-) 00:00:00 )。getTime()===this。最大日期。getTime()){
控制台。日志(111)；
picker.setColumnValues(5，_this.monthArr.slice(0，最大月份1))；
picker.setColumnValues(6，_this.dayArr.slice(0，maxDay))；
}
}
这个emit(change ，picker，finallyVal，index)；
},
onCancel() {
//console.log(取消);
这个. emit(" cancel ")；
},
},
}
/脚本
样式范围
/风格
调用演示
模板
差异
范菲尔德
只读的
可点击的
标签=时间段
:value=value
占位符=选择时间段
@click=showPicker=true
/
van-popup v-model=显示提货人 round position= bottom
货车式约会采摘机
显示-工具栏
v-model=当前日期
title=选择时间段
：最小日期=minDate
：最大日期=最大日期
@cancel=showPicker=false
@confirm=onConfirm
@change=onChange
/凡-日期选取器
/van-popup
/div
/模板
脚本
从" @/components/VanDatePicker "导入VanDatePicker
导出默认值{
名称："测试",
组件：{VanDatePicker}，
data() {
返回{
值： ,
显示选择器：假，
minDate:新日期(2010年5月15日),
最大日期：新日期(2025,10,15),
当前日期：新日期(),
开始日期： ,
结束日期： ,
};
},
已安装(){
},
方法：{
onConfirm(值，索引){
控制台。日志(` o当前值：${value}，当前索引：$ { index } `)；
this.startDate=value.slice(0，3).join(-)；
this.endDate=value.slice(4，7).join(-)；
this.value=this.startDate 至这个。结束日期；
this.showPicker=false
},
onChange(选取器、值、索引){
控制台。日志(` o当前值：${value}，当前索引：$ { index } `)；
},
},
}
/脚本
样式范围
/风格
用户界面示例
API:注意红色划掉的没有实现
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。