1、下载依赖

npm install moment --save

2、引入依赖

import moment from 'moment';

3、写入methods

//过滤秒:格式化时间
time (value)
{return moment(value).format('YYYY-MM-DD HH:mm:ss');
},

一般来说用这一种方法就够了

下面是整合的各种函数去使用

4、封装成js直接使用（下次直接引入即可）

import moment from 'moment';// 短时间
export const shortTime = function (value) {return moment(value).format('YYYY-MM-DD');
}// 长时间
export const time = function (value) {return moment(value).format('YYYY-MM-DD HH:mm:ss');
}//过滤秒
export const leaveTime = function (value) {return moment(value).format('YYYY-MM-DD HH:mm');
}// 年月
export const monthTime = function (value) {return moment(value).format('YYYY-MM');
}// 时分秒
export const secondsTime = function (value) {return moment(value).format('HH:mm:ss');
}// 中国标准时间的转化
export const filterTime = (time, type = 'short') => {if (type == 'short') {return moment(time).format('YYYY-MM-DD')} else {return moment(time).format('YYYY-MM-DD HH:mm:ss')}
}export const startOfDate = function(d, dateType = 'day'){return moment(d).startOf(dateType)
}export const endOfDate = function(d, dateType = 'day'){return moment(d).endOf(dateType)
}// 当月第一天和最后一天   传入一个日期，返回数组['2019-12-01','2019-12-31']
export const lastDateofMonth = function (d) {let firstDate = moment(d).startOf('month').format('YYYY-MM-DD');let endDate = moment(d).endOf('month').format('YYYY-MM-DD');let Datearr = [];Datearr.push(firstDate);Datearr.push(endDate);return Datearr;
}

5、使用方法

引入js

import * as timeFormat from "../../../base/api/timeFormat";

在表格中使用

<el-table-column prop="createTime" label="创建时间" min-width="180"><template slot-scope="scope">{{leaveTime(scope.row.createTime)}}</template>
</el-table-column>

在timePicker中使用(无需引入对应方法)

 <el-date-pickerv-model="filedParams.payStartDate"type="date"placeholder="请选择时间"value-format="yyyy-MM-dd"style="float: left; width: 48%"
>
</el-date-picker>

vue格式化时间方法相关推荐

vue 表格格式化时间:formatter没有效果
vue 表格格式化时间:formatter没有效果今天我想要用:formatter对时间进行格式化的时候发现没有效果!!没有错,就是没有效果,我不知道什么原因,知道的小伙伴底下告诉一声控制台就没 ...
vue 中格式化时间过滤器格式化时间
vue 中格式化时间过滤器格式化时间 data.js 格式化方法使用 * // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s) ...
Vue在表格中格式化时间
在获取数据的时候时间显示的方式是毫秒那么可以通过在Vue原型上过载一个时间的过滤器函数去格式化时间首先,找到main.js入口文件 Vue.filter('dataFormat',function ...
vue使用过滤器将时间戳格式化时间
使用moment插件格式化.如果写成方法的话,则每个页面都要写这个方法.所以还有一种,定义全局过滤器,将时间戳格式化在main.js中定义 Vue.filter('dateFormat', (dat ...
[js] 写一个格式化时间的方法
[js] 写一个格式化时间的方法 function dateToString(date, format = 'yyyy-MM-dd') {const d = new Date(date);let re ...
前端学习（2731）：重读vue电商网站41之自定义格式化时间的全局过滤器
在 main.js 入口文件全局注册格式化时间的过滤器,代码如下所示: Javascript // 自定义格式化时间的全局过滤器 Vue.filter('dataFormat', function(o ...
3种时间格式化的方法，SpringBoot篇！
时间格式化在项目中使用频率是非常高的,当我们的 API 接口返回结果,需要对其中某一个 date 字段属性进行特殊的格式化处理,通常会用到 SimpleDateFormat 工具处理. SimpleD ...
java 表达式日期加减_jdk8获取当前时间|时间加减|java8时间格式化|时间处理工具|时间比较|线程安全的时间处理方法...
目录前言在很久之前,我总结了一些jdk7版本之前的关于时间处理的一些公共方法,日期转换成字符串.指定时间加上指定天数后的日期.获取上周周一时间等等:具体的可以戳链接查看完整的:https://b ...
python的strftime函数_Python简单格式化时间的方法【strftime函数】
本文实例讲述了Python简单格式化时间的方法,分享给大家供大家参考,具体如下: walker经常用到当前时间和相对时间,用来统计程序执行的效率,简单记一下,便于copy. >>> ...

vue格式化时间方法

1、下载依赖

2、引入依赖

3、写入methods

4、封装成js直接使用（下次直接引入即可）

5、使用方法

vue格式化时间方法相关推荐

最新文章

热门文章