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 相关文章推荐
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
FireBug 调试JS入门教程 如何调试JS
Dec 23 Javascript
angularJS提交表单(form)
Feb 09 Javascript
Javascript原型链的原理详解
Jan 05 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
package.json配置文件构成详解
Aug 27 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
vue和小程序项目中使用iconfont的方法
May 19 Javascript
浅谈es6中的元编程
Dec 01 Javascript
react中props 的使用及进行限制的方法
Apr 28 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 图片上传类代码
2009/07/17 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
浅谈php提交form表单
2015/07/01 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
在python中修改.properties文件的操作
2020/04/08 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
python 实现单例模式的5种方法
2020/09/23 Python
如何使用python写截屏小工具
2020/09/29 Python
三个Unix的命令面试题
2015/04/12 面试题
函授本科毕业生自我鉴定
2013/10/16 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
校长一岗双责责任书
2015/05/09 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书