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 相关文章推荐
javascript之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
微信小程序实现form表单本地储存数据
Jun 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中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
Node.js模块加载详解
2014/08/16 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
vue中的循环对象属性和属性值用法
2020/09/04 Javascript
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
Django中Model的使用方法教程
2018/03/07 Python
Python 将pdf转成图片的方法
2018/04/23 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
平面设计自荐信
2013/10/07 职场文书
升职自荐书范文
2013/11/28 职场文书
刚毕业大学生自荐信范文
2014/02/20 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
2015年医院保卫科工作总结
2015/07/23 职场文书
python超详细实现完整学生成绩管理系统
2022/03/17 Python
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers