Search code examples
htmlcssangularjsmeanjs

How to add number of days to existing ng-module date in angularjs?


Hi all I'm new to angularjs actually i'm trying to add one ng-module value into another ng-moudule date input in angularjs... For exmaple:- 17-08-2016 add 20 Result Expecting 03-09-2016. my plunk

i don't know where i did the mistake and how to get the solution, please if anyone knows the answer help me for the same thanks.

My controller

 $scope.name = {
"_id": "57ac1b6d82e1c5940ac3c730",
"user": {
"_id": "57400c32bd07906c1308e2cf",
"displayName": "mani selvam"
},
"__v": 0,
"terms": "20",
"invoice_date": "2016-08-17",
"due_date": ""
};

Date.prototype.addDays = function(days) {
    this.setDate(this.getDate() + parseInt(terms));
    return this;
};

My Html:-

 <tr ng-repeat="mani in name"> </tr>
      <td >{{name.invoice_date | date:'dd-MM-yyyy'}}</td>
          <td >{{name.terms }}</td>
             <td >{{name.invoice_date | date:'dd-MM-yyyy'}} + {{name.terms }}</td>

Solution

  • You can fix it by doing this:

    var app = angular.module('plunker', []);
    
    app.controller('MainCtrl', function($scope) {
      $scope.name = {
    "_id": "57ac1b6d82e1c5940ac3c730",
    "user": {
    "_id": "57400c32bd07906c1308e2cf",
    "displayName": "mani selvam"
    },
    "__v": 0,
    "terms": "20",
    "invoice_date": "2016-08-17",
    "due_date": ""
    };
    
    $scope.addDays = function(stringDate,days) {
       var date = new Date(stringDate);
       date.setDate(date.getDate() + parseInt(days));
      return date;
    }
    
    });
    

    then in your template do:

     <td >{{addDays(name.invoice_date,name.terms) | date:'dd-MM-yyyy'}}</td>
    

    the reason why something like this doesn't work in your example:

    <td >{{(name.invoice_date | date:'dd-MM-yyyy').addDays({{name.terms}})}} + {{name.terms }}</td>
    

    is because the angular date filter returns a String representation and thus is not linked to the date prototype

    in theory this could work if your name.invoice_date would be a date object instead of a string in your json. take a look at this from the angular filter source code

    @param {(Date|number|string)} date Date to format either as Date object, milliseconds (string or
     *    number) or various ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its
     *    shorter versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ). If no timezone is
     *    specified in the string input, the time is considered to be in the local timezone.
    

    so if it would be a date to begin with you could do:

    <td >{{(name.invoice_date).addDays({{name.terms}}) | date:'dd-MM-yyyy'}} + {{name.terms }}</td>