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

没有valueAsDate指令像ngModel指令。

你可以做的是

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

Answer 2

我看到几个方式做到这一点：

• 设置type在你输入date但它不是跨浏览器：

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

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

  <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 3

我会建议一个灵活的可视化时间装载机角度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

它会看起来是这样的：