ant design 日期格式化的實(shí)現(xiàn)
今天寫項(xiàng)目的時(shí)候用到ant design中的日期組件,但是由于用ant design日期組件取得的值是moment類型,而往數(shù)據(jù)庫(kù)中保存需要的是字符串類型.這里就用到了moment日期轉(zhuǎn)換
第一種寫法

我取得的值是年月

如:201806
第二種寫法
moment().format('YYYY-MM-DD')
第三種寫法
moment(Date.now()).format('YYYY-MM-DD')
獲取本地日期的下個(gè)月
window.moment().add(1, 'months')
獲取當(dāng)前日期的下一天
window.moment().add(1, 'days')
參考地址 http://momentjs.com/ 記得用的話別忘了引入他moment.js
補(bǔ)充知識(shí):ant design使用日期控件涉及的日期格式問(wèn)題
moment的基本使用:
var moment = require('moment');
console.log("001===>>> ",moment().format('YYYY-MM-DD HH:mm:ss')); //當(dāng)前時(shí)間
console.log("002===>>> ",moment().add(-1,'year').format('YYYY-MM-DD HH:mm:ss')); //當(dāng)前時(shí)間 前一年
console.log("003===>>> ",moment().add(-1,'month').format('YYYY-MM-DD HH:mm:ss')); //當(dāng)前時(shí)間 前一月
console.log("004===>>> ",moment().add(-1,'week').format('YYYY-MM-DD HH:mm:ss')); //當(dāng)前時(shí)間 前一周
console.log("005===>>> ",moment().add(-1,'days').format('YYYY-MM-DD HH:mm:ss')); //當(dāng)前時(shí)間 前一天
console.log("006===>>> ",moment().add(-1,'hour').format('YYYY-MM-DD HH:mm:ss')); //當(dāng)前時(shí)間 前一小時(shí)
console.log("007===>>> ",moment().add(-1,'minute').format('YYYY-MM-DD HH:mm:ss')); //當(dāng)前時(shí)間 前一分鐘
console.log("008===>>> ",moment().add(-1,'second').format('YYYY-MM-DD HH:mm:ss')); //當(dāng)前時(shí)間 前一秒
console.log("009===>>> ",moment().utc().format("YYYY-MM-DD HH:mm:ss")); //當(dāng)前時(shí)間 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
對(duì)form表單中的日期格式進(jìn)行轉(zhuǎn)換方法:
function filterQueryObj(obj, dateFormatOne, dateFormatTwo) {
// 將提交的值中undefined/null去掉
const searchValue = {};
(Object.keys(obj) || {}).forEach(key => {
if (obj[key]) {
// 對(duì)于js的日期類型, 要轉(zhuǎn)換成字符串再傳給后端
if (obj[key] instanceof Date) {
searchValue[key] = obj[key].format(dateFormatOne || 'yyyy-MM-dd');
} else if (moment.isMoment(obj[key])) {
// 處理moment對(duì)象
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) {
// 如果是數(shù)組,那么如果是空值,則不傳
delete searchValue[key];
} else {
searchValue[key] = obj[key];
}
}
});
return searchValue;
}
去掉空格:
// 去掉空格
function trim(str) {
return str.split(' ');
// str.replace(/(^\s*)|(\s*$)/g, "");
}
以上這篇ant design 日期格式化的實(shí)現(xiàn)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
解決Vue Loading PostCSS Plugin failed:Cann
這篇文章主要介紹了解決Vue Loading PostCSS Plugin failed:Cannot find module autoprefixer問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue-router路由參數(shù)刷新消失的問(wèn)題解決方法
本篇文章主要介紹了vue-router路由參數(shù)刷新消失的問(wèn)題解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06
如何解決vue項(xiàng)目打包后文件過(guò)大問(wèn)題
這篇文章主要介紹了如何解決vue項(xiàng)目打包后文件過(guò)大問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
vue實(shí)現(xiàn)的上拉加載更多數(shù)據(jù)/分頁(yè)功能示例
這篇文章主要介紹了vue實(shí)現(xiàn)的上拉加載更多數(shù)據(jù)/分頁(yè)功能,涉及基于vue的事件響應(yīng)、數(shù)據(jù)交互等相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
詳解Vue-Router源碼分析路由實(shí)現(xiàn)原理
這篇文章主要介紹了Vue-Router源碼分析路由實(shí)現(xiàn)原理,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue設(shè)置提示和警告彈出框?qū)崙?zhàn)案例
頁(yè)面中會(huì)有很多時(shí)候需要彈窗提示,下面這篇文章主要給大家介紹了關(guān)于Vue設(shè)置提示和警告彈出框的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
解決Vue項(xiàng)目Network:?unavailable的問(wèn)題
項(xiàng)目只能通過(guò)Local訪問(wèn)而不能通過(guò)Network訪問(wèn),本文主要介紹了解決Vue項(xiàng)目Network:?unavailable的問(wèn)題,具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06

