vue日期时间选择器,vue时间选择控件
这篇文章主要介绍了某视频剪辑软件日期选择框之时间范围的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
vue日期选择框之时间范围实现效果如下某视频剪辑软件日期控件解析以上模板视图层脚本逻辑层
vue日期选择框之时间范围
实现效果如下
a-col:XL= 8 :LG= 16 :MD= 24 :sm= 32
表单项目标签=时间
范围选择器
style=width: 350px
v-model=查询参数。创建时间范围
:disabled-time=“禁用范围时间”
:show-time={
hidedisableoptions:true，
defaultValue: [moment(00:00:00 ， HH:mm:ss )，moment(23:59:59 ， HH:mm:ss)]，
}
format=YYYY-MM-DD HH:mm:ss
:placeholder=[开始时间, 结束时间]
@change=onDateChange
@ok=onDateOk
/
/a表单项目
/a列
1:引入格式化工具
从"时刻"导入时刻
2:给默认值
queryParam:{
createTimeRange:[
时刻（新日期（新日期（新日期()。toLocaleDateString()).getTime())， YYYY-MM-DD HH:mm:ss )，
时刻（新日期（新日期（新日期()。toLocaleDateString()).getTime() 24 * 60 * 60 * 1000 - 1)， YYYY-MM-DD HH:mm:ss )
]
},
3:方法书写的方法
方法：{
瞬间，
//时间相关函数开始
onDateChange: function (value，dateString) {
console.log(dateString[0]，dateString[1])；
这个。查询参数。开始时间=dateString[0]；
这个。查询参数。end time=dateString[1]；
},
onDateOk(值){
console.log(值);
},
范围（开始，结束){
const result=[]；
对于(设i=开始我结束；i ) {
结果。推(一)；
}
返回结果；
},
disabledRangeTime(_，type) {
if (type===start) {
返回{
禁用时间：()=this.range(0，60).接头(60,60),
禁用分钟：()=这个。范围(0，60).接头(60,60),
禁用秒数：()=this。范围(0，60).接头(60,60),
};
}
返回{
禁用时间：()=this.range(0，60).接头(60,60),
禁用分钟：()=这个。范围(0，60).接头(60,60),
禁用秒数：()=this。范围(0，60).接头(60,60),
};
},
//时间相关函数目标
}
vue日期控件解析
El-表单-项目标签=有效期限
el-col :span=6
埃尔-表单-项目
埃尔-日期选择器
type=date
占位符=选择日期
值-格式=yyyy-MM-dd 00:00:00
v-model=有效启动时间
:picker-options= pickeroptionstart
/El-日期选择器
/El-表单-项目
/el-col
El-col class= line :span= 2 -/El-col
el-col :span=6
埃尔-表单-项目
埃尔-日期选择器
占位符=选择日期
值-格式=yyyy-MM-dd 00:00:00
v-model=有效时间
:picker-options= pickerOptionsEnd
/El-日期选择器
/El-表单-项目
/el-col
/El-表单-项目
以上template视图层
返回{
有效时间： ,
有效时间： ,
pickeroptionstart:{
//开始有效期
禁用日期：(时间)={
if (this.effectiveEntTime) {
return time.getTime()新日期(this.effectiveEntTime).getTime()；
}
},
},
pickerOptionsEnd: {
//结束有效期
禁用日期：(时间)={
if (this.effectiveStartTime) {
返回（
time.getTime() - 3600 * 1000 * 24
新日期(this.effectiveStartTime)。getTime() - 86400000
date . now()-3600 * 1000 * 24 time . gettime()
);
}
},
},
};
script 逻辑层
影响
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。