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

Tips for increasing the size of a parent div when a child div is displayed with a set width?

Guide to integrating react-phone-number-input into material-ui TextField

Dealing with Errors When Working with Angular Promises

Tips for retrieving a selected date from an HTML textbox labeled as "Date"

Is it possible for a relative div to automatically adjust its height when the height of the inner absolute div increases?

Can you outline the key distinctions between AngularJS and ReactJS?

"Utilizing a custom CSS style for a half heart rating system

Enhancing URLs with jQuery/AJAX: A Comprehensive Guide to Adding Parameters

Creating a website with a seamless image background that fills the entire page

Problem with Google+ Button Alignment

What is the best way to deactivate a hyperlink of an <a> tag specifically for a particular child within an element?

Having difficulties accessing the properties of a dynamically created JSON object with ng-repeat functionality

ng-scrollbars may encounter difficulties when used within ng-view

Insert a blank row at the top of the grid in Wijmo for Angular 2

Lower the placement of Glyphicons

Navbar remains visible despite ng-hide directive

Troubleshooting: Issues with the functionality of AngularJS Material dialogs

Successfully launched Laravel application, experiencing issues with all pages except for the homepage

Having trouble with the uib datepicker popup, displaying only the top portion

tips for asynchronously loading cloud endpoints APIs