Question

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

Answer 1

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

控制器：

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

视图：

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

JSFiddle example

Angular Date Filter Ref

Answer 2

如果您不希望每次要打印日期时都必须将日期对象附加到当前作用域，也可以使用过滤器执行此操作：

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

然后在你看来：

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

Answer 3

<强>模板

<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对象（对于内联解决方案），所以我选择了此指令。它还可以使控制器保持清洁并可重复使用。

Answer 4

嗯，你可以用胡子表达式（{{Date.now() | date:'dd.MM.yyyy HH:mm:ss'}}）来做。您只需将Date对象分配给要评估此表达式的范围。

这是jsfiddle示例：jsfiddle

但不要指望它会自动更新值。这个值不是由角度监视的，因此每次你想要更新它时都必须触发摘要（例如，按$ interval）...这是浪费资源（在文档中也没有“推荐”）。当然，您可以使用与指令/控制器的组合来混淆子范围（它总是小于例如rootScope和digest会更快）。

Answer 5

只是我的2美分以防有人偶然发现：）

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

Reference滚动到第一个“注意”（抱歉它没有锚点）

以下是推荐方式：

控制器：

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>

Answer 6

您可以在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>

Answer 7

以下是您的答案示例：http://plnkr.co/edit/MKugkgCSpdZFefSeDRi7?p=preview

<span>Date Of Birth: {{DateOfBirth | date:"dd-MM-yyyy"}}</span>
<input type="text" datepicker-popup="dd/MM/yyyy" ng-model="DateOfBirth" class="form-control" />

然后在控制器中：

$scope.DateOfBirth = new Date();

Answer 8

查看

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

<强>控制器

var app = angular.module（＆＃39; myapp＆＃39;，[]）

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

Answer 9

使用过滤器类似于the one of @Nick G.的解决方案，但使参数有意义：

实现一个名为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>

Answer 10

另一种做法是：在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>

Answer 11

<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>

Angularjs - 显示当前日期

11 个答案: