Vue.js 时间转换代码及时间戳转时间字符串

 更新时间:2018年10月16日 11:43:29   作者:tangong0439  
这篇文章主要介绍了Vue.js 时间转换代码及时间戳转时间字符串,需要的朋友可以参考下

Date.prototype.format = function(format){
 var o = {
 "M+" : this.getMonth()+1, //month
 "d+" : this.getDate(), //day
 "h+" : this.getHours(), //hour
 "m+" : this.getMinutes(), //minute
 "s+" : this.getSeconds(), //second
 "q+" : Math.floor((this.getMonth()+3)/3), //quarter
 "S" : this.getMilliseconds() //millisecond
 }
if(/(y+)/i.test(format)) {
 format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
 }
for(var k in o) {
 if(new RegExp("("+ k +")").test(format)) {
 format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
 }
 }
 return format;
 }
//使用方法
var now = new Date();
 var nowStr = now.format("yyyy-MM-dd hh:mm:ss");
 //使用方法2:
 var testDate = new Date();
 var testStr = testDate.format("YYYY年MM月dd日hh小时mm分ss秒");
alert(testStr);
 //示例:
alert(new Date().format("yyyy年MM月dd日"));
alert(new Date().format("MM/dd/yyyy"));
 alert(new Date().format("yyyyMMdd"));
 alert(new Date().format("yyyy-MM-dd hh:mm:ss"));

代码:

// 格式化formatter中显示的时间格式
// Date.prototype.Format = function(fmt) {
 // const 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 (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;
 // };

应用:

1、 2018-10-10 转 年月日

// new Date(this.envPlanList[i].starttime.slice(0, 4),
// this.envPlanList[i].starttime.slice(5, 7),
// this.envPlanList[i].starttime.slice(8, 10)),
// new Date(this.envPlanList[i].endtime.slice(0, 4),
// this.envPlanList[i].endtime.slice(5, 7),
// this.envPlanList[i].endtime.slice(8, 10)),

2、 年月日 转 2018-10-10

formatter(params) {
return `${params.name}: ${new Date(params.value[1]).Format('yyyy/MM/dd')} - - ${new Date(params.value[2]).Format('yyyy/MM/dd')} -- ${params.value[3]}`;
// return `${params.name}: ${params.value[1]} -- ${params.value[2]} -- ${params.value[3]}`;
},

下面看下vue.js时间戳转时间字符串

formartDate(param) {
 let date = new Date(param);
 Y = date.getFullYear() + '-';
 M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
 D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
 h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
 m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
 s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
 return Y + M + D + h + m + s;
}

总结

以上所述是小编给大家介绍的Vue.js 时间转换代码及时间戳转时间字符串,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue实现tab切换的放大镜效果

    vue实现tab切换的放大镜效果

    这篇文章主要为大家详细介绍了vue实现tab切换的放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • Vue父子模版传值及组件传值的三种方法

    Vue父子模版传值及组件传值的三种方法

    这篇文章主要介绍了Vue父子模版传值及组件传值的三种方法,需要的朋友可以参考下
    2017-11-11
  • Vue使用video标签实现视频播放

    Vue使用video标签实现视频播放

    这篇文章主要为大家详细介绍了Vue使用video标签实现视频播放,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • element-ui组件table实现自定义筛选功能的示例代码

    element-ui组件table实现自定义筛选功能的示例代码

    这篇文章主要介绍了element-ui组件table实现自定义筛选功能的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 使用vue-i18n 入口文件配置控制台报警问题解决

    使用vue-i18n 入口文件配置控制台报警问题解决

    这篇文章主要介绍了使用vue-i18n 入口文件配置控制台报警问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • Vue.js实战之组件的进阶

    Vue.js实战之组件的进阶

    组件(Component)是 Vue.js 最强大的功能之一,之前的文章都只是用到了基本的封装功能,这次将介绍一些更强大的扩展。这篇文章主要介绍了Vue.js实战之组件进阶的相关资料,需要的朋友们可以参考借鉴,下面来一起看看吧。
    2017-04-04
  • Vue 实现对quill-editor组件中的工具栏添加title

    Vue 实现对quill-editor组件中的工具栏添加title

    这篇文章主要介绍了Vue 实现对quill-editor组件中的工具栏添加title,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • elementUI Pagination 分页指定最大页的问题及解决方法(page-count)

    elementUI Pagination 分页指定最大页的问题及解决方法(page-count)

    项目中遇到数据量大,查询的字段多,但用户主要使用的是最近的一些数据,1万条以后的数据一般不使用,这篇文章主要介绍了elementUI Pagination 分页指定最大页的问题及解决方法(page-count),需要的朋友可以参考下
    2024-08-08
  • vue v-on传递参数和事件修饰符的使用

    vue v-on传递参数和事件修饰符的使用

    本文主要介绍了vue v-on传递参数和事件修饰符的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-01-01
  • elementplus el-table(行列互换)转置的两种方法

    elementplus el-table(行列互换)转置的两种方法

    本文主要介绍了elementplus el-table(行列互换)转置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-06-06

最新评论