Angularjs - display current date

Question

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

Answer 1

You have to create a date object in your controller first:

controller:

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

view:

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

JSFiddle example

Angular Date Filter Ref

Answer 2

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:

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

and then in your view:

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

Answer 3

Template

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

Directive

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

Because you can't access the Date object direcly in a template (for an inline solution), I opteted for this Directive. It also keeps your Controllers clean and is reusable.

Answer 4

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

Here's jsfiddle example: jsfiddle

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

Answer 5

Just my 2 cents in case someone stumble upon this :)

What I am suggesting here will have the same result as the current answer however it has been recommended to write your controller the way that I have mentioned here.

Reference scroll to the first "Note" (Sorry it doesn't have anchor)

Here is the recommended way:

Controller:

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

View:

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

Answer 6

You can use moment() and format() functions in AngularJS.

Controller:

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

View:

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

Answer 7

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

Answer 8

Here is the sample of your answer: 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" />

and then in the controller:

$scope.DateOfBirth = new Date();

Answer 9

View

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

Controller

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

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

Answer 10

A solution similar to the one of @Nick G. by using filter, but make the parameter meaningful:

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

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

and your html:

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

Answer 11

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

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

 $scope.myDate = Date.now();

});

In HTML view,

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