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 相关文章推荐
JQquery的一些使用心得分享
Aug 01 Javascript
禁止ajax缓存获取程序最新数据的方法
Nov 19 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 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得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
php中require和require_once的区别说明
2014/02/27 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
【消息提示组件】,兼容IE6/7&&FF2
2007/09/04 Javascript
JavaScript中的其他对象
2008/01/16 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
一个简单的python程序实例(通讯录)
2013/11/29 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
基于python监控程序是否关闭
2020/01/14 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
python常量折叠基础知识点讲解
2021/02/28 Python
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
strlen的几种不同实现方法
2013/05/31 面试题
2016年暑期教师培训心得体会
2016/01/09 职场文书