ant design 日期格式化的实现


Posted in Javascript onOctober 27, 2020

今天写项目的时候用到ant design中的日期组件,但是由于用ant design日期组件取得的值是moment类型,而往数据库中保存需要的是字符串类型.这里就用到了moment日期转换

第一种写法

ant design 日期格式化的实现

我取得的值是年月

ant design 日期格式化的实现

如:201806

第二种写法

moment().format('YYYY-MM-DD')

第三种写法

moment(Date.now()).format('YYYY-MM-DD')

获取本地日期的下个月

window.moment().add(1, 'months')

获取当前日期的下一天

window.moment().add(1, 'days')

参考地址 http://momentjs.com/ 记得用的话别忘了引入他moment.js

补充知识:ant design使用日期控件涉及的日期格式问题

moment的基本使用:

var moment = require('moment');
console.log("001===>>> ",moment().format('YYYY-MM-DD HH:mm:ss'));      //当前时间
console.log("002===>>> ",moment().add(-1,'year').format('YYYY-MM-DD HH:mm:ss'));   //当前时间 前一年
console.log("003===>>> ",moment().add(-1,'month').format('YYYY-MM-DD HH:mm:ss'));  //当前时间 前一月
console.log("004===>>> ",moment().add(-1,'week').format('YYYY-MM-DD HH:mm:ss'));   //当前时间 前一周
console.log("005===>>> ",moment().add(-1,'days').format('YYYY-MM-DD HH:mm:ss'));   //当前时间 前一天
console.log("006===>>> ",moment().add(-1,'hour').format('YYYY-MM-DD HH:mm:ss'));   //当前时间 前一小时
console.log("007===>>> ",moment().add(-1,'minute').format('YYYY-MM-DD HH:mm:ss'));  //当前时间 前一分钟
console.log("008===>>> ",moment().add(-1,'second').format('YYYY-MM-DD HH:mm:ss'));  //当前时间 前一秒
console.log("009===>>> ",moment().utc().format("YYYY-MM-DD HH:mm:ss"));     //当前时间 UTC格式化

//001===>>> 2016-06-28 14:45:02
//002===>>> 2015-06-28 14:45:02
//003===>>> 2016-05-28 14:45:02
//004===>>> 2016-06-21 14:45:02
//005===>>> 2016-06-27 14:45:02
//006===>>> 2016-06-28 13:45:02
//007===>>> 2016-06-28 14:44:02
//008===>>> 2016-06-28 14:45:01
//009===>>> 2016-06-28 06:45:02

对form表单中的日期格式进行转换方法:

function filterQueryObj(obj, dateFormatOne, dateFormatTwo) {
 // 将提交的值中undefined/null去掉
 const searchValue = {};
 (Object.keys(obj) || {}).forEach(key => {
 if (obj[key]) {
  // 对于js的日期类型, 要转换成字符串再传给后端
  if (obj[key] instanceof Date) {
  searchValue[key] = obj[key].format(dateFormatOne || 'yyyy-MM-dd');
  } else if (moment.isMoment(obj[key])) {
  // 处理moment对象 
  searchValue[key] = obj[key].format(dateFormatTwo || 'YYYY-MM-DD');
  } else if (typeof obj[key] === 'string') {
  searchValue[key] = _.trim(obj[key]); // 情况字符串左右的空格
  } else if (_.isArray(obj[key]) && obj[key].length === 0) {
  // 如果是数组,那么如果是空值,则不传
  delete searchValue[key];
  } else {
  searchValue[key] = obj[key];
  }
 }
 });
 return searchValue;
}

去掉空格:

// 去掉空格
function trim(str) {
 return str.split(' ');
 // str.replace(/(^\s*)|(\s*$)/g, "");
}

以上这篇ant design 日期格式化的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 Javascript
vue中v-model的应用及使用详解
Jun 27 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 Javascript
JS常见内存泄漏及解决方案解析
May 30 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 Javascript
如何利用js在两个html窗口间通信
Apr 27 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 #Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 #Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 #Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 #Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 #Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 #Javascript
js实现自定义滚动条的示例
Oct 27 #Javascript
You might like
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
Display SQL Server Version Information
2007/06/21 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
python函数返回多个值的示例方法
2013/12/04 Python
python enumerate函数的使用方法总结
2017/11/15 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
Python数组并集交集补集代码实例
2020/02/18 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
某公司面试题
2012/03/05 面试题
计算机专业毕业生自我鉴定
2014/01/16 职场文书
法人委托书范本
2014/04/04 职场文书
爱我中华演讲稿
2014/05/20 职场文书
本科毕业生求职信
2014/06/15 职场文书
2014年人事科工作总结
2014/11/19 职场文书
理解深度学习之深度学习简介
2021/04/14 Python