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支持带x身份证号码验证函数
Aug 10 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
js实现select跳转功能代码
Oct 22 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
微信小程序日历效果
Dec 29 Javascript
vue 实现特定条件下绑定事件
Nov 09 Javascript
微信小程序图片自适应实现解析
Jan 21 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
2006/12/23 PHP
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
javascript removeChild 使用注意事项
2009/04/11 Javascript
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
javascript 函数使用说明
2010/04/07 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
杭州联环马网络笔试题面试题
2013/08/04 面试题
室内设计专业学生的自我评价分享
2013/11/27 职场文书
入党申请自荐书范文
2014/02/11 职场文书
岗位职责怎么写
2014/03/14 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript