Working with pipe in AngularJS for date formatting using ng-model

Question

Working with pipe in AngularJS for date formatting using ng-model

<p>The current format is: {{ item.expires_at }}</p> # 2019-06-30T23:30:01+00:00

The formatted date in the input element is non-editable, which makes it difficult for me to make any changes. Is there a way around this?

<input type="text" ng-model="item.expires_at | date:'dd/MM/yyyy HH:mm:ss'">

My lack of front-end skills is hindering my progress on this issue. From some suggestions I found, you can try the following example. However, when I attempted it, the input remained empty.

Reference: Using Pipes within ngModel on INPUT Elements in Angular2-View

<input type="text"
[ngModel]="item.expires_at | date:'dd/MM/yyyy HH:mm:ss'"
(ngModelChange)="item.expires_at=$event" />

I have checked the Template Syntax documentation but did not find a solution yet.

angular typescript pipe

Answer 1

Answer №1

To implement a date formatting functionality in your Controller, you can make use of the DatePipe directive.

It is recommended to include an onChange method within your controller. Here is an example of how your component class might be structured:

export class MyComponent {

 ...
 expires_formatted;

 constructor(private datePipe: DatePipe)) {
 }

 onChange(expires_at: string) {
   this.expires_formatted = this.datePipe.transform(expires_at, 'dd/MM/yyyy HH:mm:ss');
 }

 ...

}

In your template, utilize the following:

<input type="text"
[ngModel]="item.expires_at"
(ngModelChange)="onChange($event)" />

Answer 2

To implement a date formatting functionality in your Controller, you can make use of the DatePipe directive.

It is recommended to include an onChange method within your controller. Here is an example of how your component class might be structured:

export class MyComponent {

 ...
 expires_formatted;

 constructor(private datePipe: DatePipe)) {
 }

 onChange(expires_at: string) {
   this.expires_formatted = this.datePipe.transform(expires_at, 'dd/MM/yyyy HH:mm:ss');
 }

 ...

}

In your template, utilize the following:

<input type="text"
[ngModel]="item.expires_at"
(ngModelChange)="onChange($event)" />

Working with pipe in AngularJS for date formatting using ng-model

Answer №1

Similar questions

The text "Hello ${name}" does not get substituted with the name parameter right away in the message string

Ways to access information from an Angular model within a controller

How can you display a loading indicator after a delay using Observables, but make sure to cancel it if the loading is completed

Angular2 Cascading Dropdowns

Is it possible to generate a new array by combining the keys of one array object with the values of another array object?

Having trouble importing moment-range into your Angular 4.x application using ES6? Getting an error about incompatible call signatures?

Dynamically defined type literals in Typescript

Customizing output paths for script files in angular.json with Angular

What is the process for implementing a new control value accessor?

Selecting elements from an array of objects using TypeScript in a React application

Disable the ability to close the dialog box by clicking

Create a TypeScript view component that encapsulates an HTMLElement for seamless integration with TweenMax

Tips for integrating TypeScript files into Next.js HTML files

Can someone guide me on how to make a Carousel responsive using Angular?

Is the lazy loading feature for nested modules in an Angular Ionic4 application experiencing functionality issues?

Failure to Execute Angular HttpClient Request

Angular navigation did not work as expected

Tips for bringing in a text file within a NodeJS application using TypeScript and ts-node during development

Insert data into Typeorm even if it already exists

Retrieving information selectively using useSWRImmutable