vue时间格式化

2020-12-22 18:26:08

export function formatTime(date, fmt) {

if (/(y+)/.test(fmt)) {

fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substring(4 - RegExp.$1.length));

}

let o = {

'M+': date.getMonth() + 1,

'd+': date.getDate(),

'h+': date.getHours(),

'm+': date.getMinutes(),

's+': date.getSeconds()

};

for (let k in o) {

if (new RegExp(`(${k})`).test(fmt)) {

let str = o[k] + '';

fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));

}

}

return fmt;

};

function padLeftZero(str) {

return ('00' + str).substring(str.length);

}

export { formatTime }

更多相关内容
vue过滤器实现日期格式化的案例分析
2020-11-20 08:43:15

在实际项目开发中，我们通常获取标准时间后不是直接拿来使用，而是要进行一些操作然后将它显示在页面中，我们将这些操作称作时间格式化。过滤器在vue中，我们可以使用过滤器来进行时间格式化。它的写法如下： // ...

收起
vue日期格式化
2022-04-25 20:03:28
这并不符合中国人习惯因此需要将他们格式化 <b >{{time|formatDate(dp.post.createTime)}}</b> data:{ time: new Date(), }, filters:{ formatDate:function (value){ var dt=new Date...
前言
数据库中的日期格式timestamp默认日期格式为
2022-04-22 09:49:42
这并不符合中国人习惯因此需要将他们格式化
```
 <b >{{time|formatDate(dp.post.createTime)}}</b>
```
```
data:{
time: new Date(),
},
	filters:{
			formatDate:function (value){
				var  dt=new Date(value);//获取日期value值
				let year = dt.getFullYear();
				let month = dt.getMonth()+1;
				let date = dt.getDate();
				return `${year}-${month}-${date}`;
			}
		},
```
过滤后效果:
收起
展开全文
javascript

vue格式化时间

2021-07-17 13:46:39

效果图简单实用，不需要下载插件，在项目中也可以这样用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...格式化时间</title> <style>

效果图

在这里插入图片描述
简单实用，不需要下载插件，在项目中也可以这样用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>格式化时间</title>
    <style>
        #app{
            font-weight: bold;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>{{timeOne}} ----> {{timeOne | format}}</div> <!--默认格式-->
        <div>{{timeTwo}} ----> {{timeTwo | format('MM-DD')}}</div>
        <div>{{timeTwo}} ----> {{timeTwo | format('MM月DD日')}}</div>
        <div>{{timeTwo}} ----> {{timeTwo | format('YYYY/MM/DD')}}</div>
        <div>{{timeOne}} ----> {{timeTwo | format('YYYY-MM-DD')}}</div>
        <div>{{timeTwo}} ----> {{timeTwo | format('YYYY/MM/DD HH:mm:ss 星期w')}}</div>
        <div>{{timeTwo}} ----> {{timeTwo | format('YYYY-MM-DD 星期w')}}</div>
        <div>{{timeOne}} ----> {{timeTwo | format('YYYY年MM月DD日 星期w')}}</div>
        <div>时间戳：{{timeThree}} ----> {{timeThree | format('YYYY')}}</div>
        <div>时间戳：{{timeThree}} ----> {{timeThree | format('YYYY-MM')}}</div>
        <div>时间戳：{{timeThree}} ----> {{timeThree | format('YYYY-MM-DD HH:mm')}}</div>
        <div>时间戳：{{timeThree}} ----> {{timeThree | format('YYYY年MM月DD日')}}</div>
        <div>时间戳：{{timeThree}} ----> {{timeThree | format('YYYY年MM月DD日 星期w')}}</div>
        <div>时间戳：{{timeThree}} ----> {{timeThree | format('YYYY年MM月DD日 HH时mm分')}}</div>
    </div>
</body>
</html>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            timeOne: '2021/07/17 14:20:00',
            timeTwo: '2021-07-17 14:20:50',
            timeThree: 1626500149311 // 时间戳必须是数字类型
        },
        filters: {
            /**
             *格式化时间文本
             * @param {Date} time 时间
             * @param {String} format 文本格式
             *  Y 表示年份
             *  M 表示月份
             *  D 表示某日
             *  h 表示小时
             *  m 表示分
             *  s 表示秒
             *  w 表示星期几
             */
            format(time, format = 'YYYY-MM-DD HH:mm:ss') {
                let date = new Date(time)
                let o = {
                    'M+': date.getMonth() + 1,
                    'D+': date.getDate(),
                    'H+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds(),
                    'w': '日一二三四五六'.charAt(date.getDay())
                };

                format = format.replace(/Y{4}/, date.getFullYear()).replace(/Y{2}/, date.getFullYear().toString().substring(2));

                let k, reg
                for (k in o) {
                    reg = new RegExp(k);
                    /* eslint no-use-before-define:0 */
                    format = format.replace(reg, match);
                }
                function match(m) {
                    return m.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length);
                }

                return format;
            }
        }
    })
