Increase the number of days for the scheduled event using Angular's getTime() function

After selecting days from a dropdown menu, I am encountering an issue where the resulting dates are showing up as far back as the 1700s. Can anyone help me identify what might be causing this error?

  selectedDays: number = 0;
  //event handler for the select element's change event
  selectDaystoadd (event: any) {
    //update the ui
    this.selectedDays = event.target.value;
    console.log(this.selectedDays);
  }

  formatDateField(event: Date, formControl: string) {
    this.form
      .get(formControl)
      .patchValue(
        this.datePipe.transform(event.getTime() + this.selectedDays, "yyyy-MM-dd'T'HH:mm:ss")
      );
      console.log(event);
  }

HTML code..

     <label>Date</label>
        <input id="input--payout-date"
          class="form-control"
          formControlName="payoutDate"
          [owlDateTime]="payoutDate"
          (dateTimeInput)="formatDateField($event.value, 'payoutDate')"
          [owlDateTimeTrigger]="payoutDate"
        />
        <owl-date-time [pickerType]="'calendar'" #payoutDate></owl-date-time>
        <label>Add days to date</label>
        <select (change)="selectDaystoadd($event)">
          <option value="0">0</option>
          <option value="20">+20</option>
          <option value="50">+30</option>
          <option value="90">+90</option>
        </select>

Answer №1

By utilizing the datePipe function, we can easily transform the event date by adding the selected number of days and formatting it in the "yyyy-MM-dd'T'HH:mm:ss" style.

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

Difficulty encountered when trying to update intricate model using Angular UI modal

My current project involves managing a model containing nested arrays that represent different sections of a floor plan. Each section contains an array of booth objects. To optimize user interaction, I've created a view that displays all the booths on ...

Error encountered when attempting to load files from the same domain due to CORS restrictions

I'm currently developing a website at and I am trying to load the content of an HTML file into an element. I have specified the element as $('.about-us-first-col') and I am loading the content using the code: $('.about-us-first-col&apo ...

If a div contains the class "active", then modify the background color of another div

One thing I want to achieve is changing the background color of a div element with the class .panel-heading to blue if the inner div element with the class .panel-collapse inside the parent div with the class .panel has a class of in. The framework I am us ...

Refine specific unions by considering past values that have been used

Here's the scenario at hand: type Option = 'x' | 'y' | 'z' | 'w' type Inquiry = { query: string; choices: Option[]; defaultChoice: Option // here's where it gets tricky } I am looking to set the def ...

Encountered an issue during the migration process from AngularJS to Angular: This particular constructor is not compatible with Angular's Dependency

For days, I've been struggling to figure out why my browser console is showing this error. Here's the full stack trace: Unhandled Promise rejection: NG0202: This constructor is not compatible with Angular Dependency Injection because its dependen ...

Utilizing Smoke.js within a PHP environment

I created a PHP function to validate HTML form fields. When an error occurs, the code below will display an error message using JavaScript "alert": echo '<script type= "text/javascript">alert("account not found in database")</script>&apo ...

Error: The connection to Node/Postgresql was refused at 127.0.0.1:5432. This occurred after connecting at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1141:16)

After running a Node server connecting to a Postgresql DB (via Knex) without issues, my laptop crashed. Upon restart, the DB connection stopped working, showing this error message: Error: connect ECONNREFUSED 127.0.0.1:5432 at TCPConnectWrap.afterConnect ...

Incorporate @ngx-translate into individual components within Angular 17 for enhanced translation capabilities

I have encountered an issue while using standalone components in Angular 17. Interestingly, when I used module architecture, this problem did not arise. By adding the necessary import to 'AppModule', everything worked perfectly. imports: [ Trans ...

jQuery unable to populate a div with content using the .load method

My goal is to use a jQuery script to grab the content from the "content" class on another page and insert it into the "code" div. Here's the code I'm working with: <script type="text/javascript"> $(document).ready(function() { $(&a ...

What is the process for integrating ng-bootstrap into an Angular 5 project?

Has anyone encountered issues loading ng-bootstrap in their Angular project? I'm experiencing difficulties and would appreciate any insights. Thank you for your help! This is my app.module.ts file: import { BrowserModule } from '@angular/platf ...

Angular 6 Exporting Data to CSV File

Recently, I've started working with Angular and I'm currently involved in a project that requires CSV export functionality. The project uses Angular 6 on the frontend and Laravel on the backend. Below is the Laravel function I wrote using mattwe ...

Using a modulus operator in Angular 6 to conditionally show elements

Trying to achieve a specific layout for an object in an array using ng-For and ng-If. Here is the desired recovery code, and here's what I've attempted so far in my code snippet enter image description here: <div class="recovery-code" *ngFor= ...

Using angular2 material Dialog for canDeactivate blocking: a comprehensive guide

Currently, I am effectively utilizing canDeactivate to display a warning message if a user tries to leave a page with unsaved changes: Below is the code that I have implemented: is_submit = false; canDeactivate() { //https://scotch.io/cours ...

Is it possible for javascript to show the user's current location on a google map without using a KML layer?

I need help with loading a KML file using JavaScript and adding a marker to the map at the user's current location. The code I have been working on works fine, but it seems to be missing the geolocation check for the current position. How can I proper ...

tilt and give motion to image within canvas

I am looking to incorporate skewing and animation effects on an image displayed on a canvas. While I have successfully drawn the image on the canvas using the code snippet below, I am unsure about how to apply skewing and animation to the image post-drawin ...

Using ReactJs to merge multiple style objects in an immutable way

My inline style object looks like this: const simpleCarousel = { toggle: { .... }, toggle_prev: { left: 0 }, toggle_next: { right: 0 } }; Here is the standard CSS markup I am working with: <div className="toggle, toggle_ ...

Transform the dataUrl into a blob and send it via ajax request

I am currently utilizing the imgly image cropper plugin with some modifications for my application. It has the ability to convert an image into a dataUrl and produce the image as a base64 image which can then be saved as a jpeg. My objective is to adjust ...

Encountering a connection error when trying to access a Google spreadsheet within a Next.js application

I am currently exploring Next.js and attempting to utilize Google Sheets as a database for my project. Although my application is functioning correctly, there is still an error message displaying that says "not forgot to setup environment variable". I have ...

When attempting to add objects to an indexedDB object store, an InvalidStateError is encountered

I have defined IndexedDB and IDBTransaction dbVersion = 1; var db; var dbreq; var customerData = { ssn: "444", name: "Bill", age: 35, email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b0bbbebe92b1bdbfa2b3bcabfcb1bdbf"& ...

Asynchronous waiting waits not for async await

I'm currently working on a function that loops through an array and updates the model for each ID, then adds the result to another array. This is the code snippet I have: async function getSortedAnimals() { var i = 0; var sortedAnimals = []; id ...