blocks|key|129952|text|你必须首先在你的控制器中创建一个date对象：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|129953|控制器：|129954|function+Ctrl($scope)
{
++++$scope.date+=+new+Date();
}|code-block|syntax|javascript|129955|查看：|129956|<div+ng-app+ng-controller="Ctrl">
++++{{date+%7C+date:'yyyy-MM-dd'}}
</div>|129957|JSFiddle+example|offset|length|129958|Angular+Date+Filter+Ref|129959|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/RyW9m/|1|https://docs.angularjs.org/api/ng/filter/date^0|0|0|0|0|0|0|G|0|0|0|N|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|15|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|17|8|@]|9|@$O|18|P|19|1|1A]]|A|$]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@$O|1C|P|1D|1|1E]]|A|$]]|$1|S|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]]]

<p>You have to create a date object in your controller first:</p>

<p>controller:</p>

<pre><code>function Ctrl($scope)
{
    $scope.date = new Date();
}
</code></pre>

<p>view:</p>

<pre><code>&lt;div ng-app ng-controller="Ctrl"&gt;
    {{date | date:'yyyy-MM-dd'}}
&lt;/div&gt;
</code></pre>

<p><a href="http://jsfiddle.net/RyW9m/" rel="noreferrer">JSFiddle example</a></p>

<p><a href="https://docs.angularjs.org/api/ng/filter/date" rel="noreferrer">Angular Date Filter Ref</a></p>


blocks|key|130082|text|如果不想在每次打印日期时都将日期对象附加到当前范围，也可以使用筛选器执行此操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|130083|.filter('currentdate',['$filter',++function($filter)+{
++++return+function()+{
++++++++return+$filter('date')(new+Date(),+'yyyy-MM-dd');
++++};
}])|code-block|syntax|javascript|130084|然后在您的视图中：|130085|<div+ng-app="myApp">
++++<div>{{''+%7C+currentdate}}</div>
</div>|130086|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You can also do this with a filter if you don't want to have to attach a date object to the current scope every time you want to print the date:</p>

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

<p>and then in your view:</p>

<pre><code>&lt;div ng-app="myApp"&gt;
    &lt;div&gt;{{'' | currentdate}}&lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|130015|text|嗯，你可以用胡子表达式({{Date.now()+%7C+date:'dd.MM.yyyy+HH:mm:ss'}})来实现。您只需将Date对象分配给要计算此表达式的作用域。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|130016|下面是jsfiddle示例：jsfiddle|130017|但不要期望它会自动更新值。这个值不是由angular监视的，所以每次你想要更新它的时候都必须触发摘要(例如，通过$interval+)...which是对资源的浪费(在文档中也不是“推荐”的)。当然，您可以使用与指令/控制器的组合来处理仅限子作用域(它总是比例如rootScope和digest更快)。|130018|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/628cf/1/^0|C|17|0|E|8|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]]|E|$]]|$1|H|3|I|5|6|7|Y|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

<p>Well, You can do it with mustache expression (<code>{{Date.now() | date:'dd.MM.yyyy HH:mm:ss'}}</code>). You just need to assign the Date object to scope where You want to evaluate this expression. </p>

<p>Here's jsfiddle example: <a href="http://jsfiddle.net/628cf/1/">jsfiddle</a></p>

<p>But don't expect it to update value automatically. This value is not watched by angular so You have to trigger digest every time You want to get it updated (by $interval for example)...which is waste of resources (and also not "recommended" in docs). Of course You can get to use of combination with directives/controllers to mess around with child scope only (it's always smaller than for example rootScope and digest will be quicker).</p>


blocks|key|130209|text|<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%2B'/'%2Bmonth%2B'/'%2Byear;
+++console.log(current_date);
});
</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|130210|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;script type="text/javascript"&gt;
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);
});
&lt;/script&gt;
</code></pre>


