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

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

2 个答案: