ant design 日期格式化的實現(xiàn)

更新時間：2020年10月27日 11:23:46 作者：durex_er

這篇文章主要介紹了ant design 日期格式化的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

今天寫項目的時候用到ant design中的日期組件，但是由于用ant design日期組件取得的值是moment類型，而往數(shù)據(jù)庫中保存需要的是字符串類型.這里就用到了moment日期轉換

第一種寫法

我取得的值是年月

如：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) {
  // 如果是數(shù)組，那么如果是空值，則不傳
  delete searchValue[key];
  } else {
  searchValue[key] = obj[key];
  }
 }
 });
 return searchValue;
}

去掉空格：

// 去掉空格
function trim(str) {
 return str.split(' ');
 // str.replace(/(^\s*)|(\s*$)/g, "");
}

以上這篇ant design 日期格式化的實現(xiàn)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue3中pinia的使用方法
Pinia是Vue3的狀態(tài)管理工具,安裝后在入口文件引入,定義store并在組件中使用,本文就來介紹一下vue3中pinia的使用方法,感興趣的可以了解一下
2024-10-10
Vue使用xlsx模塊實現(xiàn)讀寫Excel文檔內(nèi)容
在前端項目開發(fā)中,讀寫Excel文件的需求變得越來越常見,本文將詳細介紹如何在Vue項目中利用FileReader對象和xlsx模塊來讀取Excel文件的內(nèi)容,需要的可以參考下
2024-03-03
vue實現(xiàn)點擊按鈕“查看詳情”彈窗展示詳情列表操作
這篇文章主要介紹了vue實現(xiàn)點擊按鈕“查看詳情”彈窗展示詳情列表操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
vue解析Json數(shù)據(jù)獲取Json里面的多個id問題
這篇文章主要介紹了vue解析Json數(shù)據(jù)獲取Json里面的多個id問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-12-12
vue3+el-select實現(xiàn)觸底加載更多功能(ts版)
這篇文章主要給大家介紹了基于vue3和el-select實現(xiàn)觸底加載更多功能，文中有詳細的代碼示例，感興趣的同學可以借鑒參考下
2023-07-07
vue虛擬化列表封裝的實現(xiàn)
這篇文章主要介紹了vue實現(xiàn)虛擬化列表封裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue項目中使用vue-i18n報錯的解決方法
這篇文章主要給大家介紹了關于vue項目中使用vue-i18n報錯的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-01-01
詳解Vue的組件注冊
組件是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能,需要的朋友可以參考下
2023-05-05
element修改form的el-input寬度,el-select寬度的方法實現(xiàn)
有時候像form表單這樣，頁面的input、select等寬度不一定會是一樣的，可能有些長，有些短，本文就介紹了如何element修改form的el-input寬度,el-select寬度的方法實現(xiàn)，感興趣的可以了解一下
2022-02-02
vite打包優(yōu)化CDN壓縮的分析實現(xiàn)
我們在日常的工作中肯定會遇到項目打包優(yōu)化等問題,本文主要介紹了vite打包優(yōu)化CDN壓縮的分析實現(xiàn),具有一定的參加價值,感興趣的可以了解一下
2024-07-07