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圆形浮动菜单特效代码
Mar 03 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
详解用node编写自己的cli工具
May 23 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 Javascript
ES6中的Javascript解构的实现
Oct 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
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
javascript比较文档位置
2008/04/08 Javascript
extjs fckeditor集成代码
2009/05/10 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
Python内建模块struct实例详解
2018/02/02 Python
Python列表与元组的异同详解
2019/07/02 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
土木工程专业大学毕业生求职信
2013/10/13 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
党员评议思想汇报
2014/10/08 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
大学生自荐材料范文
2014/12/30 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
院系推荐意见
2015/06/05 职场文书
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL