1

Current example - https://plnkr.co/edit/NjKoAP?p=preview

I'm trying to add the timepicker plugin https://weareoutman.github.io/clockpicker into my angular2 form and make it update ng-model.

As you can see the when the mouse enters the input field it shows the datepicker control and allows the time to be set in the input box. However it doesn't update the time in ngmodel. How do I get the new time value updated in ng-model?

I've been trying to get this to work for days so any help would be gratefully appreciated.

Below is the code is the app code:

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

And the index file:

<!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>
Erik Philips
  • 53,428
  • 11
  • 128
  • 150
Tom Bailey-Horton
  • 29
  • 3
  • Why are you using very old version of angular2? – yurzui Nov 10 '16 at 18:44
  • Not sure about the code that I've posted and the version on pinkr, but on my dev version I am using the latest version and it behaves exactly the same way as the example. – Tom Bailey-Horton Nov 10 '16 at 20:49
  • In your plunker angular alpha27. Check this https://plnkr.co/edit/QZEw1N?p=preview I changed reference to plugin and rewrite your directive a bit – yurzui Nov 11 '16 at 06:30
  • Excellent yurzui you fixed it! thank you very much for your help. I've been killing myself for days trying to get this to work. If you enter this as an answer I'll happily mark this as a solution and give you credit. – Tom Bailey-Horton Nov 11 '16 at 10:30

0 Answers0