Vue–时间戳转换日期格式

vue时间戳转换日期格式

一，vue获取时间戳转换为日期格式

后台返回的时间戳格式（例如：creatTime: 90），需要用时间格式显示 

（1）需要2021-09-28格式显示

 <el-table-column align="center" label="通知时间"> <template slot-scope="scope"> <span v-if="scope.row.creatTime != null"> { 
   { 
    parseTime(scope.row.creatTime, "{y}-{m}-{d}") }} </span> </template> </el-table-column> 

（2）需要2021-09-28 10:13:09格式显示

 <el-table-column align="center" label="通知时间"> <template slot-scope="scope"> <span v-if="scope.row.creatTimes!= null"> { 
   { 
    parseTime(scope.row.creatTime ) }} </span> </template> </el-table-column> 

二， 需要向后台传时间戳格式的写法 如下格式

（1）2020-09-28格式转时间戳

 return{ 
    startTime:"", endTime:"", } 

 startTime:new Date(this.form.startTime).getTime() endTime: new Date(this.form.endTime).getTime() 

（2）如果开始时间或者结束时间取当天时间

 return{ 
    startTime: new Date(), endTime:"", } 

 startTime: new Date(this.form.startTime).getTime() endTime: new Date(this.form.endTime).getTime() 

（3）如下格式 2021-09-28—2021-09-30格式

 <el-form-item> <span class="demonstration">日期筛选：</span> <el-date-picker v-model="createTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" > </el-date-picker> </el-form-item> 

 return{ 
    createTime:"", } 

 startTime:this.createTime && this.createTime[0] ? new Date(this.createTime[0]).getTime() : "", endTime:this.createTime && this.createTime[1] ? new Date(this.createTime[1]).getTime(): "", 

三，获取当前的年月日时分秒并展示

 
  
 
   

     { 
    { nowtime }} 
   
 
  
 

 return{ 
    nowtime:"" } mounted(){ 
    setInterval(() => { 
    this.getTime(); }, 1000); }, methods:{ 
    getTime() { 
    this.nowtime = parseTime(new Date(), '{y}年{m}月{d}日 {h}:{i}:{s} 周{a}'); }, } 

四，需要传（2021-12-16）

<el-date-picker type="date" placeholder="选择日期" v-model="auditorPostponeTime"> </el-date-picker> 

 let times = ''; if (this.auditorPostponeTime) { 
    times = parseTime(this.auditorPostponeTime, '{y}-{m}-{d}'); } let req={ 
    auditorPostponeTime: times, //同意选择的时间 } 

五，注意：代码中必须要引入date.js文件，并在方法中使用即可，否则以上不成立

 import { 
    parseTime } from "@/utils/date"; 

（1）创建一个date.js文件，内容如下：

/ * Parse the time to string * @param {(Object|string|number)} time * @param {string} cFormat * @returns {string | null} */ export function parseTime(time, cFormat) { if (arguments.length === 0) { return null } const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}' let date if (typeof time === 'object') { date = time } else { if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) { time = parseInt(time) } if ((typeof time === 'number') && (time.toString().length === 10)) { time = time * 1000 } date = new Date(time) } const formatObj = { y: date.getFullYear(), m: date.getMonth() + 1, d: date.getDate(), h: date.getHours(), i: date.getMinutes(), s: date.getSeconds(), a: date.getDay() } const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => { const value = formatObj[key] // Note: getDay() returns 0 on Sunday if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] } return value.toString().padStart(2, '0') }) return time_str } / * @param {number} time * @param {string} option * @returns {string} */ export function formatTime(time, option) { if (('' + time).length === 10) { time = parseInt(time) * 1000 } else { time = +time } const d = new Date(time) const now = Date.now() const diff = (now - d) / 1000 if (diff < 30) { return '刚刚' } else if (diff < 3600) { // less 1 hour return Math.ceil(diff / 60) + '分钟前' } else if (diff < 3600 * 24) { return Math.ceil(diff / 3600) + '小时前' } else if (diff < 3600 * 24 * 2) { return '1天前' } if (option) { return parseTime(time, option) } else { return ( d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分' ) } } / * @param {string} url * @returns {Object} */ export function param2Obj(url) { const search = url.split('?')[1] if (!search) { return {} } return JSON.parse( '{"' + decodeURIComponent(search) .replace(/"/g, '\\"') .replace(/&/g, '","') .replace(/=/g, '":"') .replace(/\+/g, ' ') + '"}' ) }