Ant design Vue中时间选择框校验和时间大小比较

表单元素设置初始值

Ant design Vue中时间选择框TimePicker设置初始值，效果如下：

使用v-decorator对表单元素绑定值的同时对必填项做校验，format是将时间显示格式为“时:分”，如果要时分秒格式可以写成format='HH:mm:ss'

<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.$form.createForm(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 = time1.replace(/:/g, '');	//打印出来 "123400"
	let newTime2 = time2.replace(/:/g, '');	//打印出来 "131256"
	if(newTime1 > newTime2 ) { ... }