精华内容
下载资源
问答
  • 前端格式化日期(vue)
    千次阅读
    2019-04-12 13:57:34

    在前后端请求的时候,有啥时候后端返回前段的请求结果里的日期为long类型的值,需要前段来自己进行格式化,最近遇到这个问题记录一下,在本例子中使用的是VUE

    主要思路为,写一个filter.js文件,里面添加格式化日期的function formatDate( ),然后在main.js里编写过滤器调用formatDate,之后再需要进行格式化的位置引入main.js然后使用过滤器就可以了。

    ```filter.js
    function formatDate(fmt,time) {
    const a = new Date()
    const o = {
    ‘M+’: time.getMonth() + 1, // 月份
    ‘d+’: time.getDate(), // 日
    ‘h+’: time.getHours(), // 小时
    ‘m+’: time.getMinutes(), // 分
    ‘s+’: time.getSeconds(), // 秒
    ‘q+’: Math.floor((time.getMonth() + 3) / 3), // 季度
    ‘S’: time.getMilliseconds() // 毫秒
    };
    if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (time.getFullYear() + ‘’).substr(4 - RegExp.$1.length));
    }
    for (const k in o) {
    if (new RegExp(’(’ + k + ‘)’).test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ?
    (o[k]) : ((‘00’ + o[k]).substr((’’ + o[k]).length)));
    }
    }
    return fmt;
    };

    
    ``**`main.js**
     new_element=document.createElement("script");
     new_element.setAttribute("type","text/javascript");
    new_element.setAttribute("src","js/filter.js");// 在这里引入了filter.js
     document.body.appendChild(new_element);
    	Vue.filter('format',function(value){
    		return formatDate('yyyy-MM-dd hh:mm:ss',new Date(value))
    	})
    

    ```test.html

    </head>
    <body>
    	<div id="ajaxtest">
    		 <p>{{message | format }}</p>
    	</div>
    
    	<script type="text/javascript">
    	window.onload = function(){
    		new Vue({
    		  el: '#ajaxtest',
    		  data: {
    		    message: 1554687619620
    		  }
    		})
    	}
    	</script>
    </body>
    
    ``` 注意,再html引入main.js时需在body后面,详情见下文 https://www.cnblogs.com/shijingxiang/articles/4941790.html
    更多相关内容
  • 前端格式化时间

    千次阅读 2020-01-05 11:42:45
    // 对Date的扩展,将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) // (new ...

    方法一:
    import moment from "moment";
    在这里插入图片描述
    方法二

    // 对Date的扩展,将 Date 转化为指定格式的String
    // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,
    // 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
    // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
    // (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1,                   //月份
            "d+": this.getDate(),                        //日
            "h+": this.getHours(),                       //小时
            "m+": this.getMinutes(),                     //分
            "s+": this.getSeconds(),                     //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds()                  //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }   
    
    export function formatTimeToStr(times, pattern) {
        var d = new Date(times).Format("yyyy-MM-dd hh:mm:ss");
        if (pattern) {
            d = new Date(times).Format(pattern);
        }
        return d.toLocaleString();
    }
    

    导入上面的js文件,import { formatTimeToStr } from "xxxxx"
    在这里插入图片描述
    方法三(elemenUI el-table)

    在这里插入图片描述
    在这里插入图片描述
    方法四(elemenUI date-picker绑定当前时间)
    在这里插入图片描述
    在这里插入图片描述

        getNowTime() {
          var now = new Date();
          var year = now.getFullYear(); //得到年份
          var month = now.getMonth(); //得到月份
          var date = now.getDate(); //得到日期
          month = month + 1;
          month = month.toString().padStart(2, "0");
          date = date.toString().padStart(2, "0");
          var defaultDate = `${year}${month}${date}`;
          return defaultDate;
          this.$set(this.option, "fromDate", defaultDate);
          this.$set(this.option, "endDate", defaultDate);
        }
      }
    
    展开全文
  • 前端日期格式化

    2021-03-22 22:34:42
    js方法返回值:yyyy-MM-dd HH:mm:ss function (date) { var y = date.getFullYear(); var m = date.getMonth() + 1; m = m < 10 ? ('0' + m) : m; var d = date.getDate(); d = d <...

    js方法返回值:yyyy-MM-dd HH:mm:ss

    function (date) {  
        var y = date.getFullYear();  
        var m = date.getMonth() + 1;  
        m = m < 10 ? ('0' + m) : m;  
        var d = date.getDate();  
        d = d < 10 ? ('0' + d) : d;  
        var h = date.getHours();  
        h=h < 10 ? ('0' + h) : h;  
        var minute = date.getMinutes();  
        minute = minute < 10 ? ('0' + minute) : minute;  
        var second=date.getSeconds();  
        second=second < 10 ? ('0' + second) : second;  
        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;  
    };  
    

    详细的看:https://blog.csdn.net/qq_39759115/article/details/78893853

    展开全文
  • 简单实用,亲测我直接上使用源码吧:var curr_time = getBeforeDate(0);//当前时间 var beginday = getBeforeDate(7);//7天前 var str = strValue("'是的萨''123''''");
  • 最近写项目用到了时间格式化,想自己封装一个,发现自己没有那个能力,这就尴尬了,还好有万能的网友大神们,找到了data-format这个插件,用起来还是很丝滑的,上效果 下面来说说使用步骤: 1 安装 npm install ...

    最近写项目用到了时间格式化,想自己封装一个,发现自己没有那个能力,这就尴尬了,还好有万能的网友大神们,找到了data-format这个插件,用起来还是很丝滑的,上效果
    在这里插入图片描述

    下面来说说使用步骤:
    1 安装

    npm install dayjs 
    或
    yarn add dayjs
    

    2 封装

    data-format.ts
    import dayjs from 'dayjs'
    import utc from 'dayjs/plugin/utc'
    
    
    dayjs.extend(utc)
    
    const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'
    export function formatUtsString(
      utcString: string,
      format: string = DATE_TIME_FORMAT
    ) {
      return dayjs.utc(utcString).format(format)
    }
    
    register-properties.ts
    import { App } from 'vue'
    import { formatUtsString } from '@/utils/data-format'
    export default function regeisterProperties(app: App) {
      app.config.globalProperties.$filters = {
        formatTime(value: string) {
          return formatUtsString(value)
        }
      }
    }
    

    3 注册

     import regeisterProperties from './register-properties' 
     app.use(regeisterProperties)
    

    可在main.ts里全局注册
    4 使用

     $filters.formatTime(需格式化的时间)
    
    展开全文
  • React前端格式化时间

    千次阅读 2021-06-27 21:11:10
    import moment from "moment"; ...DatePicker label="时间" name="insertTime" showTime onChange={onChange} onOk={onOk} defaultValue={moment(location?.defaultValues?.record?.insertTime,.
  • js前端日期格式化处理 将有时区的时间转换为yyyy-MM-dd HH:mm:ss格式 //加0方法 add0(m) { return m < 10 ? "0" + m : m; }, //调用加0,规定时分秒正确格式 GMTToStr(time) { let date = new Date(time);...
  • 1 获取上月第一天的零点时间戳; 2 获取下月第一天的零点时间戳; 3 获取某月第一天的零点时间戳; 4 获取某月最后一天的最后一刻时间戳; 5 获取上年第一天的零点时间戳; 6 获取下年第一天的零点时间戳;...
  • 前端格式化标准时间

    2020-03-20 15:52:06
    timeFormat(time) { var d = time; var year = d.getFullYear(); //年 var month = d.getMonth() + 1; //月 var day = d.getDate(); //日 var hh = d.getHours(); //时 var mm = d.getMinutes();... v...
  • JS 日期格式化

    2015-07-08 09:54:04
    JS 日期格式化和加减,适用于将日期格式转化为yyyy-MM-DD HH:mm:ss格式,以及日期的加减
  • javascript前端日期格式化

    千次阅读 2020-08-05 09:50:50
    有的时候,前端直接将日期输出,会将时分秒一起输出出来,如图: 但有的时候,我们只需要前面的日期(2020-08-04),在前端加个转换即可。 function changeDateFormat(cellval) { if (cellval) { var date = ...
  • JS 前端时间格式化

    2021-07-29 14:42:19
    JS 前端时间格式化 时间转换方法 function dateFormat(fmt, date) { //有时候我们传进来的不一定是Date 类型的 // var date=new Data("传入的参数") let ret; const opt = { "Y+": date.getFullYear()....
  • Vue前端时间戳格式化

    2019-10-04 14:55:06
    转载于:https://www.cnblogs.com/fkg4816/p/11381083.html
  • JS前端时间格式化

    2019-10-08 11:30:33
    var dateTime = new Date(tree_time); tree_time = dateTime.getFullYear() + '-'+ (dateTime.getMonth()+1) + '-'+ dateTime.getDate() +' '+ dateTime.getHours()+ ':'+ dateTime.getMinutes();...注意:日期是...
  • 查找原因,居然是前端日期格式化导致的问题。很遗憾,前任留下的bug,只能我们来背。 问题复现 // 时间戳: 1546272000000 真实时间是 2019-01-01 00:00:00 var d = new Date(1546272000000); console.log(d....
  • 出生日期: ({maxDate:'2017-07-24'})" style="width: 160px;" /> 然后是js中这样表示: $("#birthday").text("<span><fmt:formatDate value='{patient.birthday}' type='both' pattern='yyyy-MM-dd' ...
  • 问题:jsp前端页面获取到时间数据后显示出:“Thu Apr 19 08:37:23 CST 2018”格式,显示效果不友好,欲将其转换为“yyyy-mm-dd hh:mm:ss”格式。 解决方案: 1 <!-- 添加标签 --> 2 <%@ taglib prefix=...
  • 主要介绍了springboot全局日期格式化的两种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 时间 {{ datetime_start | date:"Y-m-d H:i:s" }} 星期
  • 需要将其转换为格式化日期显示。即 年 月 日。引入fmt:formatDate 首先在页面引用标签库: <%@ taglib prefix=“fmt” uri=“http://java.sun.com/jsp/jstl/fmt”%> 然后将数据库查来数据在以下标签中格式化...
  • 主要介绍了vue过滤器实现日期格式化的案例分析,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 今天小编就为大家分享一篇Vue filter格式化时间戳时间成标准日期格式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 前端.时间戳&&dateformat时间格式化

    千次阅读 2018-04-23 14:42:51
    今天记一下的是时间戳与时间格式化的运用。 —————————————————————————————————————————————— 先是实现的时间戳函数 Date.parse(time)//time中需带有日期...
  • 前端代码格式化工具

    千次阅读 2022-03-11 15:19:25
    前端代码格式化工具 前言 在多人合作开发项目的过程中,由于每个程序员的编程习惯不同,经常会出现代码风格不一致的情况。 由此引发出了一个问题 ---- 代码提交时,会出现大量的格式修改。 于是,我们制定了统一的...
  • @Transient @JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd HH:mm:ss") @DateTimeFormat(pattern = "yyyy-MM-dd HH:...@ApiModelProperty(value = "createTime", name = "开票时间") private Date createTime;
  • SpringBoot返回前端时间格式化处理

    千次阅读 2020-04-26 17:07:51
    在开发中返回前端数据的时候,如果时间格式不做处理的话,前端拿到的数据,时间格式是如下图所示的: 方式一:前台转换 在用Layui做写后台页面的时候,用layui提供的一个工具转化也是可以的 templet: '<div>{...
  • 问题描述:服务器一般不会返回2020-9-9 11:11这种时间格式,一般都是返回Unix时间元年为起点的相应时间戳,一串数字1535694719,那么前端如何将时间戳转成时间格式字符串呢? 1.将时间戳转成Date对象 //时间戳是秒,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 151,386
精华内容 60,554
关键字:

前端格式化日期

友情链接: demo1.rar