ant design 日期格式化的實(shí)現(xiàn)
更新時間：2020年10月27日 11:23:46 作者：durex_er
這篇文章主要介紹了ant design 日期格式化的實(shí)現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
今天寫項(xiàng)目的時候用到ant design中的日期組件，但是由于用ant design日期組件取得的值是moment類型，而往數(shù)據(jù)庫中保存需要的是字符串類型.這里就用到了moment日期轉(zhuǎn)換
第一種寫法
我取得的值是年月
如：201806
第二種寫法
moment().format('YYYY-MM-DD')
第三種寫法
moment(Date.now()).format('YYYY-MM-DD')
獲取本地日期的下個月
window.moment().add(1, 'months')
獲取當(dāng)前日期的下一天
window.moment().add(1, 'days')
參考地址 http://momentjs.com/ 記得用的話別忘了引入他moment.js
補(bǔ)充知識：ant design使用日期控件涉及的日期格式問題
moment的基本使用：
var moment = require('moment');
console.log("001===>>> ",moment().format('YYYY-MM-DD HH:mm:ss')); //當(dāng)前時間
console.log("002===>>> ",moment().add(-1,'year').format('YYYY-MM-DD HH:mm:ss')); //當(dāng)前時間 前一年
console.log("003===>>> ",moment().add(-1,'month').format('YYYY-MM-DD HH:mm:ss')); //當(dāng)前時間 前一月
console.log("004===>>> ",moment().add(-1,'week').format('YYYY-MM-DD HH:mm:ss')); //當(dāng)前時間 前一周
console.log("005===>>> ",moment().add(-1,'days').format('YYYY-MM-DD HH:mm:ss')); //當(dāng)前時間 前一天
console.log("006===>>> ",moment().add(-1,'hour').format('YYYY-MM-DD HH:mm:ss')); //當(dāng)前時間 前一小時
console.log("007===>>> ",moment().add(-1,'minute').format('YYYY-MM-DD HH:mm:ss')); //當(dāng)前時間 前一分鐘
console.log("008===>>> ",moment().add(-1,'second').format('YYYY-MM-DD HH:mm:ss')); //當(dāng)前時間 前一秒
console.log("009===>>> ",moment().utc().format("YYYY-MM-DD HH:mm:ss")); //當(dāng)前時間 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表單中的日期格式進(jìn)行轉(zhuǎn)換方法：
function filterQueryObj(obj, dateFormatOne, dateFormatTwo) {
// 將提交的值中undefined/null去掉
const searchValue = {};
(Object.keys(obj) || {}).forEach(key => {
if (obj[key]) {
// 對于js的日期類型, 要轉(zhuǎn)換成字符串再傳給后端
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) {
// 如果是數(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)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Pinia是Vue3的狀態(tài)管理工具,安裝后在入口文件引入,定義store并在組件中使用,本文就來介紹一下vue3中pinia的使用方法,感興趣的可以了解一下2024-10-10
Vue使用xlsx模塊實(shí)現(xiàn)讀寫Excel文檔內(nèi)容
在前端項(xiàng)目開發(fā)中,讀寫Excel文件的需求變得越來越常見,本文將詳細(xì)介紹如何在Vue項(xiàng)目中利用FileReader對象和xlsx模塊來讀取Excel文件的內(nèi)容,需要的可以參考下2024-03-03
vue實(shí)現(xiàn)點(diǎn)擊按鈕“查看詳情”彈窗展示詳情列表操作
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊按鈕“查看詳情”彈窗展示詳情列表操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue解析Json數(shù)據(jù)獲取Json里面的多個id問題
這篇文章主要介紹了vue解析Json數(shù)據(jù)獲取Json里面的多個id問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
vue3+el-select實(shí)現(xiàn)觸底加載更多功能(ts版)
這篇文章主要給大家介紹了基于vue3和el-select實(shí)現(xiàn)觸底加載更多功能，文中有詳細(xì)的代碼示例，感興趣的同學(xué)可以借鑒參考下2023-07-07
這篇文章主要介紹了vue實(shí)現(xiàn)虛擬化列表封裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue項(xiàng)目中使用vue-i18n報錯的解決方法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用vue-i18n報錯的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
組件是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能,需要的朋友可以參考下2023-05-05
element修改form的el-input寬度,el-select寬度的方法實(shí)現(xiàn)
有時候像form表單這樣，頁面的input、select等寬度不一定會是一樣的，可能有些長，有些短，本文就介紹了如何element修改form的el-input寬度,el-select寬度的方法實(shí)現(xiàn)，感興趣的可以了解一下2022-02-02
vite打包優(yōu)化CDN壓縮的分析實(shí)現(xiàn)
我們在日常的工作中肯定會遇到項(xiàng)目打包優(yōu)化等問題,本文主要介紹了vite打包優(yōu)化CDN壓縮的分析實(shí)現(xiàn),具有一定的參加價值,感興趣的可以了解一下2024-07-07