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

我试着用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);

    }
  }

请任何人建议我如何使用Jquery datepicker在角度或任何其他方式如何添加额外的文本日历单元格的日期为基础

提前感谢

我不建议使用像JQuery这样的直接DOM编辑库，这被认为是不好的做法，因为它会干扰Angular修改DOM的方式，从而导致bug

相反，您可以使用Angular Bootstrap，它是在没有JQuery的情况下实现的。 或角材料

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

[1]

[2]

---

[3]

请记住，将jQuery与angular一起使用被认为是不好的做法，或者将逻辑包装在指令中，或者使用现有的替代方法。例如，如果您正在使用引导数据采集器，那么已经为您编写了大量包装jquery的指令：- 例如

否则，您可以像这样在构造函数中注入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);
  }
}

---

但问题是我需要根据日期在日期单元格上显示一些值。。。如果我们使用上述方法，您需要更详细地描述您正在尝试做的事情，那么我们是否能够做到这一点。请通过编辑您的问题来完成此操作。

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)

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