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 相关文章推荐
Opacity.js
Jan 22 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 Javascript
Express框架之connect-flash详解
May 31 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
vue路由教程之静态路由
Sep 03 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 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/10/09 PHP
php 一元分词算法
2009/11/30 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
jQuery滑动效果实现方法分析
2018/09/05 jQuery
学习node.js 断言的使用详解
2019/03/18 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
浅析Python编写函数装饰器
2016/03/18 Python
Django的models模型的具体使用
2019/07/15 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
艺术专业大学生自我评价
2013/09/22 职场文书
承诺书格式范文
2014/06/03 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
幸福来敲门观后感
2015/06/04 职场文书