moment.js-日期處理js庫的簡單使用(基於vue)


安裝及引入

1、npm install moment  或者  yarn add moment

2、在main.js里引入並掛載到全局
import moment from 'moment'
Vue.prototype.$moment = moment
moment.locale('zh-cn')  //設置區域為中國

3、在其他頁面調用
例:this.$moment(this.createDate,'YYYY-MM-DD HH:mm:ss')

.
.
.
.
.
.

官網及文檔

中文版: http://momentjs.cn/
英文版: https://momentjs.com/
.
.
.
.
.
.

舉例:在Ant Design of Vue框架中的簡單使用

  • 創建一個moment對象,如下:將2020-02-02 20:20:20格式的時間轉為moment格式
let aDate=this.$moment('2020-02-02 20:20:20','YYYY-MM-DD HH:mm:ss')  //創建moment對象
console.log(newsDate)  //打印結果見下圖

  • 將moment對象轉為日期時間格式
let bDate = this.$moment(aDate._d).format('YYYY-MM-DD HH:mm:ss')
console.log(bDate)  //打印出2020-02-02 20:20:20
<a-date-picker show-time placeholder="選擇時間" v-model="newsArcDate" />


data(){
    return{
          newsArcDate: null,  //這里數據類型務必設為null
    } 
}

getDate(){
    console.log(this.newsArcDate)  //這里打印出的是對象格式的數據

    let b = this.$moment(this.newsArcDate._d).format('YYYY-MM-DD HH:mm:ss')
    console.log(b)  //這里打印出的是YYYY-MM-DD HH:mm:ss格式的時間 
}

如在編輯頁面,先從接口獲取了默認時間(如2020-02-02 20:20:20這種格式),需要渲染到組件上
則需要先將字符串格式時間(YYYY-DD-MM)轉換為對象時間格式(moment):
let cc=this.$moment(res.data.data.time,'YYYY-MM-DD HH:mm:ss')
this.newsArcDate = cc

解釋:antd-vue的日期組件只識別moment格式,而一般接口上傳的數據是字符串格式如'2020-02-02 20:20:20'。我們上傳到接口時需要先將時間格式由moment轉字符串后再上傳。而從接口拿時間渲染到組件上時,又需要先將時間格式由字符串轉moment

moment其他亂七八糟的各種用法

見博客: https://www.cnblogs.com/Jimc/p/10591580.html
或者看官網


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM