Using pipe in AngularJS mg-model and formatting the date

Question

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

Formatted date in input element becomes non-editable so unfortunately I cannot edit it. Is there a way to achieve this?

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

Having no front-end skills doesn't help but as far as I can see from some answers, we can use example below. However, when I use it, I get no data in input so input element is just empty.

Ref: 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 read Template Syntax but couldn't find a solution.

I don't know what grid is:( I am not a front-end dev. How do I find out if my code uses it or not? I am dealing with someone else's code. — BentCoder, Jun 30 '17 at 11:13
try this `[ngModel]="{{item.expires_at | date:'dd/MM/yyyy HH:mm:ss}}"` and let me know — Ramesh Rajendran, Jun 30 '17 at 11:16
it will be shown NaN. You should need input or null not empty — Ramesh Rajendran, Jun 30 '17 at 11:20
This is what I see when I inspect the element: `[ngmodel]="15/08/2055 16:52:01"` However, I don't see anything visually. — BentCoder, Jun 30 '17 at 11:25
then somewhere you has been hide this part. check your code :) — Ramesh Rajendran, Jun 30 '17 at 11:27

score 0 · Answer 1 · answered Jun 30 '17 at 11:29

0

You could use the DatePipe in the Controller.

I Suggest you add an onChange method to your controller. Your component class would look something like this:

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');
 }

 ...

}

And then in the template use

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

answered Jun 30 '17 at 11:29

hvsp

327
4
12

How do I adapt it to my controller though? As I mentioned, I have zero Angular knowledge. Controller looks like this: `'use strict'; module.exports = [ ... '$scope', '$timeout', userService ... function( ... $scope, $timeout, userService, ... ) { ... });` – BentCoder Jun 30 '17 at 11:40
Ok, I was aiming for a Angular.io (Angular2) solution but your are obviously using Angular.js. But the approach would be similar I believe. You will have to inject '$filter' in your controller. (I believe you just have to add '$filter' and $filter respectively in the two line you mentionend in your comment. Inside the controller you will add a function onChange() to the scope. `$scope.onChange = function (expires_at) { return $filter('date')(expires_at, 'dd/MM/yyyy HH:mm:ss');} ` Hope this helps. I'm not so sure about angular.js anymore. – hvsp Jun 30 '17 at 13:44

Using pipe in AngularJS mg-model and formatting the date

1 Answers1