The function to increase the number of days on a date in Angular is experiencing technical issues

I'm facing an issue where I need to add 12 days to a specific date, but the new date is not coming out as expected. Below is the code snippet:

addDays(days: number): any {
    let startDate = new Date(this.selectedDeliveryDate);
    let endDate = new Date();
    endDate = new Date(startDate.setDate(startDate.getDate() + days))
    console.log(startDate, endDate, days)
}


this.selectedDeliveryDate = Wed Dec 08 2021 05:30:00 GMT+0530 (India Standard Time)
and days = 12 The endDate is being returned as 
Tue Feb 20 2024 17:49:13 GMT+0530 (India Standard Time)

EDIT I have also tested the following code snippet:

console.log((startDate.getDate() + days));

With 07-12-2021 selected as the start date and 12 set for days, the result obtained was 712. It seems like the number of days is just getting appended to the day value.

angulartypescriptdate

Answer №1

The issue has been successfully resolved by converting the days parameter to an integer before performing addition. This prevents the + operator from concatenating the values, ensuring accurate calculations.

addDays(days) {
  days = parseInt(days);
  let startDate = new Date(this.selectedDeliveryDate);
  let endDate = new Date();
  this.freeSlotEndDate = endDate.setDate(startDate.getDate() + days)
}

Answer №2

Give this a try when importing:

import * as time from "time";

Next, modify your function like so:

addTime(amount: number): any {
    let start = new Date(this.chosenStartDate);
    let end = new Date();
    end = moment(start).add(amount, "time");
    console.log(start, end, amount)
}

Answer №3

After conducting tests on both Chrome and Firefox, I can confirm that the functionality is working properly from my end. May I inquire about the web browser you are currently utilizing?

Browser: chrome

Browser: firefox

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing React to generate an error when attempting to utilize my custom hook to retrieve data from Firebase using context?

Currently, I am restructuring my code to improve organization by moving data fetching to custom hooks instead of within the component file. However, I am encountering issues with the hook not functioning properly when used in conjunction with my context. ...

reactjstypescriptreact-hooksreact-context

Tips on preserving type safety after compiling TypeScript to JavaScript

TS code : function myFunction(value:number) { console.log(value); } JS code, post-compilation: function myFunction(value) { console.log(value); } Are there methods to uphold type safety even after the conversion from TypeScript to JavaScript? ...

javascripttypescripttype-safety

delayed updating of property not visible in angular 10 immediately

I needed to hide a div based on a condition, so I decided to use the hidden property like below: <div [hidden]="isControlDisplayed()?false:true"> The isControlDisplayed() method determines whether to show or hide the div based on the value ...

javascriptangulartypescript

Error: The function setIsEnabled does not exist

Currently, I am in the process of merging two separate next.js projects to create a website that can utilize the Cardano wallet 'Nami'. The code for accessing the wallet functions correctly in its original project, but when transferred over, it p ...

javascriptreactjstypescriptnext.js

Tips for Integrating an Angular App into a Different Website

I have an Angular application hosted at www.A.com, My client has a website hosted at www.B.com I am looking to enable my client to embed the Angular app on their webpage without physically copying the application files. I want them to simply add some HTML ...

angular

Is there a way to differentiate between a plain object and a class instance in Typescript?

Specifically, I am looking to differentiate between primitive types and plain objects versus class instances. let x = {y:5} // this is acceptable class X { y = 5; } let x = new X(); // this is not permissible ...

typescript

Having trouble accessing the boolean value of a webComponent Stenciljs input checkbox within an Angular Reactive form

When using my stenciljs input checkbox component in Angular inside a reactive form, I encounter an issue where the value received is inverted and stored as a string rather than a boolean. The console.log output seems correct, but the form group value is ...

angularcheckboxstenciljs

An error has occurred during the Next.js build process: ReferenceError - The component is not defined

Encountering an error during the yarn build process, but no issues with yarn dev My Typography component is custom-made, and I utilize absolute imports with the baseUrl option in tsconfig.json next version: v9.5.2, typescript version: 3.9.7 See error ou ...

