Получение даты, отформатированной и напечатанной на экране в приложении Angular 2

Question

Я пытаюсь получить канал даты, который я использую в своем приложении Angular, чтобы правильно проанализировать его при использовании в шаблоне во входных данных. Первоначально, до форматирования даты, код выглядел так:

<input class="app-input" [readonly]="!hasAdminAccess"                                  
    [(ngModel)]="staff.profile.hireDate" placeholder="None"
    [field-status]="getPropertyStatus('profile.hireDate')"/>

Самое близкое, что я получил к трубе даты, это:

<input class="app-input"
{{ staff.profile.hireDate | date:'shortDate' }} placeholder="None"
[field-status]="getPropertyStatus('profile.hireDate')"/>

Но что это выводит на печать, так это (буквально это):

> <input class="app-input" 3/18/2014 placeholder="None"
> [field-status]="getPropertyStatus('profile.hireDate')"/>

Теперь вы заметите, что дата правильно отформатирована (и преобразование даты происходит успешно, чтобы сделать это так:

3/18/2014

Впрочем, остальное я не хочу (очевидно). Как я могу переработать синтаксис здесь, чтобы получить только дату для печати? Я уставился на него и попробовал несколько настроек, но пока не смог заставить его работать.

Answer 1

Вы можете использовать функции get и set в машинописи и ngModelChanged свойство для изменения ngModel после того, как это было установлено.

Компонент шаблона:

<input class="app-input" [(ngModel)]="hireDate" (ngModelChange)="dateChanged($event)"/>

Класс компонента:

import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <button (click)="setDate()">Set Date</button>
      <input class="app-input" readonly="true" [(ngModel)]="hireDate" (ngModelChange)="dateChanged($event)" placeholder="None"/>
    </div> 
  `,
})
export class App {
  name:string;
  staff: any;
  myDate: any;
  private _hireDate;

  dateChanged(value) {
    this.hireDate = this.datePipe.transform(value, 'shortDate');
  }

  set hireDate(value) {
    this._hireDate = this.datePipe.transform(value, 'shortDate');
  }

  get hireDate() {
    return this._hireDate;
  }

  setDate() {
    this.hireDate = '10-03-1993';
  }

  constructor(private datePipe: DatePipe) {
  }
}

Значение ввода будет устанавливаться при каждом изменении ввода, поэтому это может вызвать проблему с UX, так как пользователь не сможет ввести предпочитаемую дату. Обходной путь должен вызывать функцию изменения даты всякий раз, когда пользователь вводит свою дату. (Например, с помощью нажатия кнопки).

Я считаю, что функции set и get работают только для переменных класса, в вашем случае у вас есть свойство объекта. Изменение установленной функции, как показано ниже, будет работать.

  set hireDate(value) {
    this._hireDate = this.datePipe.transform(value, 'shortDate');
    this.staff.profile.hireDate = this._hireDate;
  }

Я также добавил сюда plunkr.