Adding a certain number of days to a date within an existing ng-module in AngularJS

Question

Adding a certain number of days to a date within an existing ng-module in AngularJS

Hey everyone, I'm new to using AngularJS and I am currently attempting to incorporate one ng-module value into another ng-module date input within AngularJS. For example: if the date is 17-08-2016 and we add 20 days, the expected result should be 03-09-2016. Here is my plunk for reference.

I am struggling to identify where I went wrong and how to find a solution. If anyone here has insight or knows the answer, I would greatly appreciate your help. Thank you.

This is 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;
};

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

html css angularjs meanjs

Answer 1

Answer №1

If you encounter an issue, follow these steps to resolve it:

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

});

Next, include the following in your template:

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

The reason why a similar method may not work in your scenario:

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

This is because the angular date filter produces a String output and is not directly linked to the date prototype

In theory, if your name.invoice_date was already in date object format rather than being a string in your json data, this could potentially work. Refer to this excerpt 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.

Therefore, if it was originally a date object, you could use:

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

Answer 2

If you encounter an issue, follow these steps to resolve it:

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

});

Next, include the following in your template:

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

The reason why a similar method may not work in your scenario:

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

This is because the angular date filter produces a String output and is not directly linked to the date prototype

In theory, if your name.invoice_date was already in date object format rather than being a string in your json data, this could potentially work. Refer to this excerpt 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.

Therefore, if it was originally a date object, you could use:

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

Adding a certain number of days to a date within an existing ng-module in AngularJS

Answer №1

Similar questions

What steps should I take to fix the error occurring in my MEAN project?

What could be causing my ng-repeat directive to trigger an HTTP request error?

display a different selection option depending on the previously chosen item

Prevent selection of specific weekdays in Kendo grid calendar

Enhancing User Interaction with Bootstrap Input Forms

"Want to make a phone call with an extension? Just click here

Guide on transferring an HTML template to a React component using props

numbered navigation jquery plugin

Combining pdfmake with AngularJS and Electron results in the generation of a new PDF document

Error: Authorization required to access server-side resource [POST http://localhost:3000/serverSide] - Status

Using jQuery-Ajax to fetch MySQL data in Perl

What is the best way to ensure that the larger child divs always fit perfectly within the parent div?

An element featuring a background color is vertically aligned in the middle of its parent container

Can you explain how to utilize theme values in CSS within Mui?

SweetAlert.js does not function properly within a custom AngularJS directive

Tips for retrieving the distance from the top of a specific div element and transferring it to another div

What is the best way to implement ng-model in conjunction with ng-repeat?

"Customizing the topbar of Twitter Bootstrap for right-to

The Bootstrap column class is malfunctioning

How can I retrieve both the keys and values of $scope in AngularJS?