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 相关文章推荐
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
js数组去重的hash方法
Dec 22 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 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 ci框架验证码实例分析
2013/06/26 PHP
php中apc缓存使用示例
2013/12/25 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
基于PHP制作验证码
2016/10/12 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
详解Python中类的定义与使用
2017/04/11 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
详解python多线程之间的同步(一)
2019/04/03 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
Python3进制之间的转换代码实例
2019/08/24 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
采购内勤岗位职责
2013/12/10 职场文书
业务员薪酬管理制度
2014/01/15 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
音乐课外活动总结
2015/05/09 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
深度学习详解之初试机器学习
2021/04/14 Python
2021年最新用于图像处理的Python库总结
2021/06/15 Python
Python使用pyecharts控件绘制图表
2022/06/05 Python