Angular 2时间输入双向绑定

Question

我遇到了2路绑定时间输入的问题。我无法找到实现这一目标的方法。

这是plnkr

中的一个例子

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

这是我的代码：

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

我看到了几种方法：

• 在输入中将type设置为date，但它不是跨浏览器：

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

• 使用符合Angular2标准的日期选择器，例如ng2-datepicker。

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

  有关详细信息，请参阅此问题：

  • How to use date picker in Angular 2?

• 另一种方法是实现一个自定义值访问器来解析/格式化日期对象的输入字符串。这是一种方法：

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

  有关详细信息，请参阅此问题：

  • Angular 2. Prevent input and model changing using directive

Answer 2

我建议灵活的角度2+视觉时间选择器，您可以使用以下方法轻松安装：

npm install amazing-time-picker --save

然后，打开您的app.module.ts并添加到您的模块：

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 { }

请阅读api以了解如何在此处使用此模块：

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

它看起来像这样：