Angular中关于时间的操作总结

mengera88 发布于2019-08-22 16:13 / 2740人阅读

摘要：上显示出来时间本地系统显示时间发送前控制台打印出来浏览器网络中监测显示解决方案只有在发送时间类型的数据时会进行转换，导致相差个小时，但是我发送前就将其转换成字符串，就不会造成这样的结果了。

创建时间

使用new Date(),可以看见有5种构造函数

    console.log(new Date()); // 当前时间
    console.log(new Date("2015-08-12 12:30"));// 字符串
    console.log(new Date(12345679));//时间戳
    console.log(new Date(2018, 3, 20, 12, 30));//指定年月日等

如果要创建一个时间为当日的日期不包含时间的值

 console.log(new Date(new Date().toLocaleDateString()));

时间计算

通常可以转换成时间戳的方式进行计算

    const endTime = new Date(new Date().toLocaleDateString());
    let d = endTime.valueOf(); // 时间戳
    d -= 7 * 24 * 60 * 60 * 1000;
    const startTime = new Date(d);
    console.log(startTime);
    console.log(endTime);
    console.log(d);

时间转换

    console.log(new Date().toTimeString());
    console.log(new Date().toLocaleDateString());
    console.log(new Date().toDateString());
    console.log(new Date().getTime());

Angular 自带的时间管道

现在的时间是{{today | date:"yyyy-MM-dd HH:mm:ss"}}

第三方插件

moment.js

这是一个很强大的时间插件，这里用一个应用场景来演示。

nodejs上的时间和我本地的时间总是相差8个小时，这导致我每次发送时间到后台时，nodejs将时间转化成字符串传送出去的时候总是和我服务器上的时间相差8小时。
node上显示出来时间

本地系统显示时间

发送前控制台打印出来

浏览器网络中监测显示

解决方案

nodejs只有在发送时间类型的数据时会进行转换，导致相差8个小时，但是我发送前就将其转换成字符串，就不会造成这样的结果了。
所以对angular的http进行封装，在发送前将body中的时间类型转换成字符串类型

    post(url: string, body?: any, params?: any,headers?:any) {
        this.begin();
        return this.http
            .post(url, this.parseBody(body) || null, {
                headers:this.parseHeaders(headers),
                params: this.parseParams(params)
            })
    }
  parseBody(body: any) {
    if (body) {
      for (const key in body) {
        if (body[key]) {
          const _data = body[key];
          // 将时间转化为字符串
          if (moment.isDate(_data)) {
            body[key] = moment(_data).format("YYYY-MM-DD HH:mm:ss");
          }
        }
      }
    }
    return body;
  }

其中用到了moment.js 的两个方法，一个时判断是否时时间类型moment.isDate（_data）另一个时转换成字符串moment(_data).format("YYYY-MM-DD HH:mm:ss");
关于更多用法可以参考官网

GPU云服务器云服务器 php中关于的运算 linux中关闭防火墙的命令时间操作函数时间控件操作

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94154.html

前端练级攻略(第二部分)

摘要：是文档的一种表示结构。这些任务大部分都是基于它。这个实践的重点是把你在前端练级攻略第部分中学到的一些东西和结合起来。一旦你进入框架部分，你将更好地理解并使用它们。到目前为止，你一直在使用进行操作。它是在前端系统像今天这样复杂之前编写的。本文是前端练级攻略第二部分，第一部分请看下面：前端练级攻略(第一部分) 在第二部分，我们将重点学习 JavaScript 作为一种独立的语言，如...

BWrong 2019-08-23 16:49 评论0 收藏0
JavaScript数据双向绑定的简单演示

摘要：对于前端，有时候需要实现视图层和数据层的双向绑定例如当前流行的各种框架和类库。为代表前端数据劫持。参考资料实现数据双向绑定的三种方式谈谈中的双向数据绑定非常简单的双向数据绑定框架三对于前端，有时候需要实现视图层和数据层的双向绑定(two-way-binding), 例如当前流行的各种框架和类库:Vue.js、Angular.js、React.js。然而，他们最原始的实现方式其实都相...

snifes 2019-08-19 17:57 评论0 收藏0
Angular4的QuickStart—— ES6 而非TypeScript

摘要：今年月份，官方发布了新版，新版本的特性已经有很多文章了，在此不一一赘述。组件是系统中最重要的基本构造块之一。但是由于目前不支持装饰器语法，因此通过方法完成这一工作。本文主要是提供一个基于的，如有问题，欢迎留言探讨。原文发表于本人的个人博客，地址：Angular4的QuickStart——With ES6 Not TypeScript，欢迎反馈探讨。今年3月份，Angular官方发布...

jkyin 2019-08-21 11:44 评论0 收藏0
聊聊面试中关于并发问题的应对方案

摘要：这里呢，我直接给出高并发场景通常都会考虑的一些解决思路和手段结尾如何有效的准备面试中并发类问题，我已经给出我的理解。 showImg(https://segmentfault.com/img/bV7Viy?w=550&h=405); 主题又到面试季了，从群里，看到许多同学分享了自己的面试题目，我也抽空在网上搜索了一些许多公司使用的面试题，目前校招和社招的面试题基本都集中在几个大方向上...

xzavier 2019-08-15 15:19 评论0 收藏0
【译】前端练级攻略

摘要：由于系统变得越来越复杂，人们提出了称为预处理器和后处理器的工具来管理复杂性。后处理器在由预处理器手写或编译后对应用更改。我之前建议的文章，，也涵盖了预处理器相关的知识。译者：前端小智原文：medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我记得我刚开始学习前端开发的时候。我看到了很多文章及...

wuyumin 2019-05-22 16:41 评论0 收藏0