如何在 Angular 中使用 JQuery 日期选择器？

Question

我尝试在 ngOnInit 中编写以下代码

$('#DatePicker').datepicker({
          changeMonth: true,
          changeYear: true,
          maxDate:0,
          //The calendar is recreated OnSelect for inline calendar
          onSelect: function(date, dp) {
            this.updateDatePickerCells(dp);

          },
          onChangeMonthYear: function(month, year, dp) {
            this.updateDatePickerCells(dp);
          },
          beforeShow: function(elem, dp) { //This is for non-inline datepicker
            this.updateDatePickerCells(dp);
          }
        });

updateDatePickerCells(dp) {
    /* Wait until current callstack is finished so the datepicker
       is fully rendered before attempting to modify contents */
    setTimeout(function() {
      //Fill this with the data you want to insert (I use and AJAX request).  Key is day of month
      //NOTE* watch out for CSS special characters in the value
      var cellContents = {
        '15-06-2020': '20',
        '15-08-2018': '60',
        '28-08-2018': '$99.99'
      };
      //Get the month and year for checking.
      var selected_month = parseInt($('.ui-datepicker-month').val()) + 1;
      var selected_year = $('.ui-datepicker-year').val();
      //Select disabled days (span) for proper indexing but // apply the rule only to enabled days(a)
      $('.ui-datepicker td > *').each(function(idx, elem) {
        //Specific the target key by adding back the month and year.
        var key = ('0' + (idx + 1)).slice(-2) + '-' + ('0' + selected_month).slice(-2) + '-' + selected_year
        var value = cellContents[key] || 0;

        // dynamically create a css rule to add the contents //with the :after                         
        //             selector so we don't break the datepicker //functionality 
        var className = 'datepicker-content-' + CryptoJS.MD5(value).toString();


        if (value == 0)
          this.addCSSRule('.ui-datepicker td a.' + className + ':after {content: "\\a0";}'); // 
        else
          this.addCSSRule('.ui-datepicker td a.' + className + ':after {content: "' + value + '";}');

        $(this).addClass(className);


      });
    }, 0);
  }
   dynamicCSSRules = [];

   addCSSRule(rule) {
    if ($.inArray(rule,this.dynamicCSSRules) == -1) {
      $('head').append('<style>' + rule + '</style>');
      this.dynamicCSSRules.push(rule);

    }
  }

Update 方法用于根据日期在日历单元格上显示一些内容。 还在 index.html 中导入了以下脚本文件和 css 文件

 <script src="./assets/jquery-ui.js"></script>
  <link rel="stylesheet"  href="./assets/jquery-ui.css">

得到以下错误

ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_0__(...).datepicker is not a function
    at CalendarComponent.ngOnInit (calendar.component.ts:16)
    at checkAndUpdateDirectiveInline (core.js:33353)
    at checkAndUpdateNodeInline (core.js:46284)
    at checkAndUpdateNode (core.js:46223)
    at debugCheckAndUpdateNode (core.js:47246)
    at debugCheckDirectivesFn (core.js:47189)
    at Object.updateDirectives (calendar.component.html:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:47177)
    at checkAndUpdateView (core.js:46188)
    at callViewAction (core.js:46554)

请任何人建议我如何以角度或任何其他方式使用 Jquery datepicker 关于如何根据日期向日历单元格添加额外文本...

提前致谢！！！

Answer 1

我不建议使用直接的 DOM 编辑库，如 JQuery，这被认为是不好的做法，因为它会干扰 Angular 修改 DOM 的方式导致错误。

相反，您可以使用没有 JQuery 实现的 Angular Bootstrap。 或 Angular Material。

但是，如果您坚持使用 JQuery，您可以尝试其他生命周期挂钩 [3]

[1]https://ng-bootstrap.github.io/#/components/datepicker/examples

[2]https://ng-bootstrap.github.io/#/home

[3]https://angular.io/guide/lifecycle-hooks

Answer 2

请记住，将 jQuery 与 angular 一起使用被认为是不好的做法，要么将逻辑包装在指令中，要么使用现有的替代方案。例如，如果您使用的是引导日期选择器，那么已经为您编写了大量包装 jquery 的指令:-) （例如https://www.npmjs.com/package/ngx-date-picker）

否则你可以像这样在构造函数中注入 ElementRef。

declare var $: any; 
// compiler will no longer complain, 
// but a more typesafe way would be to install jquery with typescript definitions

export class MyComponent {
  constructor(private elRef:ElementRef) {}
  ngAfterViewInit() {
    var div = this.elRef.nativeElement.querySelector('div');
    console.log(div);
  }

  ngAfterContentInit() {
    var div = this.elRef.nativeElement.querySelector('div');
    // Do jquery binding inside here. 
    console.log(div);
  }
}