The process of generating a date is not considering the provided date range

When I use an input type date in Angular 4 with two Date picker fields, the issue arises when I select a range of dates and press save. Instead of saving the selected dates, it is saving the current date. I have tried using ngModelChange to update the value, but it still saves as the current date in the database. Below is the code snippet:

    <app-input-field orientation="top" label="Beginning Date">
        <input [min]="today" type="date" step="1" [(ngModel)]="newCreate" style="width:250px">
      </app-input-field>
        <br>
        <app-input-field orientation="top" label="Ending Date">
          <input [min]="today" type="date" step="1" [(ngModel)]="newEnd" style="width: 250px;">
        </app-input-field>

Below is the TypeScript file:

  newCreate: string = new Date().toISOString().substring(0, 19);
  newEnd: string = new Date().toISOString().substring(0, 19);

And here is the save function:

save() {

// How can I convert this date properly before saving it? It currently 
// saves with minutes and other details.
    this.newProject.name = this.newProjectName;
    this.newProject.state = this.newState;
    this.newProject.type = this.newType;
    this.newProject.created = new Date(this.newCreate);
    this.newProject.ending = new Date(this.newEnd);
    this.newProject.category = this.category;
    this.newProject.subProjectIds = this.subProjectIds;
    this.store.dispatch(new UpsertProjectAction(this.newProject));
    this.dialogRef.close(this.newProject);

Answer №1

Within your .ts document, you are initializing newCreate and newEnd to the present date.

In cases where no parameters are provided, the constructor will generate a JavaScript Date object representing the current date and time as per the system's timezone settings.

Learn more about JavaScript Dates on MDN Docs

Through the utilization of [(ngModel)], you are employing two-way data binding, ensuring that upon initialization, your dates will automatically be assigned the current date.

Check out this live example on StackBlitz: Interactive Demo

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

Mastering Angular 7 with the Power of Rxjs: How to effectively chain and nest observ

I am trying to enhance a data set of transactions by adding additional information such as the exchange rate on a specific date, and then sending it back to my API. However, I am only receiving the original transactions without any modifications. Since I a ...

Property 'text' is not found on type '{} | Response' in Angular/Node

After making changes to my angular project's package.json by downgrading from version 4.2.4 to 4.1.3 and then upgrading back to 4.2.4, I encountered an error while building the project: $ ng build Your global Angular CLI version (1.5.0) is greater ...

Error in MatSort implementation - Argument cannot be assigned

I'm having trouble figuring out how to implement the Mat-Sort functionality from Angular Material. When I try to declare my variable dataSource, I get the following error: Argument of type 'Observable' is not assignable to parameter of type ...

Add a border to the navigation bar item to indicate the current page being displayed

This section shows the current navigation bar item https://i.sstatic.net/6RAGJ.png This is the desired outcome when clicking on the tab https://i.sstatic.net/8nFeB.png Uncertain about the best approach for achieving this. I have attempted to submit a val ...

Numeric String Expected Error Encountered in NestJS DTO Validation

While working on my NestJS application, I encountered a validation error when making a request to the http://localhost:3000/users/authstatus endpoint. The error message displayed was: { "message": "Validation failed (numeric string is ex ...

Cross-component communication in Angular

I'm currently developing a web-based application using angular version 6. Within my application, there is a component that contains another component as its child. In the parent component, there is a specific function that I would like to invoke when ...

Create a custom validation function that accepts additional parameters

At the moment, I have implemented the following code but I haven't utilized the extra data yet. create-room.component.ts import { Component, Inject, OnInit } from '@angular/core'; import { AbstractControl, FormBuilder, FormControl, FormGroup ...

Encountering an issue with Ionic forms: Error message NodeInjector: NOT_FOUND [ControlContainer] is displayed

I have developed an Ionic application with a form. Everything was working fine until I integrated the form group and related elements into my code. Since then, I've been encountering this error: core.js:6260 ERROR Error: Uncaught (in promise): Erro ...

Can TypeScript convert JavaScript files automatically using a compiler?

Is there a way to use TypeScript files like this? <script type="text/typescript"> // ... </script> I came across https://www.typescriptlang.org/play/index.html, which can compile TypeScript. What compiler does this website use? I tried ...

Issue with Parcel / React 18 App.js failing to refresh cache

Currently, I am developing a React application for my school project. However, I have encountered an issue where certain components are not rendering in my App.js file. Strangely, when I place these components as child components of App.js, they do render ...

Absence of property persists despite the use of null coalescing and optional chaining

Having some trouble with a piece of code that utilizes optional chaining and null coalescing. Despite this, I am confused as to why it is still flagging an error about the property not existing. See image below for more details: The error message display ...

Implementing universal style updates in Angular 4

I am looking to integrate Bootstrap with Angular4 and also need to support RTL styling. Currently, there is no official RTL support in Bootstrap, but there are various GitHub projects offering patches for this. In the past, I used jQuery to dynamically cha ...

What is the best way to integrate Next.js with Strapi (or the other way around)?

My goal is to develop an application utilizing Next.js for the frontend, fetching data from a Strapi API hosted on the same server. The plan is to have Strapi handle API and admin routes, while Next.js manages all other routes. I intend to use fetch in Nex ...

How can I restrict a generic type to include the new() method?

Is there a way to create a function similar to the following in TypeScript? createEntity<TEntity>(): TEntity { return new TEntity(); } In C#, we can achieve this using: void TEntity CreateEntity<TEntity>() where TEntity : new() How would ...

Tips for transferring a boolean parameter through Route Guards in Angular

Protecting the routerLinks based on boolean configurations fetched from a server is crucial. Currently, I have implemented a route guard called canActivate in the ActivateRoutes file. async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnaps ...

The ts-node encountered an issue with the file extension in this message: "TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension

When using ts-node, I encountered the following error: $ ts-node index.ts TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /home/projects/node-hddds8/index.ts I attempted to remove "type": "module& ...

After updating Jest, encountering an error when trying to access the 'html' property of an undefined value

In upgrading jest to version 28 for my angular v12 project, I encountered an error after the update: FAIL src/app/components/update-input/update-input.directive.spec.ts ● Test suite failed to run TypeError: Cannot read property 'html' of un ...

Using the Date Pipe in Angular to conditionally apply a style based on a date comparison

I am trying to iterate through an array in my component.ts file and display its contents in my component.html. The array includes dates, and I want to check each date against the current date to apply different styling based on the comparison. Here is an ...

Cannot assign an array of Typescript type Never[] to an array of objects

Creating an object array can sometimes lead to errors, let's take a look at an example: objectExample[a].push({ id: john, detail: true }); objectExample[a].push({ id: james, detail: false}); const objectExample = { a = [ { id: john, detail: true} ...

Creating a Versatile Data Retrieval Hook in TypeScript for APIs with Diverse Response Formats

Currently, I am undertaking a movie discovery project that involves fetching data from two APIs: Tmdb movie site. These APIs have different response structures—one for movies and one for genres. In order to streamline my code and avoid repeating the same ...