blocks|key|130099|text|以下是您的答案示例：http://plnkr.co/edit/MKugkgCSpdZFefSeDRi7?p=preview|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|130100|<span>Date+Of+Birth:+{{DateOfBirth+%7C+date:"dd-MM-yyyy"}}</span>
<input+type="text"+datepicker-popup="dd/MM/yyyy"+ng-model="DateOfBirth"+class="form-control"+/>|code-block|syntax|javascript|130101|然后在控制器中：|130102|$scope.DateOfBirth+=+new+Date();|130103|entityMap|0|LINK|mutability|MUTABLE|url|http://plnkr.co/edit/MKugkgCSpdZFefSeDRi7?p=preview^0|A|1F|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>Here is the sample of your answer: <a href="http://plnkr.co/edit/MKugkgCSpdZFefSeDRi7?p=preview" rel="nofollow">http://plnkr.co/edit/MKugkgCSpdZFefSeDRi7?p=preview</a></p>

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

<p>and then in the controller:</p>

<pre><code>$scope.DateOfBirth = new Date();
</code></pre>


blocks|key|4636481|text|类似于使用filter的the+one+of+@Nick+G.的解决方案，但使参数更有意义：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4636482|实现一个名为relativedate的筛选器，该筛选器根据给定参数diff计算相对于当前日期的日期。因此，(0+%7C+relativedate)意味着今天，(1+%7C+relativedate)意味着明天。|style|CODE|4636483|.filter('relativedate',+['$filter',+function+($filter)+{
++return+function+(rel,+format)+{
++++let+date+=+new+Date();
++++date.setDate(date.getDate()+%2B+rel);
++++return+$filter('date')(date,+format+%7C%7C+'yyyy-MM-dd')
++};
}]);|code-block|syntax|javascript|4636484|和你的html：|4636485|<div+ng-app="myApp">
++++<div>Yesterday:+{{-1+%7C+relativedate}}</div>
++++<div>Today:+{{0+%7C+relativedate}}</div>
++++<div>Tomorrow:+{{1+%7C+relativedate}}</div>
</div>|4636486|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/25594925/2045384^0|C|J|0|0|6|C|1H|I|25|I|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@$A|13|B|14|F|G]|$A|15|B|16|F|G]|$A|17|B|18|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|19|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1A|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|1B|8|@]|9|@]|C|$K|L]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

<p>A solution similar to <a href="https://stackoverflow.com/a/25594925/2045384">the one of @Nick G.</a> by using filter, but make the parameter meaningful:</p>

<p>Implement an filter called <code>relativedate</code> which calculate the date relative to current date by the given parameter as diff. As a result, <code>(0 | relativedate)</code> means today and <code>(1 | relativedate)</code> means tomorrow.</p>

<pre><code>.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')
  };
}]);
</code></pre>

<p>and your html:</p>

<pre><code>&lt;div ng-app="myApp"&gt;
    &lt;div&gt;Yesterday: {{-1 | relativedate}}&lt;/div&gt;
    &lt;div&gt;Today: {{0 | relativedate}}&lt;/div&gt;
    &lt;div&gt;Tomorrow: {{1 | relativedate}}&lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|4636510|text|另一种方法是:在Controller中，创建一个变量来保存当前日期，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4636511|var+eventsApp+=+angular.module("eventsApp",+[]);
eventsApp.controller("EventController",+function+EventController($scope)+
{

+$scope.myDate+=+Date.now();

});|code-block|syntax|javascript|4636512|在HTML视图中，|4636513|<!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+%7C+date+:+'yyyy-MM-dd'}}</span>
</div>
</body>
</html>|4636514|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Another way of doing is:
In Controller, create a variable to hold the current date as shown below:</p>

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

 $scope.myDate = Date.now();

});
</code></pre>

<p>In HTML view,  </p>

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


<p>I got a view in angularjs and I'm just trying to display the current date(formatted). I thought something like <code>&lt;span&gt;{{Date.now() | date:'yyyy-MM-dd'}}&lt;/span&gt;</code> should display the current date.</p>


Angularjs - display current date

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

问Angularjs -显示当前日期
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angularjs -显示当前日期EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angularjs -显示当前日期
EN