Angularjs-現在の日付を表示する


128

angularjsでビューを得て、現在の日付(フォーマット済み)を表示しようとしています。<span>{{Date.now() | date:'yyyy-MM-dd'}}</span>現在の日付を表示するようなものだと思いました。


それは..しかし、それは知りませんDate.now()
putvande 14

2
それで、最初にコントローラーで変数を生成しなければなりませんか?私は現在の日付のような単純なものの方が簡単だと思いました:)
Evo_x

1
Date.now()nodeJS関数です
Nay

回答:


229

最初にコントローラーで日付オブジェクトを作成する必要があります。

コントローラ:

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

見る:

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

JSFiddleの例

角度日付フィルター参照


こんにちは@sloth現在のシステム時刻を表示するためにcgiを使用したいと思います。どうすればそれを実行できますか、それとも可能ですか?Thanks
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

ただし、値が自動的に更新されるとは期待しないでください。この値は角度では監視されないため、ダイジェストを更新するたびに(たとえば$ intervalで)トリガーする必要があります...これはリソースの浪費です(ドキュメントでも「推奨」されていません)。もちろん、ディレクティブ/コントローラーと組み合わせて子スコープのみをいじくりまわすことができます(たとえば、rootScopeよりも常に小さく、ダイジェストはより速くなります)。


9

誰かがこれに遭遇した場合に備えて、ちょうど私の2セント:)

ここで私が提案していることは、現在の回答と同じ結果になりますが、ここで述べた方法でコントローラーを作成することをお勧めします。

最初の「メモ」への参照スクロール(アンカーがないので、申し訳ありません)

推奨される方法は次のとおりです。

コントローラ:

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.のものと同様のソリューションですが、パラメーターを意味のあるものにします。

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

別の方法は次のとおりです。コントローラで、次のように現在の日付を保持する変数を作成します。

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、コードスニペットを更新しました。私はそれが今より説明的であることを願っています。
スニタ2017
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.