Angular 2 Zeit Eingang Zwei-Wege-Bindung

Question

Ich habe ein Problem mit 2-Wege-Bindung eine Zeit eingeben. Ich kann keinen Weg finden, dies zu erreichen. Hier

ist ein Beispiel in plnkr

http://plnkr.co/edit/Gyn8ER1LDBkkI0HieLZE?p=preview

Und hier ist mein Code:

import {Component} from 'angular2/core' 

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
     Date: <input [(ngModel)] = "date"/> 
     Time: <input type="time" [(valueAsDate)] = "date" /> 

    </div> 
    `, 
    directives: [] 
}) 
export class App { 
    date = new Date(); 
    constructor() { 
    this.name = 'Angular2' 
    } 
} 

Answer 1

Es gibt keine valueAsDate Richtlinie wie die ngModel Richtlinie.

Was können Sie tun, ist

<input type="time" [value]="date" (input)="date = $event.target.valueAsDate" /> 

Answer 2

ich mehrere Art und Weise zu sehen, das zu tun:

• die type zu date in Ihrem Eingang einstellen, aber es ist nicht Cross-Browser:

  <input type="date" .../> 
  

• Verwenden Sie einen Angular2-kompatiblen Datumsauswahl wie ng2 -Datumsauswahl.

  <datepicker [(ngModel)]="test.date"></datepicker> 
  

  Sehen Sie diese Frage für weitere Informationen:

  • How to use date picker in Angular 2?

• Eine weitere Möglichkeit, einen benutzerdefinierten Wert Accessor zu implementieren wäre die Zeichenfolge der Eingabe parsen/Format von/bis ein Datumsobjekt Hier ist eine Art und Weise zu tun, dass:

  const DATE_VALUE_ACCESSOR = new Provider(
      NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => DateValueAccessor), multi: true}); 
  
  @Directive({ 
      selector: 'input[type=date]', 
      host: { '(input)': 'doOnChange($event.target)' }, 
      providers: [ DATE_VALUE_ACCESSOR ] 
  }) 
  export class DateValueAccessor extends DefaultValueAccessor { 
      onChange = (_) => {}; 
      onTouched =() => {}; 
  
      writeValue(value:any):void { 
      if (value!=null) { 
       super.writeValue(value.toString()); 
      } 
      } 
  
      doOnChange(elt) { 
      var val = elt.value; 
      this.onChange(new Date(val)); 
      } 
  } 
  

  Sehen Sie diese Frage für weitere Informationen:

  • Angular 2. Prevent input and model changing using directive

Answer 3

Ich würde eine flexible visuelle Zeitauswahl für Winkel empfehlen 2+ Sie können es einfach installieren mit:

npm install amazing-time-picker --save 

dann, öffnen Sie Ihre app.module.ts und zu Ihrem Modul hinzufügen:

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AmazingTimePickerModule } from 'amazing-time-picker'; // this line you need 
import { AppComponent } from './app.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    AmazingTimePickerModule // this line you need 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Bitte lesen Sie api zu verstehen, wie dieses Modul verwenden hier:

https://github.com/owsolutions/amazing-time-picker

Es wäre so etwas wie folgt aussieht: