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";

算法:通过正则表达式匹配字符串中的冒号,转换成26位数比较大小

	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 ) {
     ... }
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: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-&gt;输入setting.json-&gt;打开编辑)添加如下配置://"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即可解决问题

随便推点

字节跳动面试题.二叉树最左下节点、二叉树最左节点、二叉树每行最左边节点_ccluqh的博客-程序员宅基地_二叉树最左边节点

二叉树最左下节点、二叉树最左节点:二叉树每行最左边节点方法一:# Definition for a binary tree node.# class TreeNode(object):# def __init__(self, x):# self.val = x# self.left = None# self....

C++菜鸟常见错误整理(第二天)_hello白白的博客-程序员宅基地

本人目前还是学生,能力有限,有不足或者错误的地方欢迎大家指正,谢谢大家!1、强制类型转换     (int)((double)9/2)-1即double 9,把9转换成double,然后/2,然后-1,最后强制转换成int2、关于switch循环     int k=1,c=0;  switch(k)  {default:c+=k;  case 2:c++;break;  }由于d

2018.9.22 ACM训练 CCPC北京 [email protected]的博客-程序员宅基地

网络赛的画风都略有奇怪但是我们发挥的更差了话说网络赛没有题解真是气人!题目I 是道好题,但是莫名奇妙T了给出一些子串,求将它们顺次排列后序列,使相邻串lcp的字典序。做法: 后缀树+虚树+树形dp考场上没有想到dp的思想把每个子树中的序列按字典序排序后合并起来。分隔符是这个点的val。启发式合并保证复杂度。当时写的奇奇怪怪的贪心细节很多没有考虑全面,调了很久也没有调出来。把代码粘...

初学flex时候搞得一个大头贴工具(开源)_weixin_33907511的博客-程序员宅基地

刚学flash时候写得代码不是太好  不过大头贴得功能是具备了  基本上网上得flex大头贴工具应该都这么开发得不过可以供一些新手参考一下    哈哈哈  在下其实也是新手 共同学习了代码下载...

OSPF是应用在局域网中还是广域网中?_百哥3230的博客-程序员宅基地_ospf什么情况下用到

作者:百哥本期分享:系列15点到16点半-技术热讯感谢大家关注-百哥,请大家持续关注就可以了哦!众元教育技术公开课:更多认证知识众元教育技术交流裙:414605852从几个百哥参与的项目来说吧1、ospf既可以用在局域网,也可以用在广域网2、是否要用ospf,和局域网、广域网没有关系。使用ospf的案例1、某大学局域网用了ospf,网络拓扑大概是这样。(真实拓扑为避免信息泄露,不能发,但是和下图类似)2、某企业局域网用了ospf,网络拓扑大概是这样。(真实拓扑为避免信息泄露,不能发,但

RHEL 5基础篇—使用quota设置磁盘配额_weixin_34026484的博客-程序员宅基地

使用quota设置磁盘配额1、实现磁盘配额的条件 1)需要linux内核的支持。 2)需要安装quota这个软件包。 3)指定分区必须已经挂载支持磁盘配额功能2、linux磁盘限额的特点 1)磁盘配额功能主要针对指定的文件系统及分区。 2)主要是针对指定的用户和组。(对组设置配额后,组内所以用户使用磁盘的容量不能...

推荐文章

热门文章

相关标签