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刷新当前页面的几种方法总结
Dec 24 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
jquery实现图片预加载
Dec 25 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
JS实现电商放大镜效果
Aug 24 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
js实现双人五子棋小游戏
May 28 Javascript
JavaScript实现京东快递单号查询
Nov 30 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 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
jQuery 渐变下拉菜单
2009/12/15 Javascript
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
几个有趣的Javascript Hack
2010/07/24 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
python执行使用shell命令方法分享
2017/11/08 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
微信小程序python用户认证的实现
2019/07/29 Python
python实现快递价格查询系统
2020/03/03 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
如何利用cmp命令比较文件
2013/09/23 面试题
do you have any Best Practice for testing
2016/06/04 面试题
文秘专业自荐信
2013/10/14 职场文书
高二美术教学反思
2014/01/14 职场文书
白血病捐款倡议书
2014/05/14 职场文书
体育馆的标语
2014/06/24 职场文书
维稳承诺书
2015/01/20 职场文书
黄石寨导游词
2015/02/05 职场文书
早恋主题班会
2015/08/14 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android