你的位置:首页 > Java教程

[Java教程]Angularjs中对时间格式:/Date/ 的处理


      我们在后台对数据进行json序列化时,如果数据中包含有日期,序列化后的结果可能是这样的: /Date(1448864369815)/  。asp.net mvc 中的 Json() 方法执行后的结果就是如此。可是往往我们要在前台显示正常的日期格式,该如何处理呢?

      在angularjs(后面简称 ng)中处理起来还是挺方便的,ng中内置有一个专门做日期格式化的过滤器(filter): date

  其使用方法很简单: 有两种使用方法,代码所示如下

<!DOCTYPE html><html ng-app="demo"><head>  <meta charset="utf-8"/>  <title>Demo</title></head><body ng-controller="demoCtrl">  <!-- 表达式中使用 -->  {{dt1 | date:'yyyy-MM-dd HH:mm:ss'}}  <br/>  {{dt2}}  <!-- dt1 和 dt2 的输出结果是一样的 -->  <script type="text/javascript" src="angular.min.js"></script>  <script type="text/javascript">    var app = angular.module("demo",[]);     

     //注意必须注入 $filter 模块 app.controller("demoCtrl",["$scope", "$filter", function($scope, $filter) { $scope.dt1 = new Date(); //控制器中使用 $scope.dt2 = $filter("date")($scope.dt1, "yyyy-MM-dd HH:mm:ss");

     }]);

   </script>
</body>
</html>

 

       由于 $filter("date")(param, format) 中的 param 是可以接收时间戳的,所以如果我们的日期格式是: /Date(1448864369815)/ 这样的,我们只要获取到里面的时间戳(即: 1448864369815),就可以进行格式转换了。

//前台输出dt3结果为 2015-11-30 14:19:29$scope.dt3 = $filter("date")(1448864369815, "yyyy-MM-dd HH:mm:ss");

      

   从 /Date(1448864369815)/ 中获取到时间戳的方法如下:    

var _dt = "/Date(1448864369815)/";
//转成 数字 类型
var timestamp = Number(_dt.replace(/\/Date\((\d+)\)\//, "$1"));

 

  在 ng 中是支持自定义过滤器的(自定义过滤器如果不会,请自行百度),因此我们可以在原有的 date过滤器下进行一次包装,实现由 /Date(1448864369815)/ 到常

规时间格式的转换。代码如下:

app.filter("jsonDate", function($filter) {   return function(input, format) {      //从字符串 /Date(1448864369815)/ 得到时间戳 1448864369815      var timestamp = Number(input.replace(/\/Date\((\d+)\)\//, "$1"));      //转成指定格式      return $filter("date")(timestamp, format);   };});

 

实现后,就可以像内置的 date 过滤器一样使用了,如下:

<!DOCTYPE html><html ng-app="demo"><head>  <meta charset="utf-8"/>  <title>Demo</title></head><body ng-controller="demoCtrl">  <!-- 表达式中使用 -->  {{jsondt | jsonDate:'yyyy-MM-dd HH:mm:ss'}}  <br/>  {{dt3}}  <!-- 两个的输出结果是一样的 -->  <script type="text/javascript" src="angular.min.js"></script>  <script type="text/javascript">    var app = angular.module("demo",[]);    app.controller("demoCtrl",["$scope", "$filter", function($scope, $filter) {      $scope.jsondt = "/Date(1448864369815)/";      //控制器中使用      $scope.dt3 = $filter("jsonDate")($scope.jsondt, "yyyy-MM-dd HH:mm:ss");           }]);    //自定义过滤器 jsonDate    app.filter("jsonDate", function($filter) {      return function(input, format) {        //从字符串 /Date(1448864369815)/ 得到时间戳 1448864369815        var timestamp = Number(input.replace(/\/Date\((\d+)\)\//, "$1"));        //转成指定格式        return $filter("date")(timestamp, format);      };    });  </script></body></html>

 

最后提供一个原生js的处理方法:

function jsonDateFormat (jsonDt, format) {      var date, timestamp, dtObj;      timestamp = jsonDt.replace(/\/Date\((\d+)\)\//, "$1");      date = new Date(Number(timestamp));      dtObj = {        "M+": date.getMonth() + 1,  //月        "d+": date.getDate(),    //日        "h+": date.getHours(),    //时        "m+": date.getMinutes(),   //分        "s+": date.getSeconds(),   //秒      };
        //因为年份是4位数,所以单独拿出来处理 if (/(y+)/.test(format)) { format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); }       
       //遍历dtObj for (var k in dtObj) {

          //dtObj的属性名作为正则进行匹配 if (new RegExp("(" + k + ")").test(format)) {

            //月,日,时,分,秒 小于10时前面补 0 format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? dtObj[k] : ("00" + dtObj[k]).substr(("" + dtObj[k]).length)); } } return format; } //调用 jsonDateFormat("/Date(1448864369815)/","yyyy-MM-dd hh:mm:ss");