Ant design Vue中时间选择框校验和时间大小比较_萌萌哒小可爱啦的博客-程序员宅基地

技术标签： Ant design vue JavaScript Vue javascript

表单元素设置初始值

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 ) {
     ... }

本文链接：https://blog.csdn.net/qq_43576662/article/details/118517944

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Mycat 配置详解_小_白_白的博客-程序员宅基地_mycat配置详解

1.1 需求把商品表分片存储到三个数据节点上。 1.2 安装环境分析两台mysql数据库服务器：Host1：192.168.25.134Host2：192.168.25.166 host1环境操作系统版本 : centos6.4数据库版本 : mysql-5.6mycat版本：1.4 release数据库名 : db1、db3 mysql节点2环境操作系统版本 : centos6.4数

android 自定义span_Android ImageSpan（修改版本自定义ReplacementSpan实现）给文字设置圆角背景并且文字居中，背景居中。..._weixin_39854951的博客-程序员宅基地

public class RadiusBackgroundSpan extends ReplacementSpan {private int mColor;private int mTvColor;private int mTvSize;/*** @param color 背景颜色* @param tvColor 需要改变文字颜色吗* @param tvSize 需要改变文字大小吗*/publ...

关于Failed to load plugin ‘vue‘ declared in ‘.eslintrc.js‘: createRequire is not a function报错处理_weixin_54380722的博客-程序员宅基地

关于Failed to load plugin ‘vue‘ declared in ‘.eslintrc.js‘: createRequire is not a function报错处理前提：vscode安装了Eslint插件，脚手架初始化项目时勾选了eslint。配置setting.json（打开vscode->输入setting.json->打开编辑）添加如下配置：//"eslint.autofixonsave":true 这是旧版的了，采用下面的"source.fixAll

python函数手册 stata_python函数参数与文档_weixin_39794385的博客-程序员宅基地

函数参数1.位置参数定义形式：deffunc(p1, p2, ...):pass实例：#位置参数，调用时传入的实参必须与形参一一对应（包括个数与位置）defintroduce(name, age):print("I am {0}, and I am {1} years old.".format(name, age))introduce("zhangsan", 18)运行结果：I am zhangs...

米家机扫拖机器人说明书_米家扫拖机器人G1体验：智能线路规划清扫更彻底_摸鱼的月鸪的博客-程序员宅基地

米家扫拖机器人G1体验：智能线路规划清扫更彻底2020年05月08日 10:36作者：李军工编辑：李军工文章出处：泡泡网原创分享随着扫地机的兴起，日常的地板清洁已经可以交给机器人来完成，让我们从家务中解放出来。今天给大家介绍一款米家全新推出的扫拖机器人G1，这款扫地机扫拖一体，清洁地板的效果非常不错。米家扫拖机器人G1售价非常便宜，目前售价999元，是千元内最值得推荐的扫地机之一。米家扫拖机器人...

Ubuntu Unable to run mksdcard SDK tool 解决办法_紫雾凌寒的博客-程序员宅基地

Ubuntu 安装android studio时遇到Unable to run mksdcard SDK tool.非常简单：是因为缺少库，在终端输入sudo apt-get install lib32z1 lib32ncurses5 lib32stdc++6即可解决问题