typescriptnext.js

Splitting code efficiently using TypeScript and Webpack

Exploring the potential of webpack's code splitting feature to create separate bundles for my TypeScript app has been a priority. After scouring the web for solutions, I stumbled upon a possible lead here: https://github.com/TypeStrong/ts-loader/blob/ ...

javascripttypescriptwebpackcode-splittingts-loader

Populating a Modal Popup with an Angular 2 Module

I am currently implementing angular 2 with bootstrap. On my dashboard page, I have a specific requirement where when a user clicks on any link, a new module should appear in a modal popup. Can you provide guidance on how to accomplish this task? Since my ...

angularpopupmodal-dialogloadinglazy-evaluation

How to Generate a Collection of Textfields in Angular 4

My challenge involves working with an array object that receives input from a textfield. I am looking to create a clean design where only one textfield is initially displayed, along with a '+' button next to it. When the user enters information i ...

angularbuttontextfield

"Sequencing http.get requests in Angular 2 using

In my service, I have a series of http.get requests structured as follows: constructor(private http:Http) {} getDetails(sysID:string){ var details; this.http.get('https://blahURL').map(res => res.json().filter(f => f.id == another.id)[0] ...

angularhttptypescriptrxjs

Installing a package from GitHub with a specific tag using NPM

Is there a way to install npm into my angular2 project from a git repository using a specific tag like tag = 6.0.0? For example: git <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dabdb3ae9abdb3aeb2afb8f4b9b5b7">[email ...

gitangulargithubnpm

"Troubleshooting: Unspecified getInitialProps in Nextjs when passing it to a layout component

Greetings, I am a newcomer to Next.js and facing an issue with passing dynamic properties to the header component. Despite using getInitialProps in Next.js successfully, I encounter the problem of receiving 'UNDEFINED' when these properties are p ...

reactjstypescriptnext.jsreact-propsgetserversideprops

Typescript's Patch<T> type enforces strictness within the codebase

There have been instances where I needed to 'patch' an object T using Object.assign(). For instance, when propagating changes you might modify a stateful object that other code references (common in reactive programming like MobX or Vue). It&ap ...

typescriptreactive-programmingpatchinference

Using Redux and Typescript to manage user authentication states can help streamline the process of checking whether a user is logged in or out without the need for repetitive checks in the mapStateToProps function

In the process of developing a web application utilizing React & Redux, I am faced with defining two primary "states" - Logged In and Logged Out. To tackle this challenge, I have structured my approach incorporating a union type State = LoggedIn | LoggedO ...

reactjstypescriptreduxstore

Guide on removing a key from an object in TypeScript

My variable myMap: { [key: string]: string[] } = {} contains data that I need to modify. Specifically, I am trying to remove a specific value associated with a certain key from the myMap. In this case, my goal is to delete value1 from myMap[Key1]. Despit ...

typescriptecmascript-6

Tips on how to effectively simulate a custom asynchronous React hook that incorporates the useRef() function in jest and react-testing-library for retrieving result.current in a Typescript

I am looking for guidance on testing a custom hook that includes a reference and how to effectively mock the useRef() function. Can anyone provide insight on this? const useCustomHook = ( ref: () => React.RefObject<Iref> ): { initializedRef: ...

reactjstypescriptjestjsmockingreact-testing-library

The Angular 2 routerLink doesn't update the component after the initial click, even though the URL changes in the browser

When using Angular 2, I encountered an issue where clicking a routerLink in the App module successfully navigates to a parameterised route (e.g. /events/2) and loads the correct component (event-details) on the initial click. However, subsequent clicks on ...

angularangular2-routing

Tips for associating an id with PrimeNg menu command

Within my table, I have a list of items that I would like to enhance using PrimeNg Menu for dropdown menu options. The goal is to enable navigation to other pages based on the selected item id. When a user clicks on a menu item, I want to bind the id of th ...

javascriptangulartypescriptprimeng