AntdesignVue中时间选择框校验和时间⼤⼩⽐较
表单元素设置初始值
Ant design Vue中时间选择框TimePicker设置初始值，效果如下：
使⽤v-decorator对表单元素绑定值的同时对必填项做校验，format是将时间显⽰格式为“时：分”，如果要时分秒格式可以写成format='HH:mm:ss'时间正则表达式java
<a-form :form='form'>
<a-time-picker v-decorator="['Time',validatorRules.Time]"format='HH:mm'/>
</a-form>
js代码如下：
import moment from'moment'//引⼊moment
export default{
data(){
return{
form:this.$ateForm(this),// 只有这样注册后，才能拿到表单数据
//⾃定义校验
validatorRules:{
Time:{
rules:[{ required:true, message:'请选择时间！'}],//设置必填
initialValue:moment('15:00','HH:mm')//设置时间初始值
}
}
}
},
methods:{
moment  //声明moment
}
}
官⽹中使⽤default-value来设置初始值，但是和v-decorator⼀起使⽤会报出警告
<a-time-picker :default-value="moment('15:00', 'HH:mm')" format="HH:mm"/>
时间格式转换
validateFields()⽅法校验并获取⼀组输⼊域的值，直接打印时间，发现并不是我们想要的格式
this.form.validateFields((err, values)=>{
if(!err){
//校验通过所执⾏代码
console.log(values.Time);
}
})
如下代码可以将时间转成字符串进⾏显⽰
let Time =moment(values.Time).format('HH:mm:ss');
console.log(Time);//15:00:00
时间⼤⼩⽐较
let time1 ="12:34:00";
let time2 ="13:12:56";
算法：通过正则表达式匹配字符串中的冒号，转换成2个6位数⽐较⼤⼩
let time1 ="12:34:00";
let time2 ="13:12:56";
let newTime1 = place(/:/g,'');//打印出来 "123400"
let newTime2 = place(/:/g,'');//打印出来 "131256"
if(newTime1 > newTime2 ){...}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。