To properly format the date value from the ngModel in Angular before sending it to the payload, I require the date to be in the format

Question

To properly format the date value from the ngModel in Angular before sending it to the payload, I require the date to be in the format

When working with Angular 9, I am facing an issue where I need to format and send my date in a specific way within the payload. Currently, the code is sending the date in this format: otgStartDate: 2021-07-20T09:56:39.000Z, but I actually want it to be formatted as otgStartDate: 31-Jun-21.

Below is the HTML code being used:

 <input type="text" class="form-control date-picker-custom" [(ngModel)]="OnSiteStartDate" 
          placeholder="DD-MM-YYYY" [minDate]="minDate"
          [bsConfig]="{ isAnimated: true, showClearButton: true, clearPosition: 'right', showWeekNumbers: false, dateInputFormat: 'DD-MMM-YYYY', containerClass: 'theme-default'}"
          bsDatepicker readonly />

Typescript:
OnSiteStartDate: any;
const payload={
 otgStartDate: this.OnSiteStartDate,
}

javascript angular typescript

Answer 1

Answer №1

The Angular framework provides a formatDate function.

import { formatDate } from '@angular/common';
//...
const data={
 otgStartDate: formatDate(this.OnSiteStartDate, 'dd-MMM-yy', 'en-US'), // adjust parameters as needed
}

For more information on custom format options, you can also refer to the DatePipe documentation.

Answer 2

The Angular framework provides a formatDate function.

import { formatDate } from '@angular/common';
//...
const data={
 otgStartDate: formatDate(this.OnSiteStartDate, 'dd-MMM-yy', 'en-US'), // adjust parameters as needed
}

For more information on custom format options, you can also refer to the DatePipe documentation.

To properly format the date value from the ngModel in Angular before sending it to the payload, I require the date to be in the format

Answer №1

Similar questions

Prevent side menu from automatically hiding when clicking on the heading

Encountered a Next-Auth Error: Unable to fetch data, TypeError: fetch failed within

The image is malfunctioning in the production environment, but functions perfectly on the localhost server

Tips for effectively utilizing innerHTML in this particular scenario

NEXT JS 13 experiencing an infinite loop when using State, encountering an error with Params, and facing issues with hook definition

Implementing Node.JS ajax to update current JSON information

Encountering Issues with Discord JS as Member Fetch Returns Undefined

Encountering a Nextjs hydration issue after switching languages

Learn how to increase spacing in React applications

Guide to setting up a trigger/alert to activate every 5 minutes using Angular

Managing MUI form fields using React

The item is not functioning properly as intended

What are the steps to incorporating the pick function in TypeScript?

Spring Boot is having trouble identifying the JavaScript files

Issue with cordova plugin network interface connectivity

JavaScript Filtering Techniques

Dealing with callback errors: error handling is anticipated

Obtain the CSRF token from a webpage using JavaScript

Navigate directly to the section on the page that discusses the hashtag

Exploring the process of acquiring a button using refs in external JavaScript