通常我们服务器端的时间使用UTC格式,避免服务器的时区对最终的时间产生影响。而客户端需要根据具体的时区显示local time,本文将介绍如何将服务器的UTC time(基于asp.net web api实现的web service)与客户端的local time(基于ionic实现的hybrid app)进行相互转换。

1. Convert UTC time to local time

应用场景:通常在请求结束之后,把服务器的数据转换成本地数据。

在service中定义filter,需要传入连个参数:utc格式的时间字符串和转换格式。

.filter('utcToLocal', function utcToLocal($filter) {
return function (utcDateString, format) {
if (!utcDateString) {
return;
} if (utcDateString.indexOf('Z') === -1 && utcDateString.indexOf('+') === -1) {
utcDateString += 'Z';
} return $filter('date')(utcDateString, format);
};
})

在页面中使用filter:

<p>{{item.triggeredTimeString|utcToLocal:"yyyy-MM-dd HH:mm:ss"}}</p>

如何在directives中使用呢?需要重新定义utcToLocal函数,调用如下。注意:需要在根指令处声明$filter。

var utcToLocal = function(utcDateString) {
if (!utcDateString) {
return;
} if (utcDateString.indexOf('Z') === -1 && utcDateString.indexOf('+') === -1) {
utcDateString += 'Z';
} return $filter('date')(utcDateString, "yyyy-MM-dd HH:mm:ss");
} $filter('date')(utcDateString, "yyyy-MM-dd HH:mm:ss");

2. Convert local time to UTC time

应用场景:通常调用服务发送数据时使用。

2.1 定义一个函数,使用UTC Date的构造函数来生成UTC时间。

var toUTCDate = function(date){
var _utc = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
return _utc;
}; var localTime = new Date();
var utcTime = toUTCDate(localTime);
$log.info(localTime);
$log.info(utcTime);

2.2 直接使用库函数toUTCString:

var localTime = new Date();
var utc = localTime.toUTCString();

2.3 使用Moment.js

var localTime = new Date();
moment.utc(localTime);

2.4 扩展库函数,封装addDays和convertToUtcString:

Date.prototype.convertToUtcString = function() {
return (this.getUTCMonth()+1) + "-" + this.getUTCDate() + "-" + this.getUTCFullYear() + " " + this.getUTCHours() + ":" + this.getUTCMinutes() + ":" + this.getUTCSeconds();
} Date.prototype.convertToLocalString = function() {
return (this.getMonth()+1) + "-" + this.getDate() + "-" + this.getFullYear() + " " + this.getHours() + ":" + this.getMinutes() + ":" + this.getSeconds();
} Date.prototype.getYtdUtcString = function() {
return "1-1-" + this.getFullYear() + " 12:00:00";
} Date.prototype.addDays = function(num) {
var value = this.valueOf();
value += 86400000 * num;
return new Date(value);
}

参考资料:

http://stackoverflow.com/questions/31778624/converting-local-time-into-utc-time-in-angularjs

https://github.com/urish/angular-moment

http://stackoverflow.com/questions/31785364/converting-date-from-local-time-zone-to-utc-and-then-to-local