</script>

收起

展开全文

javascript es6 自定义

vue格式化时间方法

2022-04-07 14:33:07

//过滤秒:格式化时间 leaveTime(value) { return moment(value).format('YYYY-MM-DD HH:mm'); }, 4、封装成js直接使用（下次直接引入即可） import moment from 'moment'; // 短时间 export const shortTime = ...

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>

收起

展开全文

vue使用过滤器格式化日期
2021-01-30 13:47:58

本文实例为大家分享了vue使用过滤器格式化日期的具体代码，供大家参考，具体内容如下案例要求案例讲解1、查看未过滤格式化的日期格式2、设置模板函数format 接收日期值和日期格式3、按照日期格式对日期进行拼接并...

收起
vue.js实现格式化时间并每秒更新显示功能示例
2020-10-18 09:51:03

主要介绍了vue.js实现格式化时间并每秒更新显示功能,结合实例形式分析了vue.js时间格式化显示与基于定时器进行实时更新的相关操作技巧,需要的朋友可以参考下

收起
vue中的过滤器及其时间格式化问题
2020-10-15 10:49:40

主要介绍了vue中的过滤器及其时间格式化,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

收起
vue中格式化时间过滤器代码实例
2020-10-17 03:53:27

主要介绍了vue格式化时间过滤器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

收起
vue中实现日期显示格式化（按照指定的格式展示时间）
千次阅读 2020-07-27 15:13:29

这里需要使用到一个插件：moment 1 npm安装（--save表示保存到package.json中） npm install moment --save ...开售时间{{$moment(startAt).format('YYYY-MM-DD HH:mm')}}</div> 就是这...

收起

moment
vue 日期格式化
千次阅读 2022-03-22 16:34:28

从接口获取的时间格式为：2022-03-16T07:26:12.659+00:00 转化为：2022-03-16 03:26:12 在uni-app中使用Moment.js 1、安装依赖 npm install moment --save 在我的uni-app中安装不上，直接从别的项目上把node_modules...

收起
Vue.js filter格式化时间戳时间成标准日期格式的方法
2021-01-30 13:47:59

Vue.js filter格式化时间戳时间成标准日期格式的方法发布于 2020-2-27|复制链接分享一篇关于Vue filter格式化时间戳时间成标准日期格式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小妖过来看看吧调用...

收起
vue 格式化时间戳
2021-07-10 06:39:46

有时候我们需要前端处理后端传过来的时间戳进行格式化为日期。 Html部分 template中这样使用，需要处理的字段名，再加上过滤器方法 <el-table-column label="日期" min-width="60"> <template slot-scope=...

收起

过滤器 html mysql python
vue+elementUI格式化日期显示---1
千次阅读 2020-07-15 09:20:34

场景 vue通过api接口获得日期格式的数据在elementUI表格中渲染数据（日期格式显示）如图安装npm i moment 导入import moment from 'moment' 在main.js中写入全局过滤器(使用） 4.

收起

elementui
VUE中格式化日期
千次阅读 2021-03-02 16:59:30

需要使用插件：moment – npm 安装（–save表示保存到package.json中） ... "vue": "^2.6.10", }, 方式一： 1 main.js中定义全局变量 import moment from 'moment' Vue.prototype.$moment = moment 2 组件中的使用

收起
vue 格式化时间(多种方法)
千次阅读 2020-11-27 16:24:14

格式化时间: 后端传了一个 2020-11-27T12:01:50.942 00:000 这样的时间过来,结果我发现我之前用的时间过滤器竟然不能把这个时间转化成 yyyy-MM-dd hh:mm:ss,于是就发现moment.js这个插件啦~ 安装: npm install ...

收起

javascript
js时间格式化,vue.js时间格式化，带T 时间格式化
千次阅读 2020-12-31 06:52:53

时间格式：/Date(1567138282927)/js格式化为日期格式：newDate(parseInt('/Date(1567138282927)/'.substr(6,13)));js格式化为短日期格式：newDate(parseInt('/Date(1567138282927)/'.substr(6,13)))....

