精华内容
下载资源
问答
  • 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中,我们可以使用过滤器来进行时间格式化。它的写法如下: // ...
  • 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}`;
    			}
    		},
    
    

    过滤后效果:
    请添加图片描述

    展开全文
  • 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>
    
    展开全文
  • 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使用过滤器格式化日期的具体代码,供大家参考,具体内容如下案例要求 案例讲解1、查看未过滤格式化的日期格式2、设置模板函数format 接收日期值和日期格式3、按照日期格式对日期进行拼接并...
  • 主要介绍了vue.js实现格式化时间并每秒更新显示功能,结合实例形式分析了vue.js时间格式化显示与基于定时器进行实时更新的相关操作技巧,需要的朋友可以参考下
  • 主要介绍了vue中的过滤器及其时间格式化,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了vue格式化时间过滤器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 这里需要使用到一个插件:moment 1 npm安装(--save表示保存到package.json中) npm install moment --save ...开售时间{{$moment(startAt).format('YYYY-MM-DD HH:mm')}}</div> 就是这...
  • 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格式化时间戳时间成标准日期格式的方法发布于 2020-2-27|复制链接分享一篇关于Vue filter格式化时间戳时间成标准日期格式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小妖过来看看吧调用...
  • vue 格式化时间戳

    2021-07-10 06:39:46
    有时候我们需要前端处理后端传过来的时间戳进行格式化为日期。 Html部分 template中这样使用,需要处理的字段名,再加上过滤器方法 <el-table-column label="日期" min-width="60"> <template slot-scope=...
  • vue+elementUI格式化日期显示---1

    千次阅读 2020-07-15 09:20:34
    场景 vue通过api接口获得日期格式的数据在elementUI表格中渲染数据(日期格式显示)如图 安装npm i moment 导入import moment from 'moment' 在main.js中写入全局过滤器(使用) 4.
  • 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 ...
  • 时间格式:/Date(1567138282927)/js格式化为日期格式:newDate(parseInt('/Date(1567138282927)/'.substr(6,13)));js格式化为短日期格式:newDate(parseInt('/Date(1567138282927)/'.substr(6,13)))....
  • } 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中一般有过滤器,...
  • 异常时间:{{ formData.abnormalTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</div> const padDate = function (value) { return value < 10 ? '0' + value : value } filters: { formatDate: ...
  • Vue 日期格式化年月日,时分秒 实现效果,如图: HTML代码: <template> <div> <div style="background-color: #f4f4f4;margin:50px 0 0 460px;width:500px;height:500px;"> <p>原日期...
  • 插件 https://github.com/brockpetrie/vue-moment 安装 ...import Vue from 'vue' const moment = require('moment') // 中文 require('moment/locale/zh-cn') Vue.use(require('vue-moment'),{ ...
  • 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....
  • } }, 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() ...
  • 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 ...
  • 将公共的方法放到commom.js里面,然后再需要的页面直接引入即可 //转为年月日 export var formatDate = function(date) { if (date != '' && date != undefined && date != null) { ...
  • vue调用时间函数并格式化 在平时开发中,我们经常会遇见需要显示时间的地方,这个时候就需要去获取当前的时间 有个方法是new 一个 Date 我们来看看这个函数会打印什么 这函数获取了当前的时间信息,但是有时候我们...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,796
精华内容 7,118
关键字:

vue格式化日期显示