第十九章:UTC time和local time的互换的更多相关文章

  1. Python之路【第十九章】:Django进阶

    Django路由规则 1.基于正则的URL 在templates目录下创建index.html.detail.html文件 <!DOCTYPE html> <html lang=&q ...

  2. 【C++】《C++ Primer 》第十九章

    第十九章 特殊工具与技术 一.控制内存分配 1. 重载new和delete new表达式的工作机理: string *sp = new string("a value"); //分 ...

  3. 第十九章——使用资源调控器管理资源(1)——使用SQLServer Management Studio 配置资源调控器

    原文:第十九章--使用资源调控器管理资源(1)--使用SQLServer Management Studio 配置资源调控器 本系列包含: 1. 使用SQLServer Management Stud ...

  4. 第十九章——使用资源调控器管理资源(2)——使用T-SQL配置资源调控器

    原文:第十九章--使用资源调控器管理资源(2)--使用T-SQL配置资源调控器 前言: 在前一章已经演示了如何使用SSMS来配置资源调控器.但是作为DBA,总有需要写脚本的时候,因为它可以重用及扩展. ...

  5. 第十九章 Django的ORM映射机制

    第十九章 Django的ORM映射机制 第一课 Django获取多个数据以及文件上传 1.获取多选的结果(checkbox,select/option)时: req.POST.getlist('fav ...

  6. Gradle 1.12用户指南翻译——第四十九章. Build Dashboard 插件

    本文由CSDN博客貌似掉线翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...

  7. Gradle 1.12翻译——第十九章. Gradle 守护进程

    有关其他已翻译的章节请关注Github上的项目:https://github.com/msdx/gradledoc/tree/1.12,或访问:http://gradledoc.qiniudn.com ...

  8. Gradle 1.12用户指南翻译——第二十九章. Checkstyle 插件

    其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Github上的地址: https://g ...

  9. Gradle 1.12用户指南翻译——第三十九章. IDEA 插件

    本文由CSDN博客万一博主翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...

  10. “全栈2019”Java多线程第二十九章:可重入锁与不可重入锁详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

随机推荐

  1. 关于Java异常一段很有意思的代码

    今天学习了Java的异常,讲到try-catch-finally时,老师演示了一段代码,觉得很有意思,很能反映出其执行的过程,让自己有点绕,特意记录一下. 只要代码执行到try代码内部, 不管有没有异 ...

  2. arcconf工具相关命令V1.0

    arcconf工具相关命令V1.0 清除当前所有raid配置 Arcconf  delete  1  array  all       #删除所有逻辑盘 Arcconf  uninit  1  all ...

  3. MQ入门总结(一)消息队列概念和使用场景

    一.消息队列 消息即是信息的载体.为了让消息发送者和消息接收者都能够明白消息所承载的信息(消息发送者需要知道如何构造消息:消息接收者需要知道如何解析消息),它们就需要按照一种统一的格式描述消息,这种统 ...

  4. 洛谷P4012 深海机器人问题(费用流)

    传送门 图给的好坑……还得倒过来…… 用大佬的图做个示范 我们考虑左图吧 把每一个点向下连边,容量$1$,费用为给出的价值(表示一个机器人可以过去取得标本) 再连一条边,容量$inf$,费用$0$(表 ...

  5. [转载]ssget 用法详解 by yxp

    总结得很好的ssget用法.....如此好文,必须转载. 原文地址: http://blog.csdn.net/yxp_xa/article/details/72229202 ssget 用法详解 b ...

  6. java开发系统内核:让内核从严重错误中恢复

    更详细的讲解和代码调试演示过程,请参看视频 用java开发C语言编译器 更详细的讲解和代码调试演示过程,请参看视频 如何进入google,算法面试技能全面提升指南 如果你对机器学习感兴趣,请参看一下链 ...

  7. 【智能算法】迭代局部搜索(Iterated Local Search, ILS)详解

    迭代局部搜索(Iterated Local Search, ILS) 源代码下载请关注微信公众号[程序猿声],在后台回复:[ILS],不包括[]即可下载. 00 目录 局部搜索算法 简单局部搜索 迭代 ...

  8. Flume自定义拦截器(Interceptors)或自带拦截器时的一些经验技巧总结(图文详解)

    不多说,直接上干货! 一.自定义拦截器类型必须是:类全名$内部类名,其实就是内部类名称 如:zhouls.bigdata.MySearchAndReplaceInterceptor$Builder 二 ...

  9. [SCOI2009]windy数 BZOJ1026 数位dp

    题目描述 windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道, 在A和B之间,包括A和B,总共有多少个windy数? 输入输出格式 输 ...

  10. [HNOI2006]公路修建问题 BZOJ1196 Kruskal

    题目描述 输入输出格式 输入格式: 在实际评测时,将只会有m-1行公路 输出格式: 输入输出样例 输入样例#1: 复制 4 2 5 1 2 6 5 1 3 3 1 2 3 9 4 2 4 6 1 输出 ...