收起
vue项目日期时间格式化插件
2021-06-09 08:45:26

} 2、在页面中根据自己的项目文件路径导出 import { dateFormat } from "@/dateFormat/dateFormat.js" 3、调用方式和结果显示，该方法灵活运用，可根据自己的项目需要进行格式化 console.log(dateFormat(new Date()...

收起
Vue 时间格式化
万次阅读 2018-08-09 19:21:05

methods{// 时间格式化 dateFormat:function(time) { var date=new Date(time); var year=date.getFullYear(); /* 在日期格式中，月份是从0开始的，因此要加0 * 使用三元表达式在小于10的前面加0，以达到...

收起
基于vue的时间格式化
2021-08-30 10:50:32

在使用vue的开发中由于在后端取到的时间date在前端显示是2021-08-24T16:00:00.000+00:00这种格式然而我们开发要求是要2021-08-24这种格式所以我们得想办法格式转换，目前我有两种解决方法 1.vue中一般有过滤器，...

收起
在vue模板{{xxx}}中显示格式化日期
2020-11-06 15:34:46

异常时间：{{ formData.abnormalTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</div> const padDate = function (value) { return value < 10 ? '0' + value : value } filters: { formatDate: ...

收起

前端 webpack
Vue 日期格式化年月日，时分秒
2022-05-06 14:09:49

Vue 日期格式化年月日，时分秒实现效果，如图： HTML代码： <template> <div> <div style="background-color: #f4f4f4;margin:50px 0 0 460px;width:500px;height:500px;"> <p>原日期...

收起

javascript html css
Vue 格式化时间 显示几天前
2020-04-09 20:12:17

插件 https://github.com/brockpetrie/vue-moment 安装 ...import Vue from 'vue' const moment = require('moment') // 中文 require('moment/locale/zh-cn') Vue.use(require('vue-moment'),{ ...

收起

javascript
vue 日期时间格式化
2020-06-22 17:43:47

1.使用filters过滤器先初始化年月日，时分秒 2.在需要显示的地方调用就行了代码： filters:{ FormatDateTime: function(value) { let date = new Date(value); let y = date.getFullYear(); let MM = date....

收起

过滤器
vue获取当前日期和时间并进行格式化
千次阅读 2021-09-30 11:08:10

} }, methods:{ //当前日期格式化 dateFormat(){ var date = new Date() var year = date.getFullYear() var month = date.getMonth() + 1 (date.getMonth() + 1) : date.getMonth()+ 1 var day = date.getDate() ...

收起

javascript html
vue 表格时间格式化_表格格式
千次阅读 2020-08-29 09:31:39

vue 表格时间格式化Tables are the most complex elements in HTML, and table formatting is among the most complex parts of CSS. CSS defines a number of objects that are involved in table formatting, as ...

收起

java css html python
vue 获取当前时间并格式化 年月日
2022-03-03 18:07:11

将公共的方法放到commom.js里面，然后再需要的页面直接引入即可 //转为年月日 export var formatDate = function(date) { if (date != '' && date != undefined && date != null) { ...

收起

javascript html
vue调用时间函数并格式化
2021-08-12 14:22:31

vue调用时间函数并格式化 在平时开发中，我们经常会遇见需要显示时间的地方，这个时候就需要去获取当前的时间有个方法是new 一个 Date 我们来看看这个函数会打印什么这函数获取了当前的时间信息，但是有时候我们...

收起

vue过滤器实现日期格式化的案例分析

vue日期格式化

vue格式化时间

效果图

vue格式化时间方法

1、下载依赖

2、引入依赖

3、写入methods

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

5、使用方法

vue使用过滤器格式化日期

vue.js实现格式化时间并每秒更新显示功能示例

vue中的过滤器及其时间格式化问题

vue中格式化时间过滤器代码实例

vue中实现日期显示格式化（按照指定的格式展示时间）

vue 日期格式化

Vue.js filter格式化时间戳时间成标准日期格式的方法

vue 格式化时间戳

vue+elementUI格式化日期显示---1

VUE中格式化日期

vue 格式化时间(多种方法)

js时间格式化,vue.js时间格式化，带T 时间格式化

vue项目日期时间格式化插件

Vue 时间格式化

基于vue的时间格式化

在vue模板{{xxx}}中显示格式化日期

Vue 日期格式化年月日，时分秒

Vue 格式化时间显示几天前

vue 日期时间格式化

vue获取当前日期和时间并进行格式化

vue 表格时间格式化_表格格式

vue 获取当前时间并格式化年月日

vue调用时间函数并格式化

vue格式化日期显示

vue过滤器实现日期格式化的案例分析

vue日期格式化

vue格式化时间

效果图

vue格式化时间方法

1、下载依赖

2、引入依赖

3、写入methods

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

5、使用方法

vue使用过滤器格式化日期

vue.js实现格式化时间并每秒更新显示功能示例

vue中的过滤器及其时间格式化问题

vue中格式化时间过滤器代码实例

vue中实现日期显示格式化（按照指定的格式展示时间）

vue 日期格式化

Vue.js filter格式化时间戳时间成标准日期格式的方法

vue 格式化时间戳

vue+elementUI格式化日期显示---1

VUE中格式化日期

vue 格式化时间(多种方法)

js时间格式化,vue.js时间格式化，带T 时间格式化

vue项目日期时间格式化插件

Vue 时间格式化

基于vue的时间格式化

在vue模板{{xxx}}中显示格式化日期

Vue 日期格式化年月日，时分秒

Vue 格式化时间 显示几天前

vue 日期时间格式化

vue获取当前日期和时间并进行格式化

vue 表格时间格式化_表格格式

vue 获取当前时间并格式化 年月日

vue调用时间函数并格式化

vue格式化日期显示

Vue 格式化时间显示几天前

vue 获取当前时间并格式化年月日