Adjusting the date in Angular 8 by increasing or decreasing it in the dd-MM-yyyy layout with a button press

How can I dynamically adjust the date in an input box by using buttons to increment and decrement it? Below is the code snippet:

    prev() {
         let diff = 1; //1 to increment and -1 to decrement
         this.date.setDate(this.date.getDate() - diff);
         console.log(this.date);
    }
    next() {
         let diff = 1; // 1 to increment and -1 to decrement
         this.date.setDate(this.date.getDate() + diff);
         console.log(this.date);
    }

In the HTML file:

       <input type='text' id='datepicker' name='datepicker' class="form-control" 
       [ngModel]="{{date | dd-MM-yyyy}}">
        <button (click)="prev()"></button>
        <button (click)="next()"></button>

Answer №1

one possible approach is to implement it this way (24h=86400000ms)

 moveBackward() {
    this.date = new Date(+this.date - 1 *86400000);
 }

 moveForward() {
    this.date = new Date(+this.date + 1 *86400000);
 }

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

It is impossible to add a promise's value to an array

When attempting to push values into an array and return them, the console only displays an empty array or shows undefined! The issue seems to be that .then does not properly pass the value to the array. const net = require('net'); const find = re ...

Error Encountered in Cypress: "Tried to wrap warn but it is already wrapped"

Objective: Utilize Cypress and Typescript to test for warnings and errors on the console. Error Encounter: An attempt was made to wrap warn, which is already wrapped. Snippet: describe.only("Unauthenticated User", () => { it("No C ...

Deleting a button from a list item or array in Angular 12

Having some trouble removing a list item with the click button, I've tried a few options but nothing seems to be working. Can anyone offer assistance? I need to remove a list item from my users array when clicked. Below is the Typescript code and cor ...

Developing a separate NPM package for a portion of the app causes an increase in the total app size

Our projects utilize create-react-app and Typescript, resulting in the emergence of a collection of commonly used React components. To enhance maintenance and reusability, we decided to extract these components into their own NPM package named PackageA. Su ...

There is no matching overload for this call in React Native

I am working on organizing the styles for elements in order to enhance readability. Here is the code I have written: let styles={ search:{ container:{ position:"absolute", top:0, }, } } After defining the s ...

Having trouble injecting $resource into my Jasmine unit test

I've encountered an issue while trying to test my self-written service that utilizes $resource. I'm facing difficulties when trying to inject $resource into my test spec. My setup includes Typescript with AngularJS 1.6.x, and here is a snippet o ...

Crafting a recursive Typescript Immutable.js Record through typing

I am currently working on representing a tree-like data structure using immutable js and typescript. At the moment, I am utilizing regular vanilla js objects to depict the nodes within the tree. Below is the type signature. type NodeType = { value: str ...

Stop the transmission of ts files

Recently, I noticed that when using node JS with Angular-CLI, my .ts files are being transmitted to the client through HTTP. For example, accessing http://localhost/main.ts would deliver my main.ts file to the user. My understanding is that ts files are s ...

What is the best way to ensure that md-select takes up 100% of the

I am currently utilizing the latest version of Angular. The following code snippet pertains to material design: <md-grid-tile> <md-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food"> </md-select> </md-grid-ti ...

Utilizing Angular's custom builder for asset revisioning

After coming across this specific inquiry on Stack Overflow, my goal is to implement a @angular-builders/custom-webpack:browser with a personalized Webpack setup that incorporates html-loader and file-loader to alter the names of asset files with their has ...

Incorporating TypeScript seamlessly into your current Create React App project without the need to modify any existing code or files

While I have already installed Typescript in my project, I am more concerned about adding new .tsx files and ensuring they are type-checked. Simply renaming existing .js files to .tsx is not a viable solution, as it requires refactoring all the existing ...

Utilizing React forwardRef with a functional component

Looking at my code, I have defined an interface as follows: export interface INTERFACE1{ name?: string; label?: string; } Additionally, there is a function component implemented like this: export function FUNCTION1({ name, label }: INTERFACE1) { ...

Techniques for importing esm libraries without requiring the "type": "module" declaration in the package.json configuration file

I have successfully implemented a TypeScript Node project but now I am facing an issue while trying to integrate the VineJS library into the project. The problem arises because VineJS is exclusively an ESM (ECMAScript Module) package, and when adding it to ...

Creating eye-catching designs for Material grid-list items

Here is the code snippet for generating a list: <md-grid-list cols="5" rowHeight="20px"> <md-grid-tile *ngFor="let carBrand of carBrands" colspan= 1 rowspan= 1> <md-checkbox>{{ carBrand}}< ...

Is casting performed by <ClassName> in typescript?

According to the Angular DI documentation, there is an example provided: let mockService = <HeroService> {getHeroes: () => expectedHeroes } So, my question is - can we consider mockService as an instance of HeroService at this point? To provide ...

The npm audit command flagged an issue with an invalid tag name,

Whenever I run npm audit on a directory containing the project's package.json and package-lock.json, I encounter the following error message: 0 info it worked if it ends with ok 1 verbose cli [ '/home/user/Downloads/node-v10.14.0-linux-x64/bin/n ...

What is the procedure for implementing a RoleGuard in Angular 6?

Is there a way to retrieve the user role from the token? I've managed to fetch the token using the decoding feature of angular2-jwt, but when I try to apply it for accessing the admin route, it returns a value of false. Upon checking with console.lo ...

Guide on integrating a newly bought template into an Angular 6 and Bootstrap 4 application

Although I have years of experience as a backend developer, I am relatively new to frontend development. Lately, I have been immersing myself in learning Angular 6 and Bootstrap 4 for an upcoming project at work. After setting up a basic Angular 6 applica ...

The Axios GET method retrieves a response in the form of a string that represents an object

I have developed a function that triggers an axios Request. I am working with typescript and I am avoiding the use of any for defining return data types of both the function and the axios request itself. The issue arises when the returned object contains ...

Determine to which observable in the list the error corresponds

const obs1$ = this.service.getAllItems(); const obs2$ = this.service.getItemById(1); combineLatest([obs1$, obs2$]) .subscribe(pair => { const items = pair[0]; const item = pair[1]; // perform actions }, err => { // det ...