Angularjs - hiển thị ngày hiện tại

Tôi có một cái nhìn trong angularjs và tôi chỉ đang cố gắng hiển thị ngày hiện tại (được định dạng). Tôi nghĩ một cái gì đó như <span>{{Date.now() | date:'yyyy-MM-dd'}}</span>sẽ hiển thị ngày hiện tại.

Trước tiên, bạn phải tạo một đối tượng ngày trong bộ điều khiển của mình:

bộ điều khiển:

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

lượt xem:

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

Ví dụ về JSFiddle

Bộ lọc ngày góc

Bạn cũng có thể thực hiện việc này với bộ lọc nếu bạn không muốn phải đính kèm một đối tượng ngày vào phạm vi hiện tại mỗi lần bạn muốn in ngày:

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

và sau đó theo quan điểm của bạn:

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

Bản mẫu

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

Chỉ thị

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

Vì bạn không thể truy cập Dateđối tượng direcly trong một mẫu (đối với giải pháp nội tuyến), tôi đã chọn cho Chỉ thị này. Nó cũng giữ cho Bộ điều khiển của bạn sạch sẽ và có thể tái sử dụng.

Vâng, bạn có thể làm điều đó với biểu thức ria mép ( {{Date.now() | date:'dd.MM.yyyy HH:mm:ss'}}). Bạn chỉ cần gán đối tượng Date cho phạm vi mà bạn muốn đánh giá biểu thức này.

Đây là ví dụ jsfiddle : jsfiddle

Nhưng đừng hy vọng nó sẽ tự động cập nhật giá trị. Giá trị này không được theo dõi bởi góc vì vậy Bạn phải kích hoạt thông báo mỗi lần Bạn muốn cập nhật nó (ví dụ: theo khoảng thời gian) ... đó là sự lãng phí tài nguyên (và cũng không được "khuyến nghị" trong tài liệu). Tất nhiên, bạn có thể sử dụng kết hợp với các chỉ thị / bộ điều khiển để chỉ loay hoay với phạm vi con (nó luôn nhỏ hơn ví dụ rootScope và digest sẽ nhanh hơn).

Chỉ cần 2 xu của tôi trong trường hợp ai đó vấp ngã này :)

Những gì tôi đang đề xuất ở đây sẽ có kết quả giống như câu trả lời hiện tại tuy nhiên chúng tôi khuyên bạn nên viết trình điều khiển của mình theo cách mà tôi đã đề cập ở đây.

Cuộn tham chiếu đến "Ghi chú" đầu tiên (Xin lỗi vì nó không có neo)

Đây là cách được đề xuất:

Điều khiển:

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

Lượt xem:

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

Bạn có thể sử dụng moment()và các format()chức năng trong AngularJS.

Điều khiển:

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

Lượt xem:

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

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

Dưới đây là mẫu câu trả lời của bạn: 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" />

và sau đó trong bộ điều khiển:

$scope.DateOfBirth = new Date();

Lượt xem

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

Bộ điều khiển

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

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

Một giải pháp tương tự như một trong @Nick G. bằng cách sử dụng bộ lọc, nhưng làm cho tham số có ý nghĩa:

Thực hiện một bộ lọc được gọi là relativedatetính toán ngày liên quan đến ngày hiện tại theo tham số đã cho là diff. Kết quả là, (0 | relativedate)có nghĩa là hôm nay và (1 | relativedate)có nghĩa là ngày mai.

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

và html của bạn:

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

Một cách khác để làm là: Trong Bộ điều khiển, tạo một biến để giữ ngày hiện tại như bên dưới:

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

 $scope.myDate = Date.now();

});

Trong chế độ xem 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>