Angular 7中的JQuery datepicker未更新输入值

Question

我正在使用 Angular 7 和 JQuery 日期选择器：https://github.com/uxsolutions/bootstrap-datepicker

           <div class="col-lg-2">
              <div class="form-group">
                <div class="input-group">
                  <input class="form-control form-control-lg" data-provide="datepicker" data-date-language="fr" type="text" data-date-format="dd/mm/yyyy" placeholder="From" [(ngModel)]="from" name="from" />
                  <div class="input-group-append">
                    <span class="input-group-text"><i class="fa fa-calendar" aria-hidden="true"></i></span>
                  </div>
                </div>
              </div>
            </div>

但在组件中，我在this.from 中收到的这个值是undefined..

export class SearchBarComponent implements OnInit {
  constructor(
    private router: Router
  ) { }

  search: string;
  from: string;
  to: string;

  ngOnInit() {
  }

  onSubmit() {
    console.log(this.from)
  }
}

我不想使用像 ng-boostrap 或 ngx-boostrap 这样的捆绑软件，因为我不想欺骗导航栏来让它工作。而且我更喜欢控制Boostrap的依赖关系。

请问有没有简单的方法来观察这个输入值的变化？在可能存在的问题中，我没有明确找到这个答案。

Answer 1

您可以使用changeDate 事件

ngOnInit() {
$('.datepicker').datepicker()
    .on("changeDate", function(date) {
        this.from = date;
    });
 }

more info on events

Answer 2

$('#data').datepicker({
    onSelect: (dateText: any, object: any) => {
        this.formulario.get('data').setValue(dateText);
    }
});