moment轉(zhuǎn)化時(shí)間戳出現(xiàn)Invalid Date的問題及解決
moment轉(zhuǎn)化時(shí)間戳出現(xiàn)Invalid Date
項(xiàng)目用在使用moment轉(zhuǎn)換時(shí)間戳的時(shí)候出現(xiàn)Invalid Date
通過后端接口發(fā)現(xiàn)接口返回的字段是 beginTime: “1612922019029”
在數(shù)據(jù)傳遞得過程中類型發(fā)生了變化 所以得把字符串用Number()轉(zhuǎn)化下數(shù)字類型即可正常顯示
// 轉(zhuǎn)換數(shù)字類型 beginTime: this.$moment(Number(item.beginTime)).format( "YYYY-MM-DD" ),
還有個(gè)小問題就是如果某個(gè)時(shí)間戳為空是時(shí),則會(huì)顯示1970-01-01
所以為了防止顯示1970-01-01,所以通過三目運(yùn)算判斷一下
endTime: item.endTime == "" ? "" : this.$moment(Number(item.endTime)).format("YYYY-MM-DD"),
這樣頁面上頁就不會(huì)出現(xiàn)1970-01-01
使用Moment.js處理時(shí)間戳轉(zhuǎn)化為時(shí)間年月
Moment.js 是一個(gè) JavaScript 日期處理類庫(處理時(shí)間格式化的npm包),用于解析、檢驗(yàn)、操作、以及顯示日期,在新公司的項(xiàng)目中,大量使用Moment來處理時(shí)間日期,非常方便好用。
Moment.js 中文網(wǎng):
優(yōu)點(diǎn)
- 不依賴任何第三方庫
- 支持字符串、Date、時(shí)間戳以及數(shù)組等格式
- 可以同時(shí)在瀏覽器和node環(huán)境中使用
- 前后端通用,文檔也很詳細(xì)
- 方便了日常開發(fā)中對(duì)時(shí)間的操作,提高了開發(fā)效率
使用步驟
1:在項(xiàng)目里面安裝Moment
cnpm install moment --save
2:在要使用的組件里面引入
import moment from 'moment';
3:時(shí)間戳如下
{ "users": [ { "startTime":"1572502840091", "endTime":"1572512489920" }, { "startTime":"1572512489920", "endTime":"1572513935374" } ] }
4:代碼
這里把時(shí)間戳做成了mock數(shù)據(jù),使用axios對(duì)數(shù)據(jù)接口進(jìn)行請(qǐng)求,請(qǐng)求完成之后渲染在前端界面,如果有不理解的地方可以查看專題從零開始學(xué)react系列教程。
import React from 'react'; import axios from 'axios'; import moment from 'moment'; class Time extends React.Component { //構(gòu)造函數(shù) constructor() { super(); //react定義數(shù)據(jù) this.state = { list: [] } } //請(qǐng)求接口的方法 getData = () => { var api = 'http://localhost:3004/users'; axios.get(api) .then((response) => { // handle success console.log(response.data); //用到this需要注意指向,箭頭函數(shù) this.setState({ list: response.data }) }) .catch(function (error) { // handle error console.log(error); }); } render() { return ( <div> <h2>時(shí)間戳轉(zhuǎn)化為時(shí)間</h2> <button onClick={this.getData}>獲取時(shí)間</button> <ul> { this.state.list.map((value, key) => { let start = moment(parseInt(value.startTime)).format('YYYY/MM/DD hh:mm:ss'); let end = moment(parseInt(value.endTime)).format('YYYY/MM/DD hh:mm:ss'); return ( <li key={key}> <span>開始時(shí)間:{start}</span> <span>結(jié)束時(shí)間:{end}</span> </li> ) }) } </ul> </div> ) } } export default Time;
5:效果
代碼運(yùn)行如下,獲取到了時(shí)間年月日了。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vuex數(shù)據(jù)持久化的兩種實(shí)現(xiàn)方案
在vuex的時(shí)候刷新以后里面存儲(chǔ)的state就會(huì)被瀏覽器釋放掉,因?yàn)槲覀兊膕tate都是存儲(chǔ)在內(nèi)存中的,所以一刷新頁面就會(huì)把state中的數(shù)據(jù)重置,這就涉及到vue數(shù)據(jù)持久化的問題,這篇文章主要給大家介紹了關(guān)于vuex數(shù)據(jù)持久化的兩種實(shí)現(xiàn)方案,需要的朋友可以參考下2021-07-07vue項(xiàng)目報(bào)錯(cuò):Missing?script:"serve"的解決辦法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目報(bào)錯(cuò):Missing?script:"serve"的解決辦法,"missing script: serve"是一個(gè)錯(cuò)誤信息,意味著在執(zhí)行啟動(dòng)腳本時(shí),找不到名為"serve"的腳本,需要的朋友可以參考下2023-11-11Vue實(shí)現(xiàn)底部側(cè)邊工具欄的實(shí)例代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)底部側(cè)邊工具欄的實(shí)例代碼,文中通過分享一段代碼介紹vue 側(cè)邊導(dǎo)航欄遞歸顯示功能,需要的朋友可以參考下2018-09-09vue項(xiàng)目引入本地bootstrap不生效問題及解決
這篇文章主要介紹了vue項(xiàng)目引入本地bootstrap不生效問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue項(xiàng)目發(fā)布有緩存正式環(huán)境不更新的解決方案
vue項(xiàng)目每次發(fā)布新版本后,測(cè)試人員都要強(qiáng)制刷新才能更新瀏覽器代碼來驗(yàn)證bug,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目發(fā)布有緩存正式環(huán)境不更新的解決方案,需要的朋友可以參考下2024-03-03vue+vant使用圖片預(yù)覽功能ImagePreview的問題解決
這篇文章主要介紹了vue+vant使用圖片預(yù)覽功能ImagePreview的問題解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04