14

次のような日時ピッカー ディレクティブを作成しようとしています。
<input [(ngModel)]="date1" datetime-picker date-only />

date1日付として割り当てられます。new Date()

これをhtmlで表示すると、入力要素のテキストは次のようになります
Thu Jan 01 2015 00:00:00 GMT-0500

代わりに次のように表示したい
2015-01-01 00:00:00

デフォルトの toString() 関数からの結果を表示する代わりに、DatePipe を使用してディレクティブ内で日付をフォーマットしたいと考えています。

私の質問は; 「ディレクティブ内で、どうすれば ngModel 変数にアクセスできますか?」、たとえば date1 など、toString() メソッドを追加できるようにします。

私のアプローチが正しくない場合は、アドバイスしてください。

4

3 に答える 3

14

にアクセスするngModelに@Input()は、datetime-picker. また、双方向のデータ バインディングを使用しているため、変更を に送信する必要がありますngModel。

@Directive({
  selector:'[date-time-picker]'
})
export class DateTimePicker{
  @Input() ngModel;
  @Output() ngModelChange = new EventEmitter();

  ngOnInit(){
    this.ngModelChange.emit(this.ngModel.toDateString());
  }
}

このプランクをチェック

私見のより良い方法は、DatePipe

@Component({
  selector: 'my-app',
  directives:[DateTimePicker],
  template: `
      <input (ngModelChange)="myDate = $event" [ngModel]="myDate | date:'short'" datetime-picker  />
  `
})
export class AppComponent {
  myDate = new Date();
}

このプランクをチェック

于 2016-05-23T03:05:56.463 に答える