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 相关文章推荐
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
Jul 24 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 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 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
Python实现二分法算法实例
2015/02/02 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
JBL英国官网:JBL UK
2018/07/04 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
夜大毕业生自我评价分享
2013/11/10 职场文书
军训 自我鉴定
2014/02/03 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
市级文明单位申报材料
2014/05/07 职场文书
物业管理专业自荐信
2014/07/01 职场文书
假期安全教育广播稿
2014/10/04 职场文书
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python