Реализовать плагин jQuery timepicker и обновить модель

Текущий пример - https://plnkr.co/edit/NjKoAP?p=preview

Я пытаюсь добавить плагин timepicker https://weareoutman.github.io/clockpicker в мою форму angular2 и заставить его обновить ng-модель.

Как вы можете видеть, когда мышь входит в поле ввода, она показывает элемент управления DatePicker и позволяет установить время в поле ввода. Однако это не обновляет время в ngmodel. Как получить новое значение времени, обновленное в ng-модели?

Я пытался заставить это работать несколько дней, поэтому любая помощь будет с благодарностью.

Ниже приведен код приложения:

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>
Источник

0 ответов

Другие вопросы по тегам