Как использовать JQuery datepicker в Angular?

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

    }
  }

Метод обновления используется для отображения некоторого содержимого в ячейке календаря на основе даты. Также импортирован приведенный ниже файл сценария и файл css в индекс. html

 <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 в angular или любым другим способом о том, как добавить дополнительный текст в ячейку календаря на основе даты ...

Заранее спасибо !!!

Answer 1

Я бы НЕ рекомендовал использовать библиотеки прямого редактирования DOM, такие как JQuery, это считается плохой практикой, поскольку это может помешать способу Angular изменения DOM, вызывая ошибки.

Вместо этого вы можете использовать Angular Bootstrap, который реализован без JQuery. Или Angular Meterial.

Однако, если вы настаиваете на использовании JQuery, вы можете попробовать другие хуки жизненного цикла [3]

[1] https://ng-bootstrap.github.io/# / components / datepicker / примеры

[2] https://ng-bootstrap.github.io/# / дом

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

Answer 2

Имейте в виду, что использование jQuery с angular считается плохой практикой: либо заключить logi c в директиву, либо использовать существующую альтернативу. Если, например, вы используете bootstrap datepicker, для вас уже написано множество директив, обертывающих 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);
  }
}