jQuery Datepicker无法更新AngularJS 4的ngModel问题求助

我来帮你搞定这个问题！你遇到的核心问题是：jQuery Datepicker的操作是在Angular的变更检测机制之外进行的，哪怕你手动触发了input和change事件，Angular也可能没及时捕捉到这些变化。下面给你几个实用的解决方案，按推荐程度排序：

方案一：自定义指令封装Datepicker（最佳实践） #

如果项目中会多次用到Datepicker，把它封装成Angular指令是最靠谱的做法，能完美适配Angular的表单系统，避免直接操作DOM的麻烦：

import { Directive, ElementRef, Input, OnInit, NgZone } from '@angular/core';
import { NgModel } from '@angular/forms';

@Directive({
  selector: '[appDatepicker]',
  providers: [NgModel]
})
export class DatepickerDirective implements OnInit {
  @Input() formato: string = 'mm/dd/yy';
  @Input() mesEnCombo: boolean = false;
  @Input() anioEnCombo: boolean = false;
  @Input() anioMin: string = '1900';
  @Input() anioMax: string = '2100';
  @Input() tamanioAuto: boolean = false;

  constructor(private el: ElementRef, private ngModel: NgModel, private ngZone: NgZone) {}

  ngOnInit() {
    $(this.el.nativeElement).datepicker({
      showOn: "focus",
      autoSize: this.tamanioAuto,
      dateFormat: this.formato,
      changeMonth: this.mesEnCombo,
      changeYear: this.anioEnCombo,
      yearRange: `${this.anioMin}:${this.anioMax}`,
      onSelect: (selectedDate) => {
        this.ngZone.run(() => {
          this.ngModel.control.setValue(selectedDate);
        });
      }
    });
  }
}

然后在HTML中直接使用指令，参数绑定更清晰：

<input class="form-control input-sm" type="text" 
       appDatepicker 
       [(ngModel)]="valor" 
       (ngModelChange)="handleSelected()"
       [formato]="formato" 
       [mesEnCombo]="mesEnCombo" 
       [anioEnCombo]="anioEnCombo"
       [anioMin]="anioMin" 
       [anioMax]="anioMax" 
       [tamanioAuto]="tamanioAuto" />

方案二：用NgZone让回调在Angular上下文执行 #

如果不想封装指令，可以用NgZone把Datepicker的回调包裹起来，强制让代码在Angular的变更检测范围内运行：

1. 先在组件中注入NgZone：

import { Component, NgZone } from '@angular/core';

@Component({
  // 你的组件元数据
})
export class YourComponent {
  valor: string;

  constructor(private ngZone: NgZone) {}

  inicializaDatepicker() { 
    $('#datepicker').datepicker({ 
      showOn: "focus", 
      autoSize: this.tamanioAuto, 
      dateFormat: this.formato, 
      changeMonth: this.mesEnCombo, 
      changeYear: this.anioEnCombo, 
      yearRange: this.anioMin + ':' + this.anioMax, 
      onSelect: (selectedDate) => { 
        this.ngZone.run(() => {
          this.valor = selectedDate;
          this.handleSelected();
        });
      } 
    }); 
  }

  handleSelected() {
    // 你的日期选择后处理逻辑
  }
}

2. 修正HTML的语法错误（原代码中id="datepicker"后面缺少闭合引号）：

<input class="form-control input-sm" type="text" id="datepicker" [(ngModel)]="valor" />

方案三：手动触发Angular变更检测 #

另一种思路是在Datepicker的回调中，手动通知Angular进行变更检测：

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  // 你的组件元数据
})
export class YourComponent {
  valor: string;

  constructor(private cdr: ChangeDetectorRef) {}

  inicializaDatepicker() { 
    $('#datepicker').datepicker({ 
      // 其他配置不变
      onSelect: (selectedDate) => { 
        this.valor = selectedDate;
        this.cdr.detectChanges(); // 手动触发变更检测
        this.handleSelected();
      } 
    }); 
  }
}

额外注意点 #

• 原HTML代码中id="datepicker"后面的引号缺失，这会导致HTML解析错误，一定要修正。
• 尽量避免在Angular中直接用jQuery操作DOM，长期来看封装指令或使用Angular生态的日期组件会更省心。

内容的提问来源于stack exchange，提问作者a鈩撣家�,jquery-ui-datepicker"