vue 日期选择,vue时间选择控件
这篇文章主要介绍了某视频剪辑软件自定义验证之日期时间选择器详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
Vue自定义验证之日期时间选择器今日需求期望效果干货效果某视频剪辑软件项目时间选择器超文本标记语言里面射流研究…里面
Vue自定义验证之日期时间选择器
自定义验证今日需求期望效果干货值格式效果推荐
今日需求
查询条件中 当开始时间 和 结束时间 一致时 提示结束时间大于开始时间
期望效果
干货
El-form:inline= true :rules= rules
El-表单-项目标签=创建时间prop= create time class= create-time-item
埃尔-日期选择器
v-model=createTime
值-格式=yyyy-MM-dd hh:mm:ss
type=datetimerange
范围分隔符=至
start-placeholder=开始日期
end-placeholder=结束日期
/El-日期选择器
/El-表单-项目
/el格式
导出默认值{
data () {
//自定义验证规则
var createTimeCheck=(rule，value，callback)={
if (value===) {
回调()//回调函数
}否则{
让创建时间开始=此。创造时间？this.createTime[0] : //从数组中取出开始时间取出结果：2020-10-28 16:01:15
让创造时间结束=这个。创造时间？this.createTime[1] : //取出结束时间
设sTime=(((创建时间开始。split())[1]).拆分(:))。join(" "//从2020-10-28 16:01:15 取出时间结果：160115
设sDate=(((创建时间开始。split())[0]).拆分("-")。join(" "//取出开始日期结果：20201028
let end time=(((创建时间结束。split())[1]).拆分(:))。join(" "//取出结束时间
let end date=(((创建时间结束。split())[0]).拆分("-")。join(" "//取出结束日期
if(parse int(end date)parse int(sDate)){//如果结束日期大于开始日期不用判断时间
回调()
}否则{
if(parse int(end time)=parse int(sTime)){//如果结束日期不大于开始日期判断结束时间是否大于开始时间
回调（新错误(结束日期必须大于开始日期))
}否则{
回调()
}
}
}
}
返回{
创建时间： ,//表单时间双向绑定值
规则：{ //调用创建时间检查验证
创建时间：[
{验证程序：创建时间检查，触发器：模糊 }
]
}
}
}
value-format
效果
注意看当结束日期比开始日期小时开始日期自动与结束日期同步，所以结束日期永远大于等于开始日期
vue项目时间选择器
vue项目时间选择器 设置结束时间不能早于开始时间，开始时间不能晚于结束时间html里面：js里面
设置结束时间不能早于开始时间，开始时间不能晚于结束时间
html里面
El-表单-项目标签=发布时间：
form_item表单_内容
差异
El-date-picker style= width:180 px；v-model= timer start :picker-options= pickeroptionstart type= date placeholder=开始日期/El-日期选择器
/div
div style= margin:0 15px；-/div
差异
El-date-picker style= width:180 px；v-model= time rend :picker-options= pickerOptionsEnd type= date placeholder=结束日期/El-日期选择器
/div
/div
/El-表单-项目
js里面
脚本
导出默认值{
data() {
返回{
定时器启动： ,//开始日期选择
时间趋势： ,//结束日期选择
//设置结束时间不能早于开始时间
pickeroptionstart:{
禁用日期：时间={
常量结束日期值=新日期(this.timerEnd).getTime()；
if (endDateVal) {
返回时间。gettime()结束日期值1；
}
}
},
pickerOptionsEnd: {
禁用日期：时间={
const beginDateVal=新日期(this.timerStart).getTime()；
if (beginDateVal) {
返回时间。gettime()开始日期值1；
}
}
}
};
}
}
},
/脚本
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。