AngularJS-显示当前日期


128

我在angularjs中有一个视图,我只是想显示当前日期(格式化)。我认为<span>{{Date.now() | date:'yyyy-MM-dd'}}</span>应该显示当前日期。


会..但不知道Date.now()
putvande 2014年

2
所以我必须先在控制器中生成变量?我认为类似当前日期这样的简单操作会更容易:)
Evo_x 2014年

1
Date.now()是功能的NodeJS
不然

Answers:


229

您必须首先在控制器中创建日期对象:

控制器:

function Ctrl($scope)
{
    $scope.date = new Date();
}

视图:

<div ng-app ng-controller="Ctrl">
    {{date | date:'yyyy-MM-dd'}}
</div>

JSFiddle示例

角度日期过滤器参考


您好@sloth我想使用cgi显示当前系统时间。我怎么可能做到这一点还是可能的感谢?
bleyk

44

如果不想每次打印日期时都必须将日期对象附加到当前作用域,则也可以使用过滤器执行此操作:

.filter('currentdate',['$filter',  function($filter) {
    return function() {
        return $filter('date')(new Date(), 'yyyy-MM-dd');
    };
}])

然后您认为:

<div ng-app="myApp">
    <div>{{'' | currentdate}}</div>
</div>

5
然后,他也可以发出指令
arg20

23

模板

<span date-now="MM/dd/yyyy"></span>

指示

.directive('dateNow', ['$filter', function($filter) {
  return {
    link: function( $scope, $element, $attrs) {
      $element.text($filter('date')(new Date(), $attrs.dateNow));
    }
  };
}])

因为您不能直接Date在模板中访问对象(用于内联解决方案),所以我选择了该指令。它还可以使您的控制器保持清洁并可重复使用。


19

好了,您可以使用小胡子表达式({{Date.now() | date:'dd.MM.yyyy HH:mm:ss'}})来实现。您只需要将Date对象分配到要评估此表达式的作用域即可。

这是jsfiddle示例:jsfiddle

但是不要期望它会自动更新价值。这个值不是用angular监视的,因此每次要更新它时都必须触发摘要(例如,通过$ interval)...这是浪费资源的(并且在文档中也不建议使用)。当然,您可以使用结合指令/控制器的组合来仅弄乱子作用域(它总是小于例如rootScope,并且摘要会更快)。


9

万一有人偶然发现我的话,只有我的2美分:)

我在这里建议的结果将与当前答案相同,但是建议按照我在这里提到的方式编写控制器。

参考滚动到第一个“ Note”(很抱歉,它没有锚点)

建议的方法如下:

控制器:

var app = angular.module('myApp', []);   
app.controller( 'MyCtrl', ['$scope', function($scope) {
    $scope.date = new Date();
}]);

视图:

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    {{date | date:'yyyy-MM-dd'}}
  </div>
</div>

2

您可以在AngularJS中使用moment()format()函数。

控制器:

var app = angular.module('demoApp', []);   
app.controller( 'demoCtrl', ['$scope', '$moment' function($scope , $moment) {
$scope.date = $moment().format('MM/DD/YYYY');
}]);

视图:

<div ng-app="demoApp">
  <div ng-controller="demoCtrl">
    {{date}}
  </div>
</div>

2
<script type="text/javascript">
var app = angular.module('sampleapp', [])
app.controller('samplecontrol', function ($scope) {
   var today = new Date();
   console.log($scope.cdate);
   var date = today.getDate();
   var month = today.getMonth();
   var year = today.getFullYear();
   var current_date = date+'/'+month+'/'+year;
   console.log(current_date);
});
</script>


1

视图

<div ng-app="myapp">
{{AssignedDate.now() | date:'yyyy-MM-dd HH:mm:ss'}}
</div>

控制者

var app = angular.module('myapp',[])

app.run(function($rootScope){
    $rootScope.AssignedDate = Date;
})

1

一种类似于@Nick G.的解决方案,方法是使用filter,但是使参数有意义:

实现一个名为的过滤器relativedate,该过滤器通过给定参数diff计算相对于当前日期的日期。结果,(0 | relativedate)意味着今天,(1 | relativedate)意味着明天。

.filter('relativedate', ['$filter', function ($filter) {
  return function (rel, format) {
    let date = new Date();
    date.setDate(date.getDate() + rel);
    return $filter('date')(date, format || 'yyyy-MM-dd')
  };
}]);

和您的html:

<div ng-app="myApp">
    <div>Yesterday: {{-1 | relativedate}}</div>
    <div>Today: {{0 | relativedate}}</div>
    <div>Tomorrow: {{1 | relativedate}}</div>
</div>

1

另一种方法是:在Controller中,创建一个变量以保存当前日期,如下所示:

var eventsApp = angular.module("eventsApp", []);
eventsApp.controller("EventController", function EventController($scope) 
{

 $scope.myDate = Date.now();

});

在HTML视图中,

<!DOCTYPE html>
<html ng-app="eventsApp">
<head>
    <meta charset="utf-8" />
   <title></title>
   <script src="lib/angular/angular.js"></script>
</head>
<body>
<div ng-controller="EventController">
<span>{{myDate | date : 'yyyy-MM-dd'}}</span>
</div>
</body>
</html>

@Billa,我更新了我的代码段。我希望它现在更具描述性。
Sunita
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.