CODEWITHSUNDEEP
angularjsmomentjs
Serge Inácio
Serge Inácio

Reputation: 1382

Angularjs and moments.js - angularjs not displaying the correct date

I am using Bootstrap 4 in a project. I am trying to get Angularjs to work with moments.js but am failing to do so.

I use the following HTML code:

<input type="date" name="somename" ng-model="theDate" max="3000-12-31" min="1000-01-01" class="form-control">

In the mainControler.js which I created I have the following:

$scope.theDateToBeDisplayed = moment($scope.theDate).format('DD/MM/YYYY');

Then when I try to display it with the following code:

<span ng-bind-html="theDateToBeDisplayed"></span>

It always returns today's date and not the one I selected in the datepicker.

mainControler.js:

app.controller('MainController', function($scope) {

  $scope.theDateToBeDisplayed = moment($scope.theDate).format('DD/MM/YYYY');

});

HTML:

<div ng-app="myApp" ng-controller="MainController">
  <div>
    <input type="date" name="somename" ng-model="theDate" max="3000-12-31" min="1000-01-01" class="form-control">
  </div>
  <div>
    <span ng-bind-html="theDateToBeDisplayed "></span>
  </div>
</div>

What am I doing wrong?

Thank you in advance for any suggestions.

Upvotes: 0

Views: 288

Answers (2)

Sravan
Sravan

Reputation: 18647

You can call a function and change the variable when the date in date-picker is changed

I added ,

  • ng-change="changeDate()" in HTML which calls changeDate funciton when the date is changed.
  • That function will assign date into theDateToBeDisplayed and displays in UI

var app = angular.module('miniapp', []).controller('myCtrl', function($scope) {
    	$scope.changeDate = function(){
      	$scope.theDateToBeDisplayed = moment($scope.theDate).format('DD/MM/YYYY');
      }   
});
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="miniapp">
    <div ng-controller="myCtrl">
        <div>
            Select a date from Date picker:
            <input type="date" name="somename" ng-model="theDate" max="3000-12-31" min="1000-01-01" class="form-control" ng-change="changeDate()">
            <br>
            <br>
          <span>{{theDateToBeDisplayed}}</span>
        </div>
    </div>    
</div>
  </body>

</html>

Here is a working DEMO

Upvotes: 1

Frederik Heremans
Frederik Heremans

Reputation: 658

Not sure when you initialise the theDateToBeDisplayed variable on the scope, but my guess is it is set only once, based on an empty $scope.theDate, which causes moment to revert to today's date. This value is not auto-magicalle re-calculated when the date changes.

Possible solutions (I personally prefer 2):

  1. When you change the $scope.theDate, make sure you have a watcher that sets the $scope.theDateToBeDisplayed again.

  2. Create a filter (eg. dateFormat) that calls moment(value).format(...) and use: 

    <span>{{theDate | dateFormat }}</span>

Upvotes: 0

Related Questions