vue格式化时间方法

最新推荐文章于 2024-07-14 22:44:48 发布

「已注销」

最新推荐文章于 2024-07-14 22:44:48 发布

阅读量3.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/C___man/article/details/123654254

本文介绍了在Vue项目中如何格式化时间的方法，包括下载依赖、引入、在methods中编写函数，以及如何封装成独立JS文件以便重复使用。在表格和timePicker组件中应用了这些方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、下载依赖

npm install moment --save

2、引入依赖

import moment from 'moment';

3、写入methods

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

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-picker
  :picker-options="pickerOptionsStart"
  v-model="filedParams.payStartDate"
  type="date"
  placeholder="请选择时间"
  value-format="yyyy-MM-dd"
  style="float: left; width: 48%"
>
</el-date-picker>