Having some issues with formatting a date using an angular pipe, it seems to not be functioning correctly

I'm facing an issue with the date formatting using the date pipe in Angular 7.

When I try to format it as date : 'dd/MM/yyyy', nothing changes.

The date still appears like this:

Mon Oct 12 1992 00:00:00 GMT-0500 (Central Daylight Time)

I've checked my code in both HTML and .ts files, but can't figure out what the problem is.

I want the date to be shown in this format: dd/MM/yyyy

This is how I'm displaying the date of birth in my HTML:

{{employee.dateOfBirth | date : 'dd/MM/yyyy'}}

And here's a snippet from my TypeScript file (.ts):

dateOfBirth: Date
dateOfBirth: new Date ('10/12/1992')

Even though I'm using the correct formatting syntax {{employee.dateOfBirth | date: 'dd/mm/yyyy' }}, the output remains unchanged. It's frustrating!

Answer №1

Your method of assigning the value to 'dateOfBirth' needs some adjustment. To correctly assign it, use the following syntax:

dateOfBirth: Date = new Date('10/12/1992');

If you prefer a dynamic assignment, you can do so in the ngOnInit method. In your template, the code should appear like this:

{{dateOfBirth | date : 'dd/MM/yyyy'}}

For a functional example, check out this StackBlitz demonstration: https://stackblitz.com/edit/angular-bqmbzd?file=src%2Fapp%2Fapp.component.html

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

Converting CommonJS default exports into named exports / Unable to load ES module

I've encountered an issue while creating a Discord bot with discord.js using TypeScript. When attempting to run the resulting JavaScript code, I'm facing an error that states: import { Client, FriendlyError, SQLiteProvider } from 'discord.js ...

Discover the subsite inventory of a SharePoint site using TypeScript

Is there a way to gather all sub-sites from my SharePoint site and organize them into a list? I initially thought of using this.context.pageContext, but could not locate it. Please excuse my seemingly simple question, as I am still learning TypeScript. ...

Tips for sending information back to the previous screen in React Native Navigation version 5

Recently, I upgraded to react native navigation version 5 and now I am facing an issue with sending data back to the previous screen when making a goBack() call. To navigate to the next view, I use: const onSelectCountry = item => { console.log(it ...

The error message "HighCharts Sankey + NextJS: TypeError: Unable to access property 'Core/Series/Point.js' of undefined" occurred

I am attempting to display a Sankey chart from HighCharts using the HighCharts React library within a NextJS project. I have followed the steps outlined in HighChart's documentation to integrate the Sankey module, but I encounter an error on the page: ...

Creating a custom Angular Material Stepper form with modular steps implemented as individual components

Angular Material stepper is functioning well in a single component, but now I need to use it in around 10 different components, each with different types of forms. To address this, I have decided to break down the stepper into separate components, with eac ...

Retrieve an item from an array using a Select component

Is there a way to retrieve the complete object representation of an item from a list in React? Currently, when I select an item and call handleChangeSelectAuto, the original value from useState is returned instead of the entire object. How can I ensure tha ...

Is it recommended to ensure all of my components are nested within the root App component?

As I delve into learning Angular 4 with angular-cli for creating a web front end, I can't help but wonder about the structure of my components. In following the Heroes tutorial and applying it to my own data models, I noticed that all my components, ...

Adjust the placement of a div within another div based on various screen sizes dynamically

Currently, I am working on an Ionic 2 app where the user is required to select specific points on the screen. These coordinates will then be utilized on another screen with a different size. My initial attempt at using rule of three/cross multiplication pr ...

What are some ways to incorporate inline TypeScript Annotations into standard JavaScript code?

If you're using VSCode, there's a new feature that allows you to implement type checking for traditional JavaScript files. There are instances where I wish to specify the type of a variable or parameters in a method or function to enhance auto-co ...

I'm puzzled as to why my object remains static even after I reassign properties within a forEach loop

When retrieving an array of objects from an RX/JS call through an http backend, I encounter a peculiar issue. After making modifications to the object within a loop (attempting different methods like .forEach), the values seem to change temporarily but rev ...

Developing an array in Angular on an Android device is proving to be a sluggish

I'm facing an issue with my simple array that collects rows from a database and uses a distance column as a key. let output = {}; for (let dataRow of sqllite.rows) { output[dataRow.distance] = dataRow; } When testing in Chrome browser on my PC, ...

Exploring the differences between initializing class members and using setters and getters in Typescript

Here is the code snippet that I am working with: export class Myclass { private _someVal = 2; public get someVal() { return this._someVal; } public set someVal(val) { this._someVal = val; } } In my template, I have <span&g ...

Is it a bug that Visual Studio does not call the destructor of `thread_local` variables when used with std::async?

This snippet of code illustrates the creation and deletion of an object in multiple threads. #include <iostream> #include <future> #include <thread> #include <mutex> std::mutex m; struct Foo { Foo() { std::unique_lock ...

Troubleshooting Angular: Resolving the Cannot GET / Error When Refreshing Page

Exploring the world of Angular as a newcomer, I diligently followed the guide on Angular.io to route my application and its numerous pages. However, a frustrating issue arises when I hit the refresh button in my browser - I encounter a "Cannot GET /dashboa ...

Standardize special characters for auto-complete functionality

I am trying to standardize the data in an autocomplete feature by removing all special characters. However, I am unsure how to replace the character "-" with a whitespace. I typically use VCS as my code editor. I attempted using %20 as a replacement, but ...

Initializing and Re-rendering Modal form

I am currently working on incorporating modal forms into my project. In the link, I encountered an issue where if I click the first button (Hello2), input some text and then close the modal, upon clicking the first button again, the input is retained due ...

Angular syncfusion - How can I retrieve the selected series in a line chart event?

Currently, I am using the Line chart control from Syncfusion in Angular 7. While going through the documentation, I was unable to locate an event that retrieves the selected data series when clicking on a line chart series. Do you happen to know the name o ...

Avoiding redundant code in reactive forms

I have set up reactive forms for both login and registration. Here is the code for the Registration form: <div class="registration_wrap"> <div class="registration"> <form [formGroup]="form" novalidate> < ...

The checkbox state does not update dynamically in Angular 8 when the value of the form control is changed

I recently created a simple application that consists of a single checkbox and a button. The aim is to start a timer upon clicking the button, where every second the checkbox's state should toggle between checked and unchecked. To ensure the formCont ...

What does an exclamation mark signify in Angular / Type Script?

Being a newcomer in the world of front end development, I am currently teaching myself Angular (11.2.10). While exploring a sample project, I noticed this particular piece of html template code written by another person and utilized in multiple places: < ...