Question

当前示例 - https://plnkr.co/edit/NjKoAP?p=preview

我尝试将timepicker插件https://weareoutman.github.io/clockpicker添加到我的angular2表单中并使其更新为ng-model。

正如您所看到的，当鼠标进入输入字段时，它会显示datepicker控件并允许在输入框中设置时间。但是它不会更新ngmodel中的时间。如何在ng-model中更新新的时间值？

我一直试图让这个工作好几天，所以感谢任何帮助。

以下代码是应用代码：

import {bootstrap, FORM_DIRECTIVES, Host, Component, Directive, View, Renderer, DefaultValueAccessor, NgControl, Self, ElementRef, OnInit } from 'angular2/angular2'

@Directive({
  selector: '[time-picker]'
})
export class TimePicker extends DefaultValueAccessor implements OnInit {
  private element: ElementRef;

  constructor(@Self() model: NgControl, element: ElementRef, renderer: Renderer) {
    super(model, renderer, element);
    this.el = element;
  }

  public writeValue(value: any): void {
    console.log('Writevalue');
      $(this.el.nativeElement).clockpicker({
        placement: 'top',
        align: 'left', 
        placement: 'bottom', 
        donetext: 'Done',
        afterDone: function() {
          this.value = 'Test';
          value = 'test 2';
          console.log("after done");
        } 

      });
    }  

  public onInit(): void {
    console.log('onInit')
    $(this.el.nativeElement).clockpicker({placement: 'top',  placement: 'bottom', align: 'left', donetext: 'Done'  });
  }
}

@Component({
  selector: 'app'
})
@View({
  template: `
    <div>
      <h3>Time:{{value}}</h3>
      <form>
        <input type="text" time-picker ng-control="value" [(ng-model)]="value" />
      </form>
    </div>
  `,
  directives: [FORM_DIRECTIVES, TimePicker]
})
export class App {
  public value: Date;

  constructor() { 
    this.value = '14:32'; 
  }
}

bootstrap(App);

索引文件：

<!DOCTYPE html>
<html>

<head>
  <title>Angular2 Example</title>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

  <script src="https://code.angularjs.org/tools/traceur-runtime.js"></script>
  <script src="https://code.angularjs.org/tools/system.js"></script>
  <script src="https://code.angularjs.org/tools/typescript.js"></script>

  <script src="config.js"></script>
  <script src="https://code.angularjs.org/2.0.0-alpha.37/angular2.dev.js"></script>

  <!-- JQuery clockpicker plugin -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.js"></script>

  <script>
    System.import('./app.ts');
  </script>

</head>

<body>
  <app>
    loading...
  </app>
</body>

</html>

实现jQuery timepicker插件和更新模型

0 